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

【问题标题】：NPM start error for react in windows10 & ubuntu在 windows10 和 ubuntu 中反应的 NPM 启动错误
【发布时间】：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 系统上收到此错误。
非常感谢任何帮助。

【问题讨论】：

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

标签： node.js reactjs npm webpack html-webpack-plugin


【解决方案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。
猜你喜欢
  • 2019-12-18
  • 2021-02-21
  • 2018-01-11
  • 2019-11-29
  • 2016-11-10
  • 2021-12-14
  • 1970-01-01
  • 2018-10-15
  • 2020-09-25
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode