{"id":14881,"library":"react-scripts","title":"Create React App Scripts","description":"react-scripts is the core package underpinning Create React App (CRA), providing the fundamental configuration and scripts (start, build, test, eject) for React applications without requiring manual Webpack, Babel, ESLint, or Jest setup. The current stable version is 5.0.1, released in April 2022. Historically, major versions were released approximately annually, with maintenance patches in between. Key differentiators include its 'zero-configuration' approach, abstracting away complex build tooling, and offering a consistent development experience. While highly popular for rapid prototyping and learning, Create React App, and by extension `react-scripts`, is now in a maintenance state and is no longer recommended for new projects, which are encouraged to use alternative build tools like Vite or Next.js.","status":"maintenance","version":"5.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/facebook/create-react-app","tags":["javascript","typescript"],"install":[{"cmd":"npm install react-scripts","lang":"bash","label":"npm"},{"cmd":"yarn add react-scripts","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-scripts","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for any React application.","package":"react","optional":false},{"reason":"Peer dependency for TypeScript projects; enables type checking and compilation.","package":"typescript","optional":true}],"imports":[],"quickstart":{"code":"// Create a new React project using Create React App (this installs react-scripts)\n// This command initializes a new project with react-scripts as a dependency.\n// react-scripts itself is not typically imported into application code directly.\n// The primary interaction is via CLI commands managed by npm/yarn scripts.\n\n// 1. Initialize a new project with TypeScript template (recommended for new CRA projects)\n// npx create-react-app my-new-app --template typescript\n\n// (Alternatively, for JavaScript projects:)\n// npx create-react-app my-new-app\n\n// 2. Navigate into the newly created project directory\n// cd my-new-app\n\n// 3. Start the development server\n// npm start\n// (or yarn start)\n\n// 4. Build the project for production deployment\n// npm run build\n// (or yarn build)\n\n// 5. Run tests\n// npm test\n// (or yarn test)\n\n// Example of a minimal component inside src/App.tsx after project creation:\nimport React from 'react';\nimport logo from './logo.svg';\nimport './App.css';\n\nfunction App(): JSX.Element {\n  return (\n    <div className=\"App\">\n      <header className=\"App-header\">\n        <img src={logo} className=\"App-logo\" alt=\"logo\" />\n        <p>\n          Edit <code>src/App.tsx</code> and save to reload.\n        </p>\n        <a\n          className=\"App-link\"\n          href=\"https://react.dev\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          Learn React\n        </a>\n      </header>\n    </div>\n  );\n}\n\nexport default App;\n","lang":"typescript","description":"Demonstrates how to initialize a new Create React App project using `npx create-react-app` and how to use the `react-scripts` CLI commands (`start`, `build`, `test`) for common development workflows, along with a minimal TypeScript React component example."},"warnings":[{"fix":"Review the official Create React App release notes for v5.0.0 and update any custom configurations, ESLint plugins, or Jest setups to be compatible with the new major versions of these tools. Consider removing `react-app-rewired` if experiencing issues.","message":"Upgrading to react-scripts v5.0.0 introduced significant upgrades to core development dependencies including Webpack 5, Jest 27, ESLint 8, and PostCSS 8. These upgrades can lead to breaking changes in build configurations, ESLint rules, and testing setups if custom configurations or older plugins were in use.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Update your `src/index.js` (or `.tsx`) file to use the new React 18 root API: `import { createRoot } from 'react-dom/client'; const root = createRoot(document.getElementById('root')!); root.render(<App />);`","message":"When using React 18 with react-scripts v5.0.1, applications must migrate from `ReactDOM.render` to `ReactDOM.createRoot` for client-side rendering. Failing to do so will result in React 18 features (like concurrent rendering) not being enabled and potential console warnings.","severity":"breaking","affected_versions":">=5.0.1"},{"fix":"For new projects, consider using alternative build tools. For existing projects, be aware that active feature development for react-scripts is limited, focusing primarily on critical bug fixes and security updates. Plan for potential migration if future React versions introduce major incompatibilities.","message":"Create React App (and by extension, react-scripts) is officially in maintenance mode and is no longer recommended for new projects. While existing projects can continue to use it, new projects are advised to explore modern alternatives like Vite, Next.js, or Remix for better performance, built-in features, and an active ecosystem.","severity":"gotcha","affected_versions":">=5.0.0"},{"fix":"Ensure your project's Babel configuration aligns with the new JSX transform. If Fast Refresh isn't working, check for custom Webpack configurations or `react-app-rewired` setups that might interfere with Webpack HMR.","message":"react-scripts v4.0.0 introduced support for React 17's new JSX transform and Fast Refresh. While beneficial, custom Babel configurations or older tooling might conflict, requiring adjustments, especially if the `react-app/babel` preset is overridden or if `babel-plugin-react-jsx` was manually added.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Ensure your development environment uses Node.js version 14.0.0 or newer. You can use tools like nvm (Node Version Manager) or volta to manage multiple Node.js versions and switch to a compatible one.","message":"react-scripts v5.x requires Node.js version 14.0.0 or higher. Using an older Node.js version will prevent the scripts from running, resulting in an `EBADENGINE` error during installation or execution.","severity":"gotcha","affected_versions":">=5.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Upgrade your Node.js version to 14.0.0 or higher. Use nvm (e.g., `nvm install 16 && nvm use 16`) or volta to manage your Node.js environment.","cause":"Using an incompatible Node.js version (older than 14.0.0) with react-scripts v5.x.","error":"npm ERR! code EBADENGINE npm ERR! engine Unsupported engine for react-scripts@5.0.1: wanted: {\"node\": \">=14.0.0\"} (current: {\"node\":\"12.x.x\"})"},{"fix":"Ensure you have `react` and `react-dom` versions 18.x installed (`npm install react react-dom`) and that `react-scripts` is at least `5.0.1`. Then, update your `src/index.js` or `src/index.tsx` to use `import { createRoot } from 'react-dom/client';`.","cause":"Attempting to use React 18's `createRoot` API without updating react-scripts to at least v5.0.1, or without installing React 18 itself.","error":"Module not found: Error: Can't resolve 'react-dom/client' in '/path/to/your/project/src'"},{"fix":"Review your project's ESLint configuration (e.g., `.eslintrc.json` if ejected or created one). For `no-unused-vars`, consider explicit unused variable prefixes. For parsing errors, ensure your ESLint parser supports modern JS/TS syntax and react-scripts' default config is not overly overridden.","cause":"ESLint rules or configuration changed significantly in react-scripts v5.0.0 due to the upgrade to ESLint 8, or a conflicting ESLint config is present.","error":"ESLint: 'Component' is defined but never used. (no-unused-vars) OR ESLint: Parsing error: The keyword 'import' is reserved."},{"fix":"Remove or update any custom Webpack configurations or libraries like `react-app-rewired` that modify the default react-scripts behavior, as they might be incompatible with Webpack 5. Refer to the Webpack 5 migration guide if manual intervention is required.","cause":"Incompatibility issues arising from the major Webpack 5 upgrade in react-scripts v5.0.0, often related to custom configurations or `react-app-rewired`.","error":"TypeError: (0 , _webpackDevServer.default) is not a function OR Webpack build fails with module not found for custom configurations."}],"ecosystem":"npm"}