I’m trying to set up a new Vite project using the command:
npm create vite@latest
After confirming to proceed with the installation of [email protected], I get the following error:
(node:58326) Warning: require() of ES modules is not supported.
require() of /Users/username/.npm/_npx/1415fee72ff6294b/node_modules/create-vite/index.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/username/.npm/_npx/1415fee72ff6294b/node_modules/create-vite/package.json.
/Users/username/.npm/_npx/1415fee72ff6294b/node_modules/create-vite/index.js:3
import './dist/index.mjs'
^^^^^^
SyntaxError: Cannot use import statement outside a module
at wrapSafe (internal/modules/cjs/loader.js:983:16)
at Module._compile (internal/modules/cjs/loader.js:1033:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1103:10)
at Module.load (internal/modules/cjs/loader.js:914:32)
at Function.Module._load (internal/modules/cjs/loader.js:822:14)
at Function.Module.runMain (internal/modules/cjs/loader.js:1143:12)
at internal/main/run_main_module.js:16:11
npm error code 1
npm error path /Users/username
npm error command failed
npm error command sh -c create-vite
npm error A complete log of this run can be found in: /Users/username/.npm/_logs/2024-08-14T02_51_37_222Z-debug-0.log
Package.json:
{
"name": "project-name",
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"framer-motion": "^10.16.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.10.1",
"react-scroll": "^1.8.9"
},
"devDependencies": {
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"autoprefixer": "^10.4.15",
"eslint": "^8.45.0",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"postcss": "^8.4.28",
"tailwindcss": "^3.3.3",
"vite": "^5.4.0"
}
}
Steps to Reproduce:
Run npm create vite@latest
.
Confirm installation when prompted.
Environment:
Node.js version: v22.6.0
npm version: 10.8.2
Operating System: macOS Sonoma
What I’ve Tried:
- Uninstalled and reinstalled all Node.js-related tools to ensure they were up-to-date.
- Ran brew update to ensure Homebrew and its packages were current.
- Manually updated the versions in package.json to their latest.
- Attempted to revert to CommonJS by removing the “type”: “module” field.
- Deleted node_modules and package-lock.json, then ran npm install.
- Ran
npm cache clean --force
- I renamed the file as suggested, but it didn’t resolve the issue.
- I tried to modify the code to use dynamic import() statements instead of require(), but i kept getting the error.
- I removed the “type”: “module” from the package.json in the relevant directories, but this led to other compatibility issues or just flat out did not fix the problem
Question:
How can I resolve this error and successfully create a new Vite project using the latest version? Is there a configuration or workaround needed to avoid these ES module issues? I’ve attached my package.json of a current vite project that I have downloaded as well to show that doesn’t work either.
Any help would be greatly appreciated!