在 windows10 和 ubuntu 中反应的 NPM 启动错误

Posted

技术标签:

【中文标题】在 windows10 和 ubuntu 中反应的 NPM 启动错误【英文标题】：NPM start error for react in windows10 & ubuntu 【发布时间】：2022-01-23 19:22:02 【问题描述】：

将 nodeJS 更新到 16.13.1 版本并启动项目后

npx create-react-app...
cd.......
npm start

我收到以下错误

html Webpack Plugin:
      Error: Child compilation failed:
      Module build failed (from ../../frontendChallange#21 interactive comments/comments/node_modules/html-webpack-plugin/lib/loader.js):
      Error: Cannot find module 'C:\Users\user\Desktop\Coding\frontend Challange\frontendChallange#21 interactive comments\comments\node_modules\html-webpack-plugin\lib\loader.js'
      Require stack:
      - C:\Users\user\Desktop\Coding\frontend Challange\frontendChallange#21 interactive comments\comments\node_modules\loader-runner\lib\loadLoader.js
      - C:\Users\user\Desktop\Coding\frontend Challange\frontendChallange#21 interactive comments\comments\node_modules\loader-runner\lib\LoaderRunner.js
      - C:\Users\user\Desktop\Coding\frontend Challange\frontendChallange#21 interactive comments\comments\node_modules\webpack\lib\NormalModule.js
      - C:\Users\user\Desktop\Coding\frontend Challange\frontendChallange#21 interactive comments\comments\node_modules\webpack-manifest-plugin\dist\index.js
      - C:\Users\user\Desktop\Coding\frontend Challange\frontendChallange#21 interactive comments\comments\node_modules\react-scripts\config\webpack.config.js
      - C:\Users\user\Desktop\Coding\frontend Challange\frontendChallange#21 interactive comments\comments\node_modules\react-scripts\scripts\start.js
          at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1020:15)
          at Function.Module._load (internal/modules/cjs/loader.js:890:27)
          at Module.require (internal/modules/cjs/loader.js:1080:19)
          at require (internal/modules/cjs/helpers.js:72:18)
          at loadLoader (C:\Users\user\Desktop\Coding\frontend Challange\frontendChallange#21 interactive comments\comments\node_modules\loader-runner\lib\loadLoader.js:19:17)
          at iteratePitchingLoaders (C:\Users\user\Desktop\Coding\frontend Challange\frontendChallange#21 interactive comments\comments\node_modules\loader-runner\lib\LoaderRunner.js:182:2)
          at runLoaders (C:\Users\user\Desktop\Coding\frontend Challange\frontendChallange#21 interactive comments\comments\node_modules\loader-runner\lib\LoaderRunner.js:397:2)
          at NormalModule._doBuild (C:\Users\user\Desktop\Coding\frontend Challange\frontendChallange#21 interactive comments\comments\node_modules\webpack\lib\NormalModule.js:812:3)
          at NormalModule.build (C:\Users\user\Desktop\Coding\frontend Challange\frontendChallange#21 interactive comments\comments\node_modules\webpack\lib\NormalModule.js:956:15)
          at C:\Users\user\Desktop\Coding\frontend Challange\frontendChallange#21 interactive comments\comments\node_modules\webpack\lib\Compilation.js:1367:12
      ModuleBuildError: Module build failed (from ../../frontendChallange#21 interactive comments/comments/node_modules/html-webpack-plugin/lib/loader.js):
      Error: Cannot find module 'C:\Users\user\Desktop\Coding\frontend Challange\frontendChallange#21 interactive comments\comments\node_modules\html-webpack-plugin\lib\loader.js'
      Require stack:
      - C:\Users\user\Desktop\Coding\frontend Challange\frontendChallange#21 interactive comments\comments\node_modules\loader-runner\lib\loadLoader.js
      - C:\Users\user\Desktop\Coding\frontend Challange\frontendChallange#21 interactive comments\comments\node_modules\loader-runner\lib\LoaderRunner.js
      - C:\Users\user\Desktop\Coding\frontend Challange\frontendChallange#21 interactive comments\comments\node_modules\webpack\lib\NormalModule.js
      - C:\Users\user\Desktop\Coding\frontend Challange\frontendChallange#21 interactive comments\comments\node_modules\webpack-manifest-plugin\dist\index.js
      - C:\Users\user\Desktop\Coding\frontend Challange\frontendChallange#21 interactive comments\comments\node_modules\react-scripts\config\webpack.config.js
      - C:\Users\user\Desktop\Coding\frontend Challange\frontendChallange#21 interactive comments\comments\node_modules\react-scripts\scripts\start.js
          at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1020:15)
          at Function.Module._load (internal/modules/cjs/loader.js:890:27)
          at Module.require (internal/modules/cjs/loader.js:1080:19)
          at require (internal/modules/cjs/helpers.js:72:18)
          at loadLoader (C:\Users\user\Desktop\Coding\frontend Challange\frontendChallange#21 interactive comments\comments\node_modules\loader-runner\lib\loadLoader.js:19:17)
          at iteratePitchingLoaders (C:\Users\user\Desktop\Coding\frontend Challange\frontendChallange#21 interactive comments\comments\node_modules\loader-runner\lib\LoaderRunner.js:182:2)
          at runLoaders (C:\Users\user\Desktop\Coding\frontend Challange\frontendChallange#21 interactive comments\comments\node_modules\loader-runner\lib\LoaderRunner.js:397:2)
          at NormalModule._doBuild (C:\Users\user\Desktop\Coding\frontend Challange\frontendChallange#21 interactive comments\comments\node_modules\webpack\lib\NormalModule.js:812:3)
          at NormalModule.build (C:\Users\user\Desktop\Coding\frontend Challange\frontendChallange#21 interactive comments\comments\node_modules\webpack\lib\NormalModule.js:956:15)
          at C:\Users\user\Desktop\Coding\frontend Challange\frontendChallange#21 interactive comments\comments\node_modules\webpack\lib\Compilation.js:1367:12
          at processResult (C:\Users\user\Desktop\Coding\frontend Challange\frontendChallange#21 interactive comments\comments\node_modules\webpack\lib\NormalModule.js:751:19)
          at C:\Users\user\Desktop\Coding\frontend Challange\frontendChallange#21 interactive comments\comments\node_modules\webpack\lib\NormalModule.js:853:5
          at C:\Users\user\Desktop\Coding\frontend Challange\frontendChallange#21 interactive comments\comments\node_modules\loader-runner\lib\LoaderRunner.js:399:11
          at C:\Users\user\Desktop\Coding\frontend Challange\frontendChallange#21 interactive comments\comments\node_modules\loader-runner\lib\LoaderRunner.js:185:11
          at loadLoader (C:\Users\user\Desktop\Coding\frontend Challange\frontendChallange#21 interactive comments\comments\node_modules\loader-runner\lib\loadLoader.js:33:11)
          at iteratePitchingLoaders (C:\Users\user\Desktop\Coding\frontend Challange\frontendChallange#21 interactive comments\comments\node_modules\loader-runner\lib\LoaderRunner.js:182:2)
          at runLoaders (C:\Users\user\Desktop\Coding\frontend Challange\frontendChallange#21 interactive comments\comments\node_modules\loader-runner\lib\LoaderRunner.js:397:2)
          at NormalModule._doBuild (C:\Users\user\Desktop\Coding\frontend Challange\frontendChallange#21 interactive comments\comments\node_modules\webpack\lib\NormalModule.js:812:3)
          at NormalModule.build (C:\Users\user\Desktop\Coding\frontend Challange\frontendChallange#21 interactive comments\comments\node_modules\webpack\lib\NormalModule.js:956:15)
          at C:\Users\user\Desktop\Coding\frontend Challange\frontendChallange#21 interactive comments\comments\node_modules\webpack\lib\Compilation.js:1367:12
      
      - loader.js:1020 Function.Module._resolveFilename
        internal/modules/cjs/loader.js:1020:15
      
      - loader.js:890 Function.Module._load
        internal/modules/cjs/loader.js:890:27
      
      - loader.js:1080 Module.require
        internal/modules/cjs/loader.js:1080:19
      
      - helpers.js:72 require
        internal/modules/cjs/helpers.js:72:18
      
      - loadLoader.js:19 loadLoader
        [comments]/[loader-runner]/lib/loadLoader.js:19:17
      
      - LoaderRunner.js:182 iteratePitchingLoaders
        [comments]/[loader-runner]/lib/LoaderRunner.js:182:2
      
      - LoaderRunner.js:397 runLoaders
        [comments]/[loader-runner]/lib/LoaderRunner.js:397:2
      
      - NormalModule.js:812 NormalModule._doBuild
        [comments]/[webpack]/lib/NormalModule.js:812:3
      
      - NormalModule.js:956 NormalModule.build
        [comments]/[webpack]/lib/NormalModule.js:956:15
      
      - Compilation.js:1367 
        [comments]/[webpack]/lib/Compilation.js:1367:12
      
      - ModuleBuildError: Module build failed (from ../../frontendChallange#21 interactive comments/comments/node_modules/html-webpack-plugin/lib/loader.js):
      
      - Error: Cannot find module 'C:\Users\user\Desktop\Coding\frontend Challange\frontendChallange#21 interactive comments\comments\node_modules\html-webpack-plugin\lib\loader.js'
      
      - Require stack:
      
      - - C:\Users\user\Desktop\Coding\frontend Challange\frontendChallange#21 interactive comments\comments\node_modules\loader-runner\lib\loadLoader.js
      
      - - C:\Users\user\Desktop\Coding\frontend Challange\frontendChallange#21 interactive comments\comments\node_modules\loader-runner\lib\LoaderRunner.js
      
      - - C:\Users\user\Desktop\Coding\frontend Challange\frontendChallange#21 interactive comments\comments\node_modules\webpack\lib\NormalModule.js
      
      - - C:\Users\user\Desktop\Coding\frontend Challange\frontendChallange#21 interactive comments\comments\node_modules\webpack-manifest-plugin\dist\index.js
      
      - - C:\Users\user\Desktop\Coding\frontend Challange\frontendChallange#21 interactive comments\comments\node_modules\react-scripts\config\webpack.config.js
      
      - - C:\Users\user\Desktop\Coding\frontend Challange\frontendChallange#21 interactive comments\comments\node_modules\react-scripts\scripts\start.js
      
      - loader.js:1020 Function.Module._resolveFilename
        internal/modules/cjs/loader.js:1020:15
      
      - loader.js:890 Function.Module._load
        internal/modules/cjs/loader.js:890:27
      
      - loader.js:1080 Module.require
        internal/modules/cjs/loader.js:1080:19
      
      - helpers.js:72 require
        internal/modules/cjs/helpers.js:72:18
      
      - loadLoader.js:19 loadLoader
        [comments]/[loader-runner]/lib/loadLoader.js:19:17
      
      - LoaderRunner.js:182 iteratePitchingLoaders
        [comments]/[loader-runner]/lib/LoaderRunner.js:182:2
      
      - LoaderRunner.js:397 runLoaders
        [comments]/[loader-runner]/lib/LoaderRunner.js:397:2
      
      - NormalModule.js:812 NormalModule._doBuild
        [comments]/[webpack]/lib/NormalModule.js:812:3
      
      - NormalModule.js:956 NormalModule.build
        [comments]/[webpack]/lib/NormalModule.js:956:15
      
      - Compilation.js:1367 
        [comments]/[webpack]/lib/Compilation.js:1367:12
      
      - NormalModule.js:751 processResult
        [comments]/[webpack]/lib/NormalModule.js:751:19
      
      - NormalModule.js:853 
        [comments]/[webpack]/lib/NormalModule.js:853:5
      
      - LoaderRunner.js:399 
        [comments]/[loader-runner]/lib/LoaderRunner.js:399:11
      
      - LoaderRunner.js:185 
        [comments]/[loader-runner]/lib/LoaderRunner.js:185:11
      
      - loadLoader.js:33 loadLoader
        [comments]/[loader-runner]/lib/loadLoader.js:33:11
      
      - LoaderRunner.js:182 iteratePitchingLoaders
        [comments]/[loader-runner]/lib/LoaderRunner.js:182:2
      
      - LoaderRunner.js:397 runLoaders
        [comments]/[loader-runner]/lib/LoaderRunner.js:397:2
      
      - NormalModule.js:812 NormalModule._doBuild
        [comments]/[webpack]/lib/NormalModule.js:812:3
      
      - NormalModule.js:956 NormalModule.build
        [comments]/[webpack]/lib/NormalModule.js:956:15
      
      - Compilation.js:1367 
        [comments]/[webpack]/lib/Compilation.js:1367:12
      
      - child-compiler.js:169 
        [comments]/[html-webpack-plugin]/lib/child-compiler.js:169:18
      
      - Compiler.js:559 
        [comments]/[webpack]/lib/Compiler.js:559:11
      
      - Compiler.js:1129 
        [comments]/[webpack]/lib/Compiler.js:1129:17
      
      
      - Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
        [comments]/[tapable]/lib/Hook.js:18:14
      
      - Compiler.js:1125 
        [comments]/[webpack]/lib/Compiler.js:1125:33
      
      - Compilation.js:2782 finalCallback
        [comments]/[webpack]/lib/Compilation.js:2782:11
      
      - Compilation.js:3087 
        [comments]/[webpack]/lib/Compilation.js:3087:11
      
      
      - Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
        [comments]/[tapable]/lib/Hook.js:18:14

这是 package.json


  "name": "comments",
  "version": "0.1.0",
  "private": true,
  "dependencies": 
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.2"
  ,
  "scripts": 
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  ,
  "eslintConfig": 
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  ,
  "browserslist": 
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]

我已尝试返回旧版本的节点（任何版本 >= 14），清理 npm 缓存，搜索 webpack 文档和 html-webpack-plugin 文档，但仍然没有成功。 我在 Windows 10 和新的 ubuntu 系统上收到此错误。 非常感谢任何帮助。

【问题讨论】：

您是否尝试过从项目路径的文件夹名称中删除空格并重试？ 现在试过了，还是没有变化。谢谢你的建议。 【参考方案1】：

首先，确保您拥有正确版本的节点（我们都会犯错误）：

node -v

不应该高于16.13.1，女巫是当前稳定的version。

第二，你有没有全局安装create-react-app？如果是这样，请像这样删除它：

npm uninstall -g create-react-app

最后，删除你刚刚创建的项目，然后用npx重新开始：

npx create-react-app my-app

【讨论】：

您好，谢谢您的回复。可悲的是，错误仍然存​​在。我只在版本 14.2.0 上运行过一次（但只有一次），之后的每个版本都会产生相同的错误（包括我正在运行的当前版本 16.13.1）。 更新。在 Ubuntu 上工作。 对不起，我不能更早地回复。很高兴它成功了！ 它应该也可以在 Windows 上运行。确保您的npm uninstall -g create-react-app 正在做他的工作。有时您需要权限，因为它是全局的。如果是这样，您可以使用sudo npm uninstall -g create-react-app。

以上是关于在 windows10 和 ubuntu 中反应的 NPM 启动错误的主要内容，如果未能解决你的问题，请参考以下文章

window10和ubuntu16.04双系统装好后无法打开win10解决办法

安装好的Ubuntu的虚拟机,点击图标却打不开了，昨天还能用的，点击Ubuntu就是没反应

ubuntu 20.04 on windows怎么打开桌面

Ubuntu开机黑屏无法登录

Windows 10 上的 Bash 和 Ubuntu 终端有啥区别

windows10系统window键失灵，没有反应