NPM start error for react in windows10 & ubuntu

Question

After updating nodeJS to version 16.13.1 and starting a project with

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

I get the following error

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

This is the 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"
    ]
  }
}

I have tried going back to an older version of node (any version >= 14), cleaned the npm cache, searched webpack documentation & html-webpack-plugin docs but still no success.
I get this error on windows 10 and a new ubuntu system.
Any help is greatly appreciated.

Answer 1

First make sure your node.js version is not higher than v16.15.0, the current stable version.

You can tape node -v in your terminal to check that.

Second, do you have create-react-app installed globally? If so, delete it like so :

npm uninstall -g create-react-app
# if the command does not pass, you may need to use sudo
sudo npm uninstall -g create-react-app

Finally, delete the project you just created and start over with npx :

npx create-react-app my-app