We Keep Coding

Why vite.js doesn't work when I use npm run dev

I create a react app with Vite, I go to the directory with cd xxxxx, I run npm install, then I follow npm run dev
Please help me, I dont want to use Create-react-app is to slow.
I have been searchin in blogs and nothing works, i have updated node.js, deprecated vite, deleted vite cache, uninstalled node, uninstalled VScode
X [ERROR] [plugin vite:dep-pre-bundle] Detected inconsistent metadata for the path "node_modules/react/index.js" when it was imported here:
node_modules/react/cjs/react-jsx-dev-runtime.development.js:16:20:
16 │ var React = require('react');
╵ ~~~~~~~
The original metadata for that path comes from when it was imported here:
dep:react:1:23:
1 │ export default require("./node_modules/react/index.js");
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
The difference in metadata is displayed below:
{
- "pluginName": null,
+ "pluginName": "vite:dep-pre-bundle",
}
This is a bug in the "vite:dep-pre-bundle" plugin. Plugins provide metadata for a given path in an
"onResolve" callback. All metadata provided for the same path must be consistent to ensure
deterministic builds. Due to parallelism, one set of provided metadata will be randomly chosen for
a given path, so providing inconsistent metadata for the same path can cause non-determinism.
X [ERROR] [plugin vite:dep-pre-bundle] Detected inconsistent metadata for the path "node_modules/react/index.js" when it was imported here:
node_modules/react-dom/cjs/react-dom.development.js:16:20:
16 │ var React = require('react');
╵ ~~~~~~~
The original metadata for that path comes from when it was imported here:
dep:react:1:23:
1 │ export default require("./node_modules/react/index.js");
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
The difference in metadata is displayed below:
{
- "pluginName": null,
+ "pluginName": "vite:dep-pre-bundle",
}
This is a bug in the "vite:dep-pre-bundle" plugin. Plugins provide metadata for a given path in an
"onResolve" callback. All metadata provided for the same path must be consistent to ensure
deterministic builds. Due to parallelism, one set of provided metadata will be randomly chosen for
a given path, so providing inconsistent metadata for the same path can cause non-determinism.
12:08:07 a. m. [vite] error while updating dependencies:
Error: Build failed with 2 errors:
node_modules/react-dom/cjs/react-dom.development.js:16:20: ERROR: [plugin: vite:dep-pre-bundle] Detected inconsistent metadata for the path "node_modules/react/index.js" when it was imported here:
node_modules/react/cjs/react-jsx-dev-runtime.development.js:16:20: ERROR: [plugin: vite:dep-pre-bundle] Detected inconsistent metadata for the path "node_modules/react/index.js" when it was imported here:
at failureErrorWithLog (C:\Users\feedm\Desktop\front\node_modules\esbuild\lib\main.js:1603:15)
at C:\Users\feedm\Desktop\front\node_modules\esbuild\lib\main.js:1249:28
at runOnEndCallbacks (C:\Users\feedm\Desktop\front\node_modules\esbuild\lib\main.js:1034:63)
at buildResponseToResult (C:\Users\feedm\Desktop\front\node_modules\esbuild\lib\main.js:1247:7)
at C:\Users\feedm\Desktop\front\node_modules\esbuild\lib\main.js:1356:14
at C:\Users\feedm\Desktop\front\node_modules\esbuild\lib\main.js:666:9
at handleIncomingPacket (C:\Users\feedm\Desktop\front\node_modules\esbuild\lib\main.js:763:9)
at Socket.readFromStdout (C:\Users\feedm\Desktop\front\node_modules\esbuild\lib\main.js:632:7)
at Socket.emit (node:events:526:28)
at addChunk (node:internal/streams/readable:315:12)

This was caused by esbuild#2177 (on which Vite depends), which was just recently reverted in esbuild version 0.14.36.
This issue should no longer occur with Vite, but you'll have to delete any lockfiles (i.e., package-lock.json, yarn.lock, etc.) and node_modules/, and re-install dependencies, as reported here.

I had this problem when I installed new package vie-owl-carousel.
yarn add vue-owl-carousel
When I removed it by yarn
yarn remove vue-owl-carousel
This error showed to me.
12:08:07 a. m. [vite] error while updating dependencies:
Error: Build failed with 2 errors:...
I installed it again and app ran successfully. Then I removed it by npm uninstall and the problem solved.

There is a Github issue open for this. For now I was able to resolve by locking the package.json version of Vite to "vite": "~2.7.1"
https://github.com/vitejs/vite/issues/7683

I had a similar error, and I was using vuejs3 and vite 4.x, to solve this problem I had to run npm outdated to see if there were any updates, and after I I had to reinstall only the esbuild by doing npm i esbuild enter link description here

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.

Flow: Throws error Cannot resolve module "react-redux" even tho it's installed

Even tho module is installed and it exists, Flow cannot resolve it and throws error.
See below:
1) Inside bash I ran flow and it throws error that module is not found
user#pc:~/code/project$ flow
Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/functionalities/Growth/index.js:3:25
Cannot resolve module react-redux.
1│ // #flow
2│ import React from "react"
3│ import { connect } from "react-redux"
4│
5│ type Props = {
6│ children: Function
Found 1 error
2) Below command checks whether directory exists and it does
user#pc:~/code/project$ ls node_modules | grep react-redux
react-redux
I tried to remove and reinstall both node_modules directory and yarn.lock file.
Versions should be matching:
flow version
Flow, a static type checker for JavaScript, version 0.77.0
.flowconfig:
[version]
0.77.0
This is very likely bug with Flow, I also submitted issue.

How to fix it
You have two options:
stub the dependency by hand
bring in flow-typed to find the dependency type
file/stub it for you
I use option 2 but it is nice to know what is happening underneath
Option 1
In .flowconfig, add a directory under [libs],
...
[libs]
/type-def-libs
...
Now, create that directory at your project root and a file /type-def-libs/react-redux which contains,
declare module 'react-redux' {
declare module.exports: any;
}
Option 2
install flow-typed, if using yarn yarn add -D flow-typed
I prefer to install every locally to the project when possible
run yarn flow-typed install
this will install any type definition files for modules that it finds AND it will stub any modules it doesn't find, which is similar to what we did in option 1
Why is this error happening
Flow is looking for the type definition for the module you are importing. So while the module does exist in /node_modules that module doesn't have a type definition file checked into its code.

I had the same issue as you.
I resolved it by using flow-typed
I did the following:
Install flow-typed globally. example: $ npm install -g flow-typed
Then inside your project root folder, run $ flow-typed install react-redux#5.0.x
• Searching for 1 libdefs...
• flow-typed cache not found, fetching from GitHub...
• Installing 1 libDefs...
• react-redux_v5.x.x.js
└> ./flow-typed/npm/react-redux_v5.x.x.js
react-redux
You should see this if the install was successful.
Then try running flow again $ npm run flow in your project. The error with react-redux will no longer be there.

Alternative solution (for some cases)
Check your .flowconfig and remove <PROJECT_ROOT>/node_modules/.* under the field [ignore] (in case you have it there).
UPDATE 1 (by arka):
Or you can add !<PROJECT_ROOT>/node_modules/react-redux/.* after <PROJECT_ROOT>/node_modules/.*. This will ignore all the modules except for react-redux.
Thanks to #meloseven who solved it here.

I checked my package.json file and noticed react-redux was missing. I manually added it to the dependencies "react-redux": "x.x.x" and ran npm install thereafter. Note that the version number should be compatible with the other modules.

Please ensure that you provide the path under 'ignore' in .flowconfig, like this:
[ignore]
.*/node_modules/react-native/Libraries/.*
and not like this:
.*/node_modules/react-native/Libraries/Components
.*/node_modules/react-native/Libraries/Core
....

How to run a command line tool from node.js application

The title of my question is how to run a command line tool from a node.js application because I think an answer here will apply to all command line utilities installable from npm. I have seen questions related to running command line from node.js, but they don't seem to be working for my situation. Specifically I am trying to run a node command line utility similar to npm (in how it is used, but not its function) called tilemantle.
tilemantle's documentation shows installing tilemantle globally and running the program from the command line.
What I would like to do is install tilemantle locally as a part of a npm project using npm install tilemantle --save and then run tilemantle from inside my project.
I've tried `tilemantle = require('tilemantle'), but the index.js file in the tilemantle project is empty, so I think this won't help with anything.
I tried the project node-cmd
const cmd = require('node-cmd');
cmd.run('./node_modules/tilemantle/bin/tilemantle', 'http://localhost:5000/layer/{z}/{x}/{y}/tile.png', '-z 0-11', '--delay=100ms', '--point=37.819895,-122.478674', '--buffer=100mi'
This doesn't throw any errors, but it also just doesn't work.
I also tried child processes
const child_process = require('child_process');
child_process.exec('./node_modules/tilemantle/bin/tilemantle', 'http://localhost:5000/layer/{z}/{x}/{y}/tile.png, -z 0-11 --delay=100ms --point=37.819895,-122.478674 --buffer=100mi'
This also doesn't throw any errors, but it also doesn't work.
Is there a way to get this working, so that I can run tilemantle from inside my program and not need to install it globally?
Update
I can get tilemantle to run from my terminal with
node './node_modules/tilemantle/bin/tilemantle', 'http://localhost:5000/layer/{z}/{x}/{y}/tile.png', '--delay=100ms', '--point=37.819895,-122.478674', '--buffer=100mi', '-z 0-11'
If I run the following as suggested by jkwok
child_process.spawn('tilemantle', ['http://myhost.com/{z}/{x}/{y}.png',
'--point=44.523333,-109.057222', '--buffer=12mi', '-z', '10-14'],
{ stdio: 'inherit' });
I am getting spawn tilemantle ENOENT and if I replace tilemantle with ./node_modules/tilemantle/bin/tilemantle.js I get spawn UNKNOWN
Based on jfriend00's answer it sounds like I need to actually be spawning node, so I tried the following
child_process.spawn('node', ['./node_modules/tilemantle/bin/tilemantle.js', 'http://myhost.com/{z}/{x}/{y}.png', '--point=44.523333,-109.057222', '--buffer=12mi', '-z', '10-14'], { stdio: 'inherit' });
Which gives me the error spawn node ENOENT which seems strange since I can run it from my terminal and I checked my path variable and C:\Program Files\nodejs is on my path.
Just to check I tried running the following with a full path to node.
child_process.spawn('c:/program files/nodejs/node.exe', ['./node_modules/tilemantle/bin/tilemantle.js', 'http://myhost.com/{z}/{x}/{y}.png', '--point=44.523333,-109.057222', '--buffer=12mi', '-z', '10-14'], { stdio: 'inherit' });
which runs without the ENOENT error, but again it is failing silently and is just not warming up my tile server.
I am running Windows 10 x64 with Node 6.11.0

You can install any executable locally and then run it with child_process. To do so, you just have to figure out what the exact path is to the executable and pass that path to the child_process.exec() or child_process.spawn() call.
What it looks like you ultimately want to run is a command line that does:
node <somepath>/tilemantle.js
When you install on windows, it will do most of that for you if you run:
node_modules\.bin\tilemantle.cmd
If you want to run the js file directly (e.g. on other platforms), then you need to run:
node node_modules/tilemantle/bin/tilemantle.js
Note, with child_process, you have to specify the actual executable which in this case is "node" itself and then the path to the js file that you wish to run.
This, of course, all assumes that node is in your path so the system can find it. If it is not in your path, then you will have to use the full path to the node executable also.

It looks like you are trying to capture the output of tilemantle from running a file rather than from the command line. If so, I did the following and got it to work.
Installed tilemantle and child_process locally into a new npm project as you did, and added the following into a file in that project.
// test.js file
var spawn = require('child_process').spawn;
spawn('tilemantle', ['http://myhost.com/{z}/{x}/{y}.png', '--
point=44.523333,-109.057222', '--buffer=12mi', '-z', '10-14'], { stdio: 'inherit' });
Run it using node test.js inside the project.
I tried a bunch of the other options in this post but could only get the above one to print the progress along with other output. Hope this helps!

Many command line utilities come with a "programmatic" API. Unfortunately, tilemantle does not, which is why you are unable to require that module in your code.
You can, however, easily access a locally installed version of the CLI from npm scripts. I don't know anything about tilemantle, so I'll provide an example using the tldr command line tool. In your package.json:
{
"name": "my-lib",
"version": "1.0.0",
"scripts": {
"test": "tldr curl"
},
"dependencies": {
"tldr": "^2.0.1"
}
}
You can now run npm test from the terminal in your project as an alias for tldr curl.
Per this post, you can use the global-npm package to run npm scripts from your code:
const npm = require('global-npm')
npm.load({}, (err) => {
if (err) throw err
npm.commands.run(['test'])
})
And voila, you can now run the locally installed CLI programmatically(ish), even though it has not offered an API for that.

Ember - Path or pattern "vendor/ic-ajax/dist/named-amd/main.js" did not match any files

I have an ember app with ember-cli running perfectly on my MacBook Pro. Now I've installed ember on another MacBook Pro, downloaded the same git repo and ran ember s, which gives me this error trace:
compiler.js:17942:7)
Walker.visit (/Users/Jensherf/shopstar-u/bower_components/ember/ember-template-compiler.js:17910:12)
visitors.Program (/Users/Jensherf/shopstar-u/bower_components/ember/ember-template-compiler.js:17919:16)
Path or pattern "vendor/ic-ajax/dist/named-amd/main.js" did not match any files
Error: Path or pattern "vendor/ic-ajax/dist/named-amd/main.js" did not match any files
at Object.multiGlob (/Users/Jensherf/shopstar-u/node_modules/broccoli-kitchen-sink-helpers/index.js:203:13)
at Class.module.exports.CachingWriter.extend.addFiles (/Users/Jensherf/shopstar-u/node_modules/broccoli-sourcemap-concat/concat-with-maps.js:74:13)
at Class.module.exports.CachingWriter.extend.updateCache (/Users/Jensherf/shopstar-u/node_modules/broccoli-sourcemap-concat/concat-with-maps.js:52:12)
at /Users/Jensherf/shopstar-u/node_modules/broccoli-sourcemap-concat/node_modules/broccoli-caching-writer/index.js:92:34
at lib$rsvp$$internal$$tryCatch (/Users/Jensherf/shopstar-u/node_modules/rsvp/dist/rsvp.js:489:16)
at lib$rsvp$$internal$$invokeCallback (/Users/Jensherf/shopstar-u/node_modules/rsvp/dist/rsvp.js:501:17)
at lib$rsvp$$internal$$publish (/Users/Jensherf/shopstar-u/node_modules/rsvp/dist/rsvp.js:472:11)
at Object.lib$rsvp$asap$$flush [as _onImmediate] (/Users/Jensherf/shopstar-u/node_modules/rsvp/dist/rsvp.js:1290:9)
at processImmediate [as _immediateCallback] (timers.js:345:15)
In this output, the sentence "Path or pattern "vendor/ic-ajax/dist/named-amd/main.js" did not match any files" is in red.
I cannot figure out how to fix this. Why would the app be looking in the vendor/ folder for this library? Shouldn't it be in bower components or node modules? Does anyone have an idea what should be in this file?
Here is my .gitignore file just for completeness:
# See http://help.github.com/ignore-files/ for more about ignoring files.
# compiled output
/dist
/tmp
# dependencies
/node_modules
/bower_components
# misc
/.sass-cache
/connect.lock
/coverage/*
/libpeerconnection.log
npm-debug.log
testem.log

Found an issue on ember-cli-ic-ajax repo that might be the answer.
0.2.0 is only valid with a future version of ember-cli, you should use 0.1.4
https://github.com/rwjblue/ember-cli-ic-ajax/issues/11

Do you have an entry for "ember-cli-ic-ajax" in package.json? If not it's because you forgot to --save when you installed it on the other machine. You can just do npm install --save ember-cli-ic-ajax on the first laptop (or just edit the file manually) then commit your changes and all should be good.

I had the same error. What solved it for me was bower install ic-ajax --save. Hopefully this is helpful to anyone else.