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

Question

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)

tony19 · Accepted Answer · 2022-04-12 22:52:57Z

6

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.

answered Apr 12, 2022 at 22:52

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mehdi · Accepted Answer · 2022-09-06 09:55:39Z

3

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.

answered Sep 6, 2022 at 9:55

Mehdi

9741 gold badge9 silver badges13 bronze badges

Comments

fylzero · Accepted Answer · 2022-04-12 05:54:08Z

1

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

answered Apr 12, 2022 at 5:54

fylzero

4617 silver badges18 bronze badges

Comments

Fogh · Accepted Answer · 2023-02-21 19:20:20Z

0

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 https://www.npmjs.com/package/esbuild?activeTab=explore

edited Feb 21, 2023 at 19:20

Fogh

1,3251 gold badge21 silver badges31 bronze badges

answered Feb 15, 2023 at 13:21

Elvin Kyungu

112 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related