React is a powerful JavaScript framework that allows developers convenient means of managing state in web applications. It features convenient application launching utilities that rely on several packages to deploy their full utility. One such package is the react-scripts package, used by the create-react-app utility.
In some cases, including those where the root cause is unknown, the react-scripts utility is not recognized. In these cases, a react-scripts command not found error results. This short article presents several options for resolving this issue, roughly in order of how involved each approach is.
Quick Intro: React Apps Setup 101
This isn’t a tutorial on creating react applications. Nonetheless, some important aspects of such applications are needed to understand how to address the issue. As described in the react Getting Started page, a new react application can be created via the following command:
npx create-react-app <your-app-name>
After this command is given, the following output will be displayed prior to a series of readouts indicating progress:
Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scripts with cra-template...
Take note that this process installs the react-scripts package from which the react scripts command not found error originates. This package provides developers with a number of useful commands including, but not limited to, the following:
- start: runds an application in development mode.
- test: launches the test runner in interactive mode.
- build: builds the application for production use.
These are the commands that are likely to be issued and cause the react-scripts command not found error.
Note: create-react-app requires that Node version >= 14 and the npm package manager is installed. See here for instructions. If the create-react-app package is not installed, a prompt to install via npm will be displayed following the npx create-react-app <appname> command with a y/n prompt.
The Problem: Running a React-Scripts Command
The react-scripts listed above are executed via the following syntax:
npm [start|test|build]npm run [start|test|build]
Both approaches follow the npm conventions of executing a named script listed in a node-based project’s package.json file in the scripts section. For example, a boilerplate react application (having been created via the npx create-react-app command, has the following available scripts listed:
...
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
...
When the npm run start command is issued, it executes the react-scripts start command. This command can be made without npm via the command ./node_modules/.bin/react-scripts start. Alternatively, if the react-scripts package were installed globally (bad idea) one could also run it explicitly as react-scripts start from within the project.
TL;DR – npm uses the npm start command to reference the scripts portion of the package.lock file and execute the reference script. In cases where that script isn’t found, or there is no listing in package.lock there can be issues.
Fix 1: Run npm install
In the case where an app might have been cloned, the node_modules directory would not have been copied. As such, one needs to run the npm install to ensure all project dependencies are available in the local environment. Alternatively, yarn install can be used if the yarn package manager is preferred and available.
Note: Projects that are initialized with yarn may become corrupt if later the npm install command is issued. See here (shouldn’t be an issue with updated versions.)
Fix 2: Delete package-lock.json &Re-install
The package-lock.json file is a reflection of the dependency tree used by npm and similar package managers for JavaScript-based applications including react apps. It is updated anytime a modification occurs to the node_modules tree or to package.json.
In some cases (for reasons often unknown) errors can occur when updating this file. The simplest fix is to delete the file and regenerate it anew by issuing the npm install command.
Fix 3: Delete node_modules & Reinstall
This approach takes a bit longer given one needs to completely delete the node_modules directory. After the directory is removed, re-run the npm install command to download and install all the project dependencies.
Note: Pay attention here to any warnings or errors that are displayed as they might offer insight into the nature of the problem.
Fix 4: Install react-scripts Again Locally
The react-scripts module is a dependency of all react applications by default, at least those created with the create-react-app utility. However, it is possible that the react-scripts package was removed from the list of dependencies somehow.
One can check if the react-scripts package is installed via the npm list command, issued from the root directory of a react project. The following is the output when this command is issued from a boilerplate application created via the npx create-react-app test-app-one command:
path/to/test-app/test-app-one$ npm list test-app-one@0.1.0 path/to/test-app/test-app-one ├── @testing-library/jest-dom@5.16.4 ├── @testing-library/react@13.3.0 ├── @testing-library/user-event@13.5.0 ├── react-dom@18.2.0 ├── react-scripts@5.0.1 ├── react@18.2.0 └── web-vitals@2.1.4
If the the react-scripts@ver entry is missing then this fix should resolve the issue. Note: It is recommended to NOT install react-scripts at the global level — see here.
Fix 5: Remove Spaces & Special Characters from Path Names
In some cases path names inclusive of spaces or special characters like & can cause path resolvers to have issues. If you notice any spaces or special characters other than _ or - in your path names try replacing them.
Fix 6: Run npm audit
The npm audit command will scour a project’s dependencies and where a fix instruction is available, apply it. This will alter the dependency tree for a project. The npm audit fix command will issue a list of deprecations, warnings, and other issues with the current dependency tree. The npm audit fix --force command (adding the force option) will apply changes.
Note: the --force option is rarely recommended and can cause breaking changes among project dependencies.
Final Thoughts
ReactJS is a powerful state-management framework that has risen to be one of the most popular web frameworks. Pioneered by Facebook, it was developed to provide high-level means to manage complicated state changes in HTML elements in modern responsive websites. The issues described here center around issues with package managers and scripts, but can cause a react application to fail before it even starts!
The fixes listed here provide a wide range of options to address issues where react-scripts commands aren’t executing. These fixes are listed roughly in order of a balance of the time they will take to complete and the risk of complication they pose. Please reach out if one of these fixes doesn’t address an issue you are facing or if you have a better solution.
