We Keep Coding

Kotlin/JS, Gradle Plugin : Unable to load '#webpack-cli/serve' command

I was doing the tutorial for React Kotlin and couldnt even finish the setup step because the server does not start.
The code is unchanged : https://github.com/kotlin-hands-on/web-app-react-kotlin-js-gradle
Stacktrace:
[webpack-cli] Unable to load '#webpack-cli/serve' command
[webpack-cli] TypeError: options.forEach is not a function
[webpack-cli] TypeError: options.forEach is not a function
I saw this issue : https://github.com/webpack/webpack-cli/issues/2990 but I'm unable to implement the fix proposed (change the webpack-cli version and remove the webpack-cli/serve from yarn.lock) because I can't find how to change these on the kotlin js gradle plugin.
Even simple browser application from intelliJ is broken with the same error.

Had the same issue: adding this option to the project gradle.properties
kotlin.js.webpack.major.version=4
fixed it - reference: https://kotlinlang.org/docs/js-project-setup.html#webpack-version

Try to update webpack-cli:
rootProject.plugins.withType(org.jetbrains.kotlin.gradle.targets.js.nodejs.NodeJsRootPlugin::class.java) {
rootProject.the<org.jetbrains.kotlin.gradle.targets.js.nodejs.NodeJsRootExtension>().versions.webpackCli.version = "4.9.0"
}

Evgeny's answer didn't work here.
Now after 2 days of banging head, and reading kotlin plugin source-code, only the following worked here:
// build.gradle.kts file
kotlinYarn {
resolution("webpack", "5.73.0")
resolution("webpack-cli", "4.10.0")
}
It will print a warning when running the task kotlinNpmInstall but the app will run.

NullInjectorError: No provider for Overlay! NgxToastr

I have been scratching my head for last one day on this. I am using Ngx-Toastr package in my angular application. Below are the points which I think help you understand the problem.
In dev server (ng serve) I didn't get any error there was no Nullinjector problem, then I make a production build using the following command (ng build). Until this point everything works fine. Now I need to optimize the bundle size so I ran this (ng build --prod). Build was successful no error Now it's time to serve the code (I am using Node server to serve this). Here the problem starts -
First it's asking for
'NullInjectorError: No provider for ToastrService'
which is coming from the Ngx-Toastr Package it self and It makes sense so I add that service to the appmodules and also in other Lazy loaded modules in the providers array. So after this the error has gone . But next is what I want to talk about -
Next it is asking for 'NullInjectorError: No provider for Overlay!' So I though there must be this service from the package which needs to be added in the providers array. So I tried to import it from the package it self and to add it in the providers array like below:
import { Overlay } from 'ngx-toastr/overlay/overlay';;
doing so got the below error
Module not found: Error: Can't resolve 'ngx-toastr/overlay/overlay'
Next I tried searching for this problem and found some stackoverflow solutions which suggest to add the following line:
import {OverlayModule} from '#angular/cdk/overlay';
I added this module in the imports array of every modules. Nothing got changed.
Now I have no clue what to import and where to import. And I am also not sure whether I am going right or not or where should I start looking into it. I also doubt that this error is coming from that package or what!! cause It should work without implicitly importing those services.
I run the following command to get the error ahead of production build:
ng serve --prod --optimization=false
Please also mention how to debug the following error, sometime after production build we get error like this which is undoubtly makes no sense:
ERROR Error: "StaticInjectorError[t -> t]:
StaticInjectorError(Platform: core)[t -> t]:
NullInjectorError: No provider for t!"
I hope my explanation makes some sense to you. Thanks for your time and sorry for this long question.
Lastly FYI : I have already removed node-modules and re-installed it.

Make sure you're using a version of ngx-toastr compatible with your version of angular and typescript. https://github.com/scttcper/ngx-toastr#dependencies
ngx-toastr v13 requires angular >= 10

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.

I got error when link external library with javascript

I installed the color-convert library via npm but the browser shows me an error message
Uncaught ReferenceError: require is not defined home.js:134
at HTMLButtonElement.<anonymous> (home.js:134)
at HTMLButtonElement.dispatch (jquery-3.4.0.js:5233)
at HTMLButtonElement.elemData.handle (jquery-3.4.0.js:5040)
JS
var convert = require('color-convert'); // this is line 134
alert(convert.hex.lab('DEADBF'));
I think there is a problem with paths?

require() isn't a function provided by your browser, and is more of a sign that this source code is a common JS module.
In order to use a common JS module, you first need to run your source through a program that bundles the source, sorta replacing each require('other_module') with the source of the other module, producing a single Javascript source file which can included in your frontend HTML.
Two examples of bundlers are browserify and webpack.

Meteor, updated app and now `TypeError: check is not a function`

I am working on updating an old meteor project. It was on a very old version, older than 1.0.0. This app is experiencing this problem at Meteor 1.4.2.3. Another app is working just fine at the same version.
I've made many changes to get it to build without any errors, and it began to crash at startup with this message:
TypeError: check is not a function
at convertRegexpToMongoSelector (packages/mongo/collection.js:412:3)
at packages/mongo/collection.js:389:18
at Function._.each._.forEach (packages/underscore.js:155:22)
at Function.Mongo.Collection._rewriteSelector (packages/mongo/collection.js:386:5)
at new CursorDescription (packages/mongo/mongo_driver.js:877:36)
at OplogHandle._startTailing (packages/mongo/oplog_tailing.js:236:29)
at new OplogHandle (packages/mongo/oplog_tailing.js:76:8)
at new MongoConnection (packages/mongo/mongo_driver.js:222:25)
at new MongoInternals.RemoteCollectionDriver (packages/mongo/remote_collection_driver.js:4:16)
at Object.<anonymous> (packages/mongo/remote_collection_driver.js:38:10)
I of course tried simply adding the check package: meteor add check.
I even tried removing it and adding it again just to be sure. My .meteor/versions file contains this line: check#1.2.4
Before all of this, the app told me that my instance of mongodb was using the old mmapv1 engine and to update to the Wired Tiger one. It recommended doing this simply with a meteor reset, which I did and the message went away. I thought it might be relevant since the problem is clearly coming from inside mongo.
A New App Entirely
I decided to simply create a new app with a fresh package.json and everything, and re-add all of the packages it needed. I then copied over the relevant code from my app. I did this, and it began giving this different error:
TypeError: Cannot read property 'resolve' of undefined
at meteorInstall.node_modules.meteor.shell-server.shell-server.js (packages/shell-server/shell-server.js:403:26)
at fileEvaluate (packages/modules-runtime.js:189:9)
at Module.require (packages/modules-runtime.js:114:16)
at Module.Mp.import (/home/blaine/.meteor/packages/modules/.0.7.7.xi5f9m++os+web.browser+web.cordova/npm/node_modules/reify/lib/runtime.js:70:16)
at meteorInstall.node_modules.meteor.shell-server.main.js (packages/shell-server/main.js:1:1)
at fileEvaluate (packages/modules-runtime.js:189:9)
at require (packages/modules-runtime.js:114:16)
at /home/blaine/Business/PianoStudio/app/.meteor/local/build/programs/server/packages/shell-server.js:563:15
at /home/blaine/Business/PianoStudio/app/.meteor/local/build/programs/server/packages/shell-server.js:569:3
at /home/blaine/Business/PianoStudio/app/.meteor/local/build/programs/server/boot.js:295:34
This is once again coming from meteor released packages.
I removed the shell-server package and that message went away, but the TypeError: check is not a function returned.
I tried to remove and add the mongo package. No effect.
I tried to rebuild the app by deleting the .meteor directory and re-creating it with meteor create . No effect.
I went through and commented out every single file containing server-side code (everything not in the client directory), since it's crashing on the server and clearly not a client-side issue. No effect.
Finally I tried to downgrade my project slightly, to 1.4.1.1. No effect.
Here's my new package.json in case that's relevant:
{
"name": "app",
"private": true,
"scripts": {
"start": "meteor run"
},
"dependencies": {
"babel-runtime": "^6.18.0"
}
}
What could be hiding in my app to cause something like this? The error message is completely unhelpful,

Make sure you have check package inside your .meteor/packages file.