This error occurs when the react-scripts package is missing from your node_modules directory. It typically happens after cloning a Create React App project or when dependencies fail to install properly.
The "Cannot find module 'react-scripts'" error indicates that Node.js cannot locate the react-scripts package in your project's node_modules directory. The react-scripts package is a core dependency of Create React App that contains all the configuration and scripts needed to run, build, and test your React application. This error most commonly occurs when you clone a Create React App repository and try to run npm start without first installing dependencies, or when the installation process fails or is interrupted. It can also happen if your node_modules directory becomes corrupted or if there are issues with your package manager's cache. Unlike some module errors that can be resolved with global installations, react-scripts should always be installed locally as a project dependency, not globally.
Open your package.json file and confirm that react-scripts is listed in the dependencies:
{
"dependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-scripts": "5.0.1"
}
}If react-scripts is missing from dependencies, add it manually or reinitialize the project with Create React App.
Important: react-scripts should be in dependencies, NOT devDependencies.
Run the installation command for your package manager:
# Using npm
npm install
# Using yarn
yarn install
# Using pnpm
pnpm installWait for the installation to complete and verify that node_modules/react-scripts directory is created.
Ensure your project path doesn't contain special characters that can break module resolution:
Bad paths:
- C:\Users\My Documents\my react app (contains spaces)
- /home/user/app#3 (contains hash symbol)
- D:\Projects\app(2) (contains parentheses)
Good paths:
- C:\Users\Documents\my-react-app
- /home/user/projects/app-3
- D:\Projects\app-2
If your path contains special characters, move the project to a path with only alphanumeric characters and hyphens.
If the standard installation doesn't work, perform a clean reinstall:
# Remove node_modules and lock files
rm -rf node_modules
rm package-lock.json # or yarn.lock or pnpm-lock.yaml
# Clear npm cache
npm cache clean --force
# Reinstall dependencies
npm installFor Windows users, use these commands instead:
rmdir /s /q node_modules
del package-lock.json
npm cache clean --force
npm installIf react-scripts is still not installed after the previous steps, install it explicitly:
npm install react-scripts
# Or with a specific version
npm install react-scripts@latestAfter installation completes, verify the installation:
npm list react-scriptsYou should see output showing the installed version of react-scripts.
Ensure you're using compatible versions of Node.js and npm:
node --version
npm --versionCreate React App requires:
- Node.js 14.0.0 or later
- npm 6.14.0 or later
If your versions are outdated, update Node.js from https://nodejs.org/ or use a version manager like nvm:
# Update to latest LTS version with nvm
nvm install --lts
nvm use --ltsWhy react-scripts Should Not Be Global: Unlike some CLI tools, react-scripts should never be installed globally (npm install -g react-scripts). Each Create React App project may use different versions of react-scripts with different configurations. Global installations can cause version conflicts and unexpected behavior.
Package Manager Compatibility: If you're working on a team project, ensure everyone uses the same package manager. Mixing npm, yarn, and pnpm can cause lock file conflicts and installation issues. Check which lock file exists in the repository (package-lock.json for npm, yarn.lock for yarn, pnpm-lock.yaml for pnpm) and use the corresponding package manager.
CI/CD Environments: In continuous integration pipelines, this error often occurs when the CI cache is corrupted or when the build environment doesn't have proper network access to npm registries. Consider adding npm ci instead of npm install for more reliable builds, and verify that your CI environment can access the npm registry.
Monorepo Considerations: In monorepo setups using tools like Lerna or Nx, module resolution can be more complex. Ensure that hoisting is configured correctly and that react-scripts is installed in the correct package location.
Alternative: Migrate to Vite: If you're starting a new project or experiencing persistent issues with Create React App, consider migrating to Vite, which offers faster build times and simpler configuration. Create React App is no longer actively maintained as of 2023, and many teams are transitioning to modern alternatives.
React Hook useCallback has a missing dependency: 'variable'. Either include it or remove the dependency array react-hooks/exhaustive-deps
React Hook useCallback has a missing dependency
Cannot use private fields in class components without TS support
Cannot use private fields in class components without TS support
Cannot destructure property 'xxx' of 'undefined'
Cannot destructure property of undefined when accessing props
useNavigate() may be used only in the context of a <Router> component.
useNavigate() may be used only in the context of a Router component
Cannot find module or its corresponding type declarations
How to fix "Cannot find module or type declarations" in Vite