Registry /
devops / powerbi-visuals-webpack-plugin
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
PowerBICustomVisualsWebpackPlugin
✓ import { PowerBICustomVisualsWebpackPlugin } from 'powerbi-visuals-webpack-plugin'
✗ import PowerBICustomVisualsWebpackPlugin from 'powerbi-visuals-webpack-plugin'
ESM default import does not work; must use named import. CJS: const { PowerBICustomVisualsWebpackPlugin } = require(...)
LocalizationLoader
✓ import { LocalizationLoader } from 'powerbi-visuals-webpack-plugin'
✗ require('powerbi-visuals-webpack-plugin').LocalizationLoader
Added in v4.0.0. Both named ESM import and destructured require are valid, but require on dot property is more common and works.
PowerBICustomVisualsWebpackPlugin
✓ const { PowerBICustomVisualsWebpackPlugin } = require('powerbi-visuals-webpack-plugin')
✗ const PowerBICustomVisualsWebpackPlugin = require('powerbi-visuals-webpack-plugin')
CommonJS: must destructure the named export, not assign the whole module. Wrong usage yields undefined.
Configures webpack with PowerBICustomVisualsWebpackPlugin for a Power BI custom visual, including TypeScript, Less, CSS extraction, and devServer.
const path = require('path');
const { PowerBICustomVisualsWebpackPlugin } = require('powerbi-visuals-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: './src/visual.ts',
output: { path: path.resolve(__dirname, 'dist'), filename: 'visual.js' },
resolve: { extensions: ['.ts', '.js'] },
module: {
rules: [
{ test: /\.ts$/, use: 'ts-loader', exclude: /node_modules/ },
{ test: /\.less$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'] },
{ test: /\.json$/, type: 'json' }
]
},
plugins: [
new PowerBICustomVisualsWebpackPlugin({
visual: {
name: 'MyVisual',
displayName: 'My Visual',
guid: 'myVisual123ABC',
visualClassName: 'Visual',
version: '1.0.0',
description: 'A sample custom visual',
supportUrl: 'https://example.com'
},
author: 'Author',
apiVersion: '5.3.0',
capabilities: {},
iconImage: 'data:image/png;base64,...',
devMode: true,
packageOutPath: path.resolve(__dirname, 'dist'),
generatePbiviz: true
}),
new MiniCssExtractPlugin({ filename: 'visual.css' })
],
devServer: {
https: true,
port: 8080
}
};
Errors
Common errors & fixes
Cannot find module 'powerbi-visuals-webpack-plugin'
Package not installed or incorrectly imported.
fixRun 'npm install powerbi-visuals-webpack-plugin --save-dev' and ensure the import uses named export.
TypeError: PowerBICustomVisualsWebpackPlugin is not a constructor
Importing default export instead of named export.
fixUse 'import { PowerBICustomVisualsWebpackPlugin } from ...' or 'const { PowerBICustomVisualsWebpackPlugin } = require(...)' Error: Unsupported API version. Required at least 3.0.0
Visual uses an outdated powerbi-visuals-api version.
fixUpgrade powerbi-visuals-api: 'npm install powerbi-visuals-api@latest --save'
Module parse failed: Unexpected token (1:0) - You may need an appropriate loader to handle this file type.
Missing loader for .ts or .less files.
fixAdd ts-loader for TypeScript and less-loader + css-loader for Less files in webpack config.
Audit
Dependencies
webpackrequiredPeer dependency: the plugin hooks into webpack 5 build pipeline
powerbi-visuals-apirequiredRequired runtime dependency for Power BI visual API types and versioning