使用npm create vite@latest时ES模块兼容错误的解决咨询

执行npm create vite@latest并确认安装create-vite@5.5.1后，出现ES模块兼容错误，提示"无法在模块外使用import语句"。

错误日志 #

(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"
  }
}

复现步骤 #

• 执行命令：npm create vite@latest
• 按提示确认安装create-vite@5.5.1

环境信息 #

• Node.js版本：v22.6.0
• npm版本：10.8.2
• 操作系统：macOS Sonoma

已尝试的无效操作 #

• 卸载重装Node.js工具
• 更新Homebrew
• 修改依赖版本
• 切换CommonJS模式
• 清理npm缓存

解决方案 #

方法1：强制以ES模块模式运行create-vite #

使用npx的--node-options参数指定模块加载模式，执行以下命令：

npx --node-options="--experimental-modules" create-vite@latest

如果上述命令仍有问题，可尝试：

node --experimental-modules $(npx --package create-vite@latest --which create-vite)

方法2：使用其他包管理器替代npm #

yarn或pnpm对ES模块的兼容性更好，可尝试：

# 使用yarn
yarn create vite@latest

# 使用pnpm
pnpm create vite@latest

方法3：手动指定create-vite的入口文件 #

直接调用create-vite的ES模块入口，绕过CJS加载问题：

node --input-type=module -e "import('create-vite').then(m => m.default())"

方法4：降级create-vite版本 #

如果上述方法都无效，可暂时降级到兼容CJS的版本（如4.x系列），后续再升级：

npm create vite@4.5.0

内容的提问来源于stack exchange，提问作者Zaid Omar