使用refine+React项目时npm run dev命令执行失败求助

我通过refine.new创建了React新项目，已完成所有依赖的npm安装，但执行npm run dev时出现错误。

报错信息 #

refine-project@0.1.0 dev
refine dev

'Crud' 不是内部或外部命令，也不是可运行的程序或批处理文件。
internal/modules/cjs/loader.js:905
throw err;
^

Error: Cannot find module 'C:\Users\Administrator\Desktop@refinedev\cli\dist\cli.js'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
at Function.Module._load (internal/modules/cjs/loader.js:746:27)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)
at internal/main/run_main_module.js:17:47 {
code: 'MODULE_NOT_FOUND',
requireStack: []
}

项目文件结构 #

package.json内容 #

{
  "name": "refine-project",
  "version": "0.1.0",
  "private": true,
  "type": "module",
  "dependencies": {
    "@emotion/react": "^11.8.2",
    "@emotion/styled": "^11.8.1",
    "@mui/icons-material": "^5.8.3",
    "@mui/lab": "^5.0.0-alpha.85",
    "@mui/material": "^5.8.6",
    "@mui/x-data-grid": "^6.6.0",
    "@refinedev/cli": "^2.7.4",
    "@refinedev/core": "^4.28.2",
    "@refinedev/inferencer": "^4.3.2",
    "@refinedev/kbar": "^1.1.2",
    "@refinedev/mui": "^5.0.0",
    "@refinedev/react-hook-form": "^4.1.2",
    "@refinedev/react-router-v6": "^4.1.0",
    "@refinedev/simple-rest": "^4.0.0",
    "apexcharts": "^3.41.0",
    "axios": "^0.26.1",
    "core-util-is": "^1.0.3",
    "i18next": "^20.1.0",
    "i18next-browser-languagedetector": "^6.1.1",
    "i18next-xhr-backend": "^3.2.2",
    "react": "^18.0.0",
    "react-apexcharts": "^1.4.1",
    "react-dom": "^18.0.0",
    "react-hook-form": "^7.30.0",
    "react-i18next": "^11.8.11",
    "react-router-dom": "^6.8.1",
    "webpack-dev-server": "^4.15.1"
  },
  "devDependencies": {
    "@types/node": "^18.16.2",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "@typescript-eslint/eslint-plugin": "^5.57.1",
    "@typescript-eslint/parser": "^5.57.1",
    "@vitejs/plugin-react": "^4.0.0",
    "eslint": "^8.38.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "typescript": "^4.7.4",
    "vite": "^4.3.1"
  },
  "scripts": {
    "dev": "refine dev",
    "build": "tsc && refine build",
    "preview": "refine start",
    "refine": "refine",
    "start": "node server.js"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "refine": {
    "projectId": "SUjkIB-RDWgKs-moVUlK"
  }
}

已尝试的无效操作 #

npm install -g npm@latest
npm i core-util-is
npm i -f    
npm cache clean --force
npm config set ignore-scripts false

解决办法 #

1. 迁移项目到简单路径
   报错显示cli模块路径解析到C:\Users\Administrator\Desktop@refinedev\cli，明显是项目路径中的@字符导致解析异常。把整个项目文件夹移到无特殊字符的路径下，比如C:\Projects\refine-project，之后重新安装依赖并执行npm run dev。

2. 重新安装@refinedev/cli
   卸载现有cli依赖，重新安装确保文件完整：

npm uninstall @refinedev/cli
npm install @refinedev/cli --save

3. 修改scripts直接指向本地cli
   避免全局命令解析问题，直接在package.json的scripts中指定本地cli的路径：

"scripts": {
  "dev": "node ./node_modules/@refinedev/cli/dist/cli.js dev",
  "build": "tsc && node ./node_modules/@refinedev/cli/dist/cli.js build",
  "preview": "node ./node_modules/@refinedev/cli/dist/cli.js start",
  "refine": "node ./node_modules/@refinedev/cli/dist/cli.js",
  "start": "node server.js"
}

保存后执行npm run dev即可。

4. 检查npm环境变量
   确认npm的本地bin目录（通常是C:\Users\你的用户名\AppData\Roaming\npm）已添加到系统环境变量的PATH中，确保npm能正确识别本地安装的cli命令。

内容的提问来源于stack exchange，提问作者Mahan Tehrani