Power BI custom D3 chart Could not find plugin "proposal-numeric-separator"

Question

I have tried for custom D3 Power BI ,but showing me below error .I also reinstall pbiviz and node but showing same error .Need little help.

I tried adding different version older but not got success. my node version is v12.16.1. and pbiviz 3.1.10 Now

PS C:\Users\mahendra\Downloads\PowerBI-visuals-sampleBarChart-master\PowerBI-visuals-sampleBarChart-master\CircleCard> pbiviz package
 info   Building visual...
 info   Start preparing plugin template
 info   Finish preparing plugin template
Error parsing bundle asset "C:\Users\mahendra\Downloads\PowerBI-visuals-sampleBarChart-master\PowerBI-visuals-sampleBarChart-master\CircleCard\.tmp\drop\visual.js": no such file

No bundles were parsed. Analyzer will show only original module sizes from stats file.

Webpack Bundle Analyzer saved report to C:\Users\mahendra\Downloads\PowerBI-visuals-sampleBarChart-master\PowerBI-visuals-sampleBarChart-master\CircleCard\webpack.statistics.prod.html


 ERROR  Failed to compile with 1 errors                                                             10:43:12 PM
 error  in ./.tmp/precompile/visualPlugin.ts

Module build failed (from C:/Users/mahendra/AppData/Roaming/npm/node_modules/powerbi-visuals-tools/node_modules/babel-loader/lib/index.js):
Error: [BABEL] C:\Users\mahendra\Downloads\PowerBI-visuals-sampleBarChart-master\PowerBI-visuals-sampleBarChart-master\CircleCard\.tmp\precompile\visualPlugin.ts: Could not find plugin "proposal-numeric-separator". Ensure there is an entry in ./available-plugins.js for it. (While processing: "C:\\Users\\mahendra\\AppData\\Roaming\\npm\\node_modules\\powerbi-visuals-tools\\node_modules\\@babel\\preset-env\\lib\\index.js")
    at getPlugin (C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\@babel\preset-env\lib\index.js:67:11)
    at C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\@babel\preset-env\lib\index.js:258:62
    at Array.map (<anonymous>)
    at C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\@babel\preset-env\lib\index.js:258:43
    at C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\@babel\helper-plugin-utils\lib\index.js:19:12
    at C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\@babel\core\lib\config\full.js:199:14
    at Generator.next (<anonymous>)
    at Function.<anonymous> (C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\@babel\core\lib\gensync-utils\async.js:26:3)
    at Generator.next (<anonymous>)
    at step (C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\gensync\index.js:254:32)
    at evaluateAsync (C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\gensync\index.js:284:5)
    at Function.errback (C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\gensync\index.js:108:7)
    at errback (C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\@babel\core\lib\gensync-utils\async.js:70:18)
    at async (C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\gensync\index.js:183:31)
    at onFirstPause (C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\gensync\index.js:209:13)
    at Generator.next (<anonymous>)

 @ multi ./.tmp/precompile/visualPlugin.ts

 error  Package wasn't created. 1 errors found

 warn   Please, make sure that the visual source code matches to requirements of certification:

 info   Visual must use API v2.5 and above
 info   The project repository must:
 info   Include package.json and package-lock.json;
 info   Not include node_modules folder
 info   Run npm install expect no errors
 info   Run pbiviz package expect no errors
 info   The compiled package of the Custom Visual should match submitted package.
 info   npm audit command must not return any alerts with high or moderate level.
 info   The project must include Tslint from Microsoft with no overridden configuration, and this command shouldn’t return any tslint errors.
 info   https://www.npmjs.com/package/tslint-microsoft-contrib
 info   Ensure no arbitrary/dynamic code is run (bad: eval(), unsafe use of settimeout(), requestAnimationFrame(), setinterval(some function with user input).. running user input/data etc.)
 info   Ensure DOM is manipulated safely (bad: innerHTML, D3.html(<some user/data input>), unsanitized user input/data directly added to DOM, etc.)
 info   Ensure no js errors/exceptions in browser console for any input data. As test dataset please use this sample report

 info   Full description of certification requirements you can find in documentation:
 info   https://learn.microsoft.com/en-us/power-bi/power-bi-custom-visuals-certified#certification-requirements

Answer 1

The root issue seems to be a problematic version of @babel/plugin-proposal-numeric-separator that powerbi-visuals-tools is depending on.

An alternative to the accepted solution is to install a working version of @babel/plugin-proposal-numeric-separator as a global dependency and then modify the powerbi-visuals-tools to use this instead of its packaged version. See steps below:

1. npm i -g @babel/plugin-proposal-numeric-separator
2. Locate the file that lists dependencies for the failing module. See the accepted answer for instructions, but it seems to be this path for Windows: <userDir>/AppData/Roaming/npm/node_modules/powerbi-visuals-tools/node_modules/@babel/preset-env/lib/available-plugins.js
3. Add the following lines to this file:
   1. var _pluginTransformNumericSeperator = _interopRequireDefault(require("@babel/plugin-proposal-numeric-separator"));
      • This imports our globally installed dependency: place anywhere above the definition of the export object _default
   2. "proposal-numeric-separator": _pluginTransformNumericSeperator
      • Add the dependency as a new export in the export object _default by adding a new key value pair

You should now see the build succeed.

As a note, I'd generally avoid installing global dependencies like this. However, this may be the easiest workaround until the powerbi-visuals-tools package is updated to fix this issue. When this is done, I would recommend uninstalling the global dependency and reinstalling the powerbi-visuals-tools from scratch to undo our changes to the dependency file.

Answer 2

I sorted out after long trial and error.

Here are the steps. First, manually install the problematic dependencies:

npm install --save-dev @babel/core
npm install --save-dev @babel/preset-env
npm i @babel/plugin-proposal-numeric-separator

Second, go to file path in which the error is occurring (not in your code dir). In my case:

C:/Users/mahendra/AppData/Roaming/npm/node_modules/powerbi-visuals-tools/node_modules/@babel/preset-env/lib/available-plugins.js

Note that this was found by examining the error message and noticing this line:

Ensure there is an entry in ./available-plugins.js for it. (While processing: "C:/Users/mahendra/AppData/Roaming/npm/node_modules/powerbi-visuals-tools/node_modules/@babel/preset-env/lib/index.js")

Finally, add the following lines to the file:

1. var _pluginTransformNumericSeperator = _interopRequireDefault(require("@babel/plugin-proposal-numeric-separator")); (Import dependency; anywhere above the definition of the export object _default)

2. "proposal-numeric-separator": _pluginTransformNumericSeperator (Add the dependency as a new export in the export object _default by adding a new key value pair)

Note that you may have to replace the path argument to require() with an absolute path to the location of @babel/plugin-proposal-numeric-separator in step 1 above if you are unable to resolve this during your next build.

Enjoy!