Error in React vite project due to rollup dependency (module not found)

Question

I am facing an error in react vite project.

snippet from package.json

"react": "^18.2.0",
"vite": "^5.0.0",
"vite-plugin-svgr": "^4.2.0",

The error is :

D:\React\ACL\Acl28\node_modules\rollup\dist\native.js:64 throw new Error( ^

Error: Cannot find module @rollup/rollup-win32-x64-msvc. npm has a bug related to optional dependencies (https://github.com/npm/cli/issues/4828). Please try npm i again after removing both package-lock.json and node_modules directory. at requireWithFriendlyError (D:\React\ACL\Acl28\node_modules\rollup\dist\native.js:64:9) at Object. (D:\React\ACL\Acl28\node_modules\rollup\dist\native.js:73:48) 2 lines matching cause stack trace ... at Module.load (node:internal/modules/cjs/loader:1207:32) at Module._load (node:internal/modules/cjs/loader:1023:12) at cjsLoader (node:internal/modules/esm/translators:345:17) at ModuleWrap. (node:internal/modules/esm/translators:294:7) at ModuleJob.run (node:internal/modules/esm/module_job:218:25) at async ModuleLoader.import (node:internal/modules/esm/loader:329:24) { [cause]: Error: The specified module could not be found. \?\D:\React\ACL\Acl28\node_modules@rollup\rollup-win32-x64-msvc\rollup.win32-x64-msvc.node at Module._extensions..node (node:internal/modules/cjs/loader:1473:18) at Module.load (node:internal/modules/cjs/loader:1207:32) at Module._load (node:internal/modules/cjs/loader:1023:12) at Module.require (node:internal/modules/cjs/loader:1235:19) at require (node:internal/modules/helpers:176:18) at requireWithFriendlyError (D:\React\ACL\Acl28\node_modules\rollup\dist\native.js:62:10) at Object. (D:\React\ACL\Acl28\node_modules\rollup\dist\native.js:73:48) at Module._compile (node:internal/modules/cjs/loader:1376:14) at Module._extensions..js (node:internal/modules/cjs/loader:1435:10) at Module.load (node:internal/modules/cjs/loader:1207:32) { code: 'ERR_DLOPEN_FAILED' } }

Node.js v20.10.0

======== vite.config.js

import { defineConfig } from "vite";
import reactRefresh from '@vitejs/plugin-react';
import svgrPlugin from 'vite-plugin-svgr';

export default defineConfig({

 build: {
     outDir: 'build',
 },
 plugins: [
     reactRefresh(),
     svgrPlugin({
         svgrOptions: {
             icon: true,
         },
     }),
 ],

})

Please help in resolving the problem

The project is working fine in another system which has windows 11 as I my system has. Even if I copied whole working project including node-modules folder from another system into my system , the problem persists. The node version is 20 in my system. Another system has node version 16.16

I am expecting to run my react-vite project properly.

Answer 1

Because you lack of @rollup/rollup-linux-x64-gnu dependency

In package.json you add this dependency as a optinal. And then you run it at windown so ok, run it at linux still ok

"optionalDependencies": {
    "@rollup/rollup-linux-x64-gnu": "4.6.1"
  }

Answer 2

Add to your dependencies in your package.json: "@rollup/rollup-linux-x64-gnu": "^4.9.2"

That's all you need