We Keep Coding

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

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

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:
var _pluginTransformNumericSeperator = _interopRequireDefault(require("#babel/plugin-proposal-numeric-separator")); (Import dependency; anywhere above the definition of the export object _default)
"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!

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:
npm i -g #babel/plugin-proposal-numeric-separator
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
Add the following lines to this file:
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
"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.

Can't build or install React Native app after installing React Navigation

I've just started building my first React Native app with minimal success. I've built my boilerplate code but now I want to add a separate screen to it. Cue React Navigation.
Having tried twice to install the module, I've not had much luck. I used both Facebook's documentation and the Getting Started guide from React Navigation themselves. Still no luck.
The error I get is something to do with the build.gradle file in my android folder. As per the Getting Started guide, I did add two lines into my dependencies area but this doesn't appear to have had any effect.
The error message is as follow:
Could not compile build file:
'C:\Users\USERNAME\Documents\ReactNative\WasteAway\android\app\build.gradle\'
> startup failed
General error during semantic analysis: Unsupported class file major version 57
My dependencies in the build.gradle file are as follows:
dependencies {
implementation fileTree(dir: "libs", include: ["*.jar"])
implementation "com.facebook.react:react-native:+" // From node_modules
implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
if (enableHermes) {
def hermesPath = "../../node_modules/hermes-engine/android/";
debugImplementation files(hermesPath + "hermes-debug.aar")
releaseImplementation files(hermesPath + "hermes-release.aar")
} else {
implementation jscFlavor
}
}
Am I missing something obvious here or have I skipped a step on the tutorials? I can't see where I'm going wrong here, folks. Any help is greatly appreciated.

Answering this since I've been advised on the solution:
It looks like it was the version of the JDK that I was using which was causing problems. Strangely enough, I was using too new a version that was notoriously buggy. Uninstalling and reverting JDK1.8 solved my issues. Explanation here.

Ember.js: How to share package JSON file dependency to child engines and addons

Basically I need to know how Ember Js can share parent app package.json file dependency(xyz:3.0.0) to child engine and addons without being used again in child engine and addon package.json file. So that I can reduce the size of the application.
As of now in our application we installing common package dependency in all our child engines and addons even though we used in parent app its increases application size.
Here is my clear example of my project scenario.
parentApp(xxx):
Which has package.json file containes few dependency like ex: vendor-package1:10.0.0, vendor-package2:4.0.0, Child Engine1(yyy), Child Engine2(zzz)
Child Engine1(yyy)
Which has package.json file containes few dependency like ex: vendor-package1:10.0.0, vendor-package2:4.0.0
Child Engine2(zzz)
Which has package.json file containes few dependency like ex: vendor-package1:10.0.0, vendor-package2:4.0.0
So if you notice parent app and child engines has same dependency(vendor-package1:10.0.0, vendor-package2:4.0.0) which I need to do npm install for all three app. I'm adding (vendor-package:10.0.0, vendor-package2:4.0.0) to all my child engines because it should available to my engines.
Because of this my dist folder has (vendor-package1:10.0.0, vendor-package2:4.0.0) to all my parentApp and engines, which increase in size.
If I add(vendor-package1:10.0.0, vendor-package2:4.0.0) only to my parentApp(xxx) then my child engines cannot access those component inside vendor-package1 and vendor-package2.
Please suggest some solution where I don't want to add dependency to all my apps.

I've setup a demo ember 3.12 app at https://github.com/bartocc/so-58343095.
This app depends on ember-concurrency and also has an in-repo addon core that depends on ember-concurrency.
I've also added ember-cli-bundlesize to help analyse the bundle size of the built app.
Here are the results of ember bundlesize:test before and after adding the in-repo addon.
Before
$ git checkout 6c5dfc7
$ ember bundlesize:test
ok 1 - app:javascript: 165.89KB <= 500KB (gzip)
ok 2 - app:css: 40B <= 50KB (gzip)
After
$ git checkout 9c9c9a9
$ ember bundlesize:test
ok 1 - app:javascript: 165.89KB <= 500KB (gzip)
ok 2 - app:css: 40B <= 50KB (gzip)
Bundlesize check was successful. Good job!
As you can see, the bundlesize does not change.
The same goes for an in-repo engine:
With in-repo engine depending on ember-concurrency
$ git checkout 2662b63
$ ember bundlesize:test
ok 1 - app:javascript: 170.08KB <= 500KB (gzip)
ok 2 - app:css: 40B <= 50KB (gzip)
Bundlesize check was successful. Good job!
The small difference you see between 165.89KB and 170.08KB is made of:
the ember-engines modules:
;define("ember-engines/-private/engine-ext")
;define("ember-engines/-private/engine-instance-ext")
;define("ember-engines/-private/route-ext")
;define("ember-engines/-private/router-ext")
;define("ember-engines/components/link-to-component")
;define("ember-engines/components/link-to-external-component")
;define("ember-engines/engine")
;define("ember-engines/initializers/engines")
;define("ember-engines/routes")
the my-engine modules:
;define("my-engine/config/environment")
;define("my-engine/engine")
;define("my-engine/resolver")
;define("my-engine/routes")
;define("my-engine/templates/application")
And finally the ember-concurrency modules aliased to be available inside the my-engine resolver:
;define.alias("ember-concurrency/helpers/cancel-all", "my-engine/helpers/cancel-all");
;define.alias("ember-concurrency/helpers/perform", "my-engine/helpers/perform");
;define.alias("ember-concurrency/helpers/task", "my-engine/helpers/task");
;define.alias("ember-concurrency/initializers/ember-concurrency", "my-engine/initializers/ember-concurrency");
YMMV depending on what addon you use though, but you can use this demo app as a starting point to check whether some code is really duplicated or not.
Hope this helps

Update in answer to updated question 11/12/19
The short answer is you cannot make each of your dependencies only part of your app's package.json. What you have where you specify each dependency in each addon and app's package.json is correct.
Npm will only install one version of each package. It does some complicated 'magic' to resolve which dependency gets used. If you think about it, this is the only thing that could happen because JS and the browser can only have on version of each library available since things are made available globally on the window. Your app would have now way of telling the difference between version x.x.x of a library and x.x.y of the same library because that library is always exposed with the same name globally, e.g., Ember.
Original answer
We have had some success reducing packages installed by using lerna and a mono repo: https://github.com/lerna/lerna. Note however, we have not had any success using the lerna commands. Instead we simply run npm i in each addon/app. The order npm i is run is critical: you must start with the base of your tree first i.e., start with the addon that does not consume an of your other addons/apps and move your way up.
Our mono repo contains three ember applications and two addons:
addon-1
addon-2
- consumes addon-1
app-1
- consumes addon-1
app-2
- consumes addon-1 and addon-2
app-3
- consumes addon-1 and addon-2
In the structure above, npm i must be run in this order: addon-1, addon-2 and app-1, app-2 and app-3.
We have experimented with different ways of including the packages in package.json of each addon/app. It's come down to this, example for app-2:
"devDependencies": {
"addon-1": "file:../addon-1",
"addon-2": "file:../addon-2",
},
file: allows you to reference a module in your mono repo using a relative path.

Measure Babel compilation performance (per file or module)

I'm trying to figure out how to extract some information from babel compilation process.
More specifically, when I run babel (no matter if using Webpack's babel-loader, test frameworks' transformers, Babel's CLI, etc) I'd need to extract some information for each compiled file. Like:
file path
time taken to compile
any other meta data?
What I've tried so far
Speed Measure Plugin for Webpack (link)
Works fine but it provides only Webpack's loaders running time. No info about single compiled files.
Hook into Webpack's compiler/compilation instance
I considered writing a Webpack plugin to hook into the compilation process as described here, but I couldn't find the proper hooks to recognize a file being processed by babel.
Updates
I guess #kidroca pointed out the right direction. More specifically I understand that Babel’s wrapPluginVisitorMethod option is the key for hooking into Babel compilation process.
See babel-minify’s timing plugin.
Related threads:

https://github.com/babel/babel/issues/5340
https://github.com/babel/babel/issues/2206
https://github.com/babel/babel/pull/3659
https://github.com/babel/minify/pull/93
https://github.com/babel/babel/pull/3659
Updates 28/04/18
I eventually tried to wrap a solution into a tool I called babel-timing.

You can use #babel/core and babel.transformSync(code) which will return
Abstract Syntax Tree (AST) information along with some other data. And you can also add some logic to measure the performance of this method
I've setup a minimal repo and played with it myself a little bit: https://github.com/kidroca/babel-meta
Basically you can run npm run analyze-file ./es6-src/es6-module.js or npm run analyze-dir ./es6-src/es6-module.js and checkout the results
This will return:
{
"filename": "/full/path/to/src/file.js",
"cwd": "current/dir",
"ast": "ast information json - lines, comments, and other info",
"executionTime": "execution time in ms",
/* a lot of other info */
}
You can modify the analyze.js file to filter out the info you need
You can modify the .babelrc file to control the transformation and add/remove plugins

Building Chart.js master - generated .js gives errors

I am getting an error when I work with a version of Chart.js master that I compiled myself. I must be missing some kind of dependency that I've missed in the documentation. I have no clue what .js I need to include.
When I move my mouse-cursor over the chart I get a bunch of errors related to a missing Color library. Which one am I missing exactly?
TypeError: i.color(...).saturate is not a function
Edit:
I have created a JSFiddle here: http://jsfiddle.net/o9ebb5sq/
This piece of code does not show the problem (using Chart 2.0.0-Beta). This is why I copied this release into my software and tried again. The problem I am describing disappears.
I am running a master build (created using 'gulp build') Which makes me think the problem is either present in git master, or it is caused by my build environment.
I have installed the following npm packages before I ran gulp build
gulp 3.9.0
gulp-concat 2.6.0
gulp-connect 2.2.0
gulp-html-validator 0.0.5
gulp-jshint 1.12.0
gulp-karma 0.0.5
gulp-replace 0.5.4
gulp-size 2.0.0
gulp-uglify 1.4.2
gulp-util 3.0.7
semver 5.0.3
karma 0.13.14
inquirer 0.11.0
I expect that maybe I am missing something here or that one of the packages I've used to build Chart.js has an issue.

In the package.json on 2.0 they have included a new dependency "color": "git://github.com/chartjs/color" you will also need to include this. Odd thing is they alias this to a helper
color = helpers.color = function(color) {
if (!window.Color) {
console.log('Color.js not found!');
return color;
}
return window.Color(color);
},
So I would have expected for you to see the log unless you already have something in the global namespace named Color.