Dev Server Start or Visual Package Fails, Rendering SDK Unavailable

[dm-p]

Something seems to have happened with babel recently that is causing the SDK to fail for new visuals, or once the visual dependencies have been refreshed via npm in existing ones.

To reproduce:

• Install powerbi-visuals-tools as per instructions
• Install certificate as normal
• Run pbiviz start

Visual will not start, with an error similar to the following:

ERROR in ./.tmp/precompile/visualPlugin.ts
Module build failed (from C:/Users/danielm/AppData/Roaming/npm/node_modules/powerbi-visuals-tools/node_modules/babel-loader/lib/index.js):
Error: [BABEL] C:\Users\danielm\Documents\testVisual\.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\\danielm\\AppData\\Roaming\\npm\\node_modules\\powerbi-visuals-tools\\node_modules\\@babel\\preset-env\\lib\\index.js")
    at getPlugin (C:\Users\danielm\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\@babel\preset-env\lib\index.js:67:11)
    at Array.from.map.pluginName (C:\Users\danielm\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\@babel\preset-env\lib\index.js:258:62)
    at Array.map (<anonymous>)
    at _default (C:\Users\danielm\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\@babel\preset-env\lib\index.js:258:43)
    at C:\Users\danielm\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\@babel\helper-plugin-utils\lib\index.js:19:12
    at C:\Users\danielm\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\danielm\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\danielm\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\gensync\index.js:254:32)
    at evaluateAsync (C:\Users\danielm\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\gensync\index.js:284:5)
    at Function.errback (C:\Users\danielm\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\gensync\index.js:108:7)
    at errback (C:\Users\danielm\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\@babel\core\lib\gensync-utils\async.js:70:18)
    at async (C:\Users\danielm\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\gensync\index.js:183:31)
    at onFirstPause (C:\Users\danielm\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\gensync\index.js:209:13)
    at Generator.next (<anonymous>)
 @ multi ./.tmp/precompile/visualPlugin.ts visual.js[0]

We get a similar issue with pbiviz package.

This effectively prevents the SDK from working and is pretty critical.

I've tried a couple of workarounds listed here and here, but haven't been able to get these to work successfully. I've also tried using yarn rather than NPM and still no good :(

[zBritva]

Workaround:

Install @babel/compat-data and tools locally for the visual project, for that call
npm install @babel/compat-data@7.8.0 powerbi-visuals-tools --save-dev
from root of visual project.

Add scripts to run local version of tools:

"scripts": {
    "pbiviz": "pbiviz",
    "start": "pbiviz start",
    "package": "pbiviz package"
},
...

Call npm run start and npm run package to start dev server and create the visual package.

Get from angular/angular-cli#17262 (comment)

[dm-p]

Hi @zBritva, and thanks for the prompt response.

I've just tried this with a new visual, and I'm still getting the reported error - this is using npm run start/npm run package rather than pbiviz start/pbiviz package.

For reference, my package.json looks as follows after running your suggested workaround:

{
  "name": "visual",
  "scripts": {
    "pbiviz": "pbiviz",
    "start": "pbiviz start",
    "package": "pbiviz package",
    "lint": "tslint -c tslint.json -p tsconfig.json"
  },
  "dependencies": {
    "@babel/runtime": "7.6.0",
    "@babel/runtime-corejs2": "7.6.0",
    "@types/d3": "5.7.2",
    "d3": "5.12.0",
    "powerbi-visuals-utils-dataviewutils": "2.2.1",
    "powerbi-visuals-api": "~2.6.1",
    "core-js": "3.2.1"
  },
  "devDependencies": {
    "@babel/compat-data": "^7.8.0",
    "powerbi-visuals-tools": "^3.1.10",
    "ts-loader": "6.1.0",
    "tslint": "^5.18.0",
    "tslint-microsoft-contrib": "^6.2.0",
    "typescript": "3.6.3"
  }
}

[zBritva]

@dm-p I got the same issue with new visual project. For old project it works.

@uve did you get reports from other developers with similar error?

[EugeneElkin]

Update with fix is coming

[uve]

fixed in powerbi-visuals-tools@3.1.11

[jdcastro2]

tTank You