I just installed node js and created a react app when I tried to do npm start I got 'webpack compiled with 1 error' in the terminal.

I really did not do any single thing or changes in the app.

This how my terminal looks like

PS D:\#D\Tech\Node js\React js\Projects\Project 1> npm -v
8.5.5
PS D:\#D\Tech\Node js\React js\Projects\Project 1> npm create-react-app project1
Unknown command: "create-react-app"

To see a list of supported npm commands, run:
  npm help
PS D:\#D\Tech\Node js\React js\Projects\Project 1> npx create-react-app project1

Creating a new React app in D:\#D\Tech\Node js\React js\Projects\Project 1\project1.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...


added 1376 packages in 3m

179 packages are looking for funding
  run `npm fund` for details

Initialized a git repository.

Installing template dependencies using npm...
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated

added 39 packages in 18s

179 packages are looking for funding
  run `npm fund` for details
Removing template package using npm...


removed 1 package, and audited 1415 packages in 10s

179 packages are looking for funding
  run `npm fund` for details

6 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Created git commit.

Success! Created project1 at D:\#D\Tech\Node js\React js\Projects\Project 1\project1
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd project1
  npm start

Happy hacking!
PS D:\#D\Tech\Node js\React js\Projects\Project 1> npm start
Failed to compile.

Module not found: Error: Can't resolve 'D:\#D\Tech\Node js\React js\Projects\Project 1\project1\node_modules\webpack-dev-server\client\index.js?protocol=ws:&hostname=0.0.0.0&port=3000&pathname=/ws&logging=none&reconnect=10' in 'D:\#D\Tech\Node js\React js\Projects\Project 1\project1'ERROR in Module not found: Error: Can't resolve 'D:\#D\Tech\Node js\React js\Projects\Project 1\project1\node_modules\webpack-dev-server\client\index.js?protocol=ws:&hostname=0.0.0.0&port=3000&pathname=/ws&logging=none&reconnect=10' in 'D:\#D\Tech\Node js\React js\Projects\Project 1\project1'

webpack compiled with 1 error

My package.json is

{
  "name": "project1",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.2.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "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"
    ]
  }
}

Please tell me why I am getting this error and how to solve this thing.

CodePudding user response：

react-scripts can't find webpack-dev-server for some reason. You could try deleting node_modules and running npm install again

CodePudding user response：

I noticed that there was spaces in the name of parent folders i.e. \Tech\Node js\React js\Projects\Project 1\project1. I simply removed the spaces and renamed parent folders now it looks like this \Tech\Nodejs\Reactjs\Projects\Project1\project1 and its now working fine for me.