{"id":20275,"library":"powerbi-visuals-webpack-plugin","title":"powerbi-visuals-webpack-plugin","description":"Webpack plugin for building Power BI custom visuals. Current stable version is 5.0.1, released on an ongoing cadence under Microsoft. Key differentiators vs powerbi-visuals-tools: it integrates with webpack, provides developer server assets and .pbiviz packaging, supports localization, certification auditing, and removal of forbidden network calls for certified visuals. Requires Node >=18.0.0 and webpack 5. The plugin generates GUID, handles pbiviz.json, and enforces API version compatibility.","status":"active","version":"5.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/microsoft/powerbi-visuals-webpack-plugin","tags":["javascript","custom","visuals","powerbi","visualization","analytics"],"install":[{"cmd":"npm install powerbi-visuals-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add powerbi-visuals-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add powerbi-visuals-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency: the plugin hooks into webpack 5 build pipeline","package":"webpack","optional":false},{"reason":"Required runtime dependency for Power BI visual API types and versioning","package":"powerbi-visuals-api","optional":false}],"imports":[{"note":"ESM default import does not work; must use named import. CJS: const { PowerBICustomVisualsWebpackPlugin } = require(...)","wrong":"import PowerBICustomVisualsWebpackPlugin from 'powerbi-visuals-webpack-plugin'","symbol":"PowerBICustomVisualsWebpackPlugin","correct":"import { PowerBICustomVisualsWebpackPlugin } from 'powerbi-visuals-webpack-plugin'"},{"note":"Added in v4.0.0. Both named ESM import and destructured require are valid, but require on dot property is more common and works.","wrong":"require('powerbi-visuals-webpack-plugin').LocalizationLoader","symbol":"LocalizationLoader","correct":"import { LocalizationLoader } from 'powerbi-visuals-webpack-plugin'"},{"note":"CommonJS: must destructure the named export, not assign the whole module. Wrong usage yields undefined.","wrong":"const PowerBICustomVisualsWebpackPlugin = require('powerbi-visuals-webpack-plugin')","symbol":"PowerBICustomVisualsWebpackPlugin","correct":"const { PowerBICustomVisualsWebpackPlugin } = require('powerbi-visuals-webpack-plugin')"}],"quickstart":{"code":"const path = require('path');\nconst { PowerBICustomVisualsWebpackPlugin } = require('powerbi-visuals-webpack-plugin');\nconst MiniCssExtractPlugin = require('mini-css-extract-plugin');\n\nmodule.exports = {\n  entry: './src/visual.ts',\n  output: { path: path.resolve(__dirname, 'dist'), filename: 'visual.js' },\n  resolve: { extensions: ['.ts', '.js'] },\n  module: {\n    rules: [\n      { test: /\\.ts$/, use: 'ts-loader', exclude: /node_modules/ },\n      { test: /\\.less$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'] },\n      { test: /\\.json$/, type: 'json' }\n    ]\n  },\n  plugins: [\n    new PowerBICustomVisualsWebpackPlugin({\n      visual: {\n        name: 'MyVisual',\n        displayName: 'My Visual',\n        guid: 'myVisual123ABC',\n        visualClassName: 'Visual',\n        version: '1.0.0',\n        description: 'A sample custom visual',\n        supportUrl: 'https://example.com'\n      },\n      author: 'Author',\n      apiVersion: '5.3.0',\n      capabilities: {},\n      iconImage: 'data:image/png;base64,...',\n      devMode: true,\n      packageOutPath: path.resolve(__dirname, 'dist'),\n      generatePbiviz: true\n    }),\n    new MiniCssExtractPlugin({ filename: 'visual.css' })\n  ],\n  devServer: {\n    https: true,\n    port: 8080\n  }\n};","lang":"javascript","description":"Configures webpack with PowerBICustomVisualsWebpackPlugin for a Power BI custom visual, including TypeScript, Less, CSS extraction, and devServer."},"warnings":[{"fix":"Upgrade Node to version 18 or higher.","message":"v5.0.0 requires Node >=18.0.0; Node <18 is no longer supported.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Update import statements: use 'PowerBICustomVisualsWebpackPlugin' and optionally 'LocalizationLoader'.","message":"v4.0.0 changed imports: plugin class renamed from PowerBIVisualsWebpackPlugin to PowerBICustomVisualsWebpackPlugin. LocalizationLoader introduced.","severity":"breaking","affected_versions":">=4.0.0 <4.0.0"},{"fix":"Pass capabilities as an object instead of a string file path.","message":"Option 'string' for capabilities has been deprecated; use object form.","severity":"deprecated","affected_versions":">=4.0.0"},{"fix":"Install build-essential on Linux (apt install build-essential) or Windows build tools (npm install --global windows-build-tools).","message":"If npm install fails due to missing git or node-gyp, ensure build tools are installed (e.g., Visual Studio Build Tools on Windows).","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run 'npm install powerbi-visuals-webpack-plugin --save-dev' and ensure the import uses named export.","cause":"Package not installed or incorrectly imported.","error":"Cannot find module 'powerbi-visuals-webpack-plugin'"},{"fix":"Use 'import { PowerBICustomVisualsWebpackPlugin } from ...' or 'const { PowerBICustomVisualsWebpackPlugin } = require(...)'","cause":"Importing default export instead of named export.","error":"TypeError: PowerBICustomVisualsWebpackPlugin is not a constructor"},{"fix":"Upgrade powerbi-visuals-api: 'npm install powerbi-visuals-api@latest --save'","cause":"Visual uses an outdated powerbi-visuals-api version.","error":"Error: Unsupported API version. Required at least 3.0.0"},{"fix":"Add ts-loader for TypeScript and less-loader + css-loader for Less files in webpack config.","cause":"Missing loader for .ts or .less files.","error":"Module parse failed: Unexpected token (1:0) - You may need an appropriate loader to handle this file type."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}