. Advertisement .
..3..
. Advertisement .
..4..
For Javascript users (or those who use React libraries, to be more specific), the error “React-scripts is not recognized” must have been quite familiar. How can we get down to its roots and fix this problem once and for all? Check out our guidelines.
What Are React-Scripts?
In programming fields, scripts are instruction lists that tell you what you should do to other programs. React, of course, is no exception. There are four main scripts with the React App, which we will explore in other articles.
But first, let’s clarify this issue: where can you find such scripts? The first step is to create new React apps via these commands to identify predefined scripts:
npx create-react-app my-app
This command has successfully created new React apps with cra-templates and required configurations. Each configuration needed for your React app arrives through react-script packages.
The next step is to inspect the package. json files of your newly established projects. In React applications, scripts lie in the script section of a package.json file, as you may see here:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
Why Did The “React-Scripts Is Not Recognized” Error Occur?
During your operation on React apps using Yarn start or NPM start, these errors might pop up:
'react-scripts' is not recognized as an internal or external command, operable program or batch file.
Sometimes, the message is just like this:
react-scripts: command not found
error Command failed with exit code 127.
What is the cause behind both errors? That’s because your Yarn or NPM program cannot locate the react-scripts module (this module should get installed in the node_modules folder).
The react-scripts packages are supposed to get installed once the new React application is established via a command-line tool “Create React App.”
How to Fix The “React-Scripts Is Not Recognized” Error?
Method 1: Manually install react-scripts
The most common cause of this issue is a lack of react-scripts files in node modules, sp the simplest solution to fix the error “React-Scripts Is Not Recognized” is manually installing react-scripts. Run the command below to do that:
npm install react-scripts --save
Method 2: Upgrade the installed version
It can be a problem with the installed version of react-scripts. Check the package.json file’s version number. For instance, it is 4.0.3 in the example given above. Now, visit this website to download the most recent version of react-scripts. Change the version name in the package if it is bigger than the installed version. Run yarn start or npm start again after running the json file. This ought to update the version. To check whether it is functioning or not, try running npm start or yarn start one more.
Method 3: Check your package.json
First, verify whether react-scripts are present in your package.json. If package.json contains react-scripts, all you have to do to fix the error is installing npm. Execute the following command.
npm install
Simply run this command to install react-scripts if package.json is missing it.
npm install react-scripts --save
Method 4: Run the following command
Another solution for you to solve the error “React-scripts is not recognized” is that you simple need to run the command below:
rm -rf node_modules
After that,
npm install
You also can directly install react-script by the following command:
npm install react-scripts --save-dev
Method 5: Install all NPM Packages again
Another method to solve this problem is install all packages again.
Run the following command to do that:
rm -rf node_modules && npm install
On macOS, Linux and Window:
rm /s /q node_modules && npm install
You also can use the command below to install all packages one more time:
npm cache clean --force
npm rebuild
npm install
Conclusion
This article has told you tips to fix the “React-scripts is not recognized” issues. For other issues regarding the React library (such as the “React doesn’t have access to the actual error object in development in reactjs” error), feel free to check other articles on ITtutoria for more guidelines.
Leave a comment