CODEWITHSUNDEEP
javascriptreactjsnpmvitereact-dom
Paul David
Paul David

Reputation: 43

vite npm run dev error Cannot read file "node_modules/react/jsx-dev-runtime.js": Access is denied.'

I created a vite app successfully. When I run the app with npm run dev, I get these three errors : [ERROR] Cannot read file "node_modules/react/jsx-dev-runtime.js": Access is denied. X [ERROR] Cannot read file "node_modules/react/index.js": Access is denied. X [ERROR] Cannot read file "node_modules/react-dom/client.js": Access is denied.

I have deleted my node_modules and package-lock files severally. I have created another Vite React app and still get this error. My various files.

package.json file

 {
  "name": "my-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@vitejs/plugin-react": "^4.0.3",
    "eslint": "^8.45.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "vite": "^4.4.5"
  }
}

Vite.config.jsf file

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

Main.jsx file

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

Does anyone have any idea how to resolve this issue? I have been on this for the past three days now surfing the net. I will be available to provide any other information needed.

node version: 18.12.2 react version: 18.2.0 npm version:9.3.1

Upvotes: 3

Views: 1517

Answers (1)

hui
hui

Reputation: 601

for vite:

export default defineConfig({
  resolve: {
    alias: {
      "react/jsx-dev-runtime.js": resolve(
        __dirname,
        "node_modules/react/jsx-dev-runtime.js"
      ),
      "react/jsx-runtime.js": resolve(
        __dirname,
        "node_modules/react/jsx-runtime.js"
      ),
    },
  },
});

work for me， But I don't know why I have to deal with it like this.

Upvotes: 0

Related Questions