Search code examples
javascriptreactjsnpm-installpackage.jsonnpm-scripts

Task not found: "react-scripts:start"


I've configured tailwind.css to my react project and edit the react scripts according to

"scripts": {
    "build:css": "postcss src/styles/index.css -o src/styles/tailwind.css",
    "watch:css": "postcss src/styles/index.css -o src/styles/tailwind.css --watch",
    "react-script:start": "timeout <5>  && react-scripts start",
    "start": "run-p watch:css react-scripts:start",
    "build": "run-s build:css react-scripts:build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

also the respective packages were installed without any error. I'm annexing the package.json

{
  "name": "myblog",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "^5.0.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "build:css": "postcss src/styles/index.css -o src/styles/tailwind.css",
    "watch:css": "postcss src/styles/index.css -o src/styles/tailwind.css --watch",
    "react-script:start": "timeout <5>  && react-scripts start",
    "start": "run-p watch:css react-scripts:start",
    "build": "run-s build:css 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"
    ]
  },
  "devDependencies": {
    "autoprefixer": "^10.4.4",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.4.12",
    "postcss-cli": "^9.1.0",
    "tailwindcss": "^3.0.23"
  }
}

Then I continuously got the error by showing "Task not found"

the error displayed in the terminal

What I have tried so far

  1. Reinstall all the dependencies manually
  2. npm install after changing the react script commands
  3. Delete node modules and install again
  4. Checked all the react scripts and did npm-run-all

Solution

  • You have a spelling error in your scripts section:

    "start": "run-p watch:css react-scripts:start" is looking for "react-scripts:" (plural, with an "s"), but your script name does not contain that "s" ("react-script:").

      "scripts": {
        ...
        "react-script:start": "timeout <5>  && react-scripts start",
                     ^--- Does not contain the "s" - change this to: "react-scripts:start": "timeout <5>  && react-scripts start",
    
        "start": "run-p watch:css react-scripts:start",
        Looking for react-scripts with an s --^
      },