{"id":15578,"library":"cra-template-typescript","title":"Create React App TypeScript Template","description":"This package is the official TypeScript template for Create React App (CRA), a widely adopted command-line interface for bootstrapping single-page React applications. It provides a pre-configured setup with TypeScript out of the box, including a comprehensive build pipeline, a development server with hot-reloading, a testing framework (Jest), and linting (ESLint). Currently, CRA itself (and by extension, this template) is effectively in maintenance mode, with the last significant feature update being `react-scripts@5.0.1` in April 2022, primarily for React 18 compatibility. While stable and well-suited for existing projects or simple new ones, many developers are now opting for alternative tools like Vite, Next.js, or Remix for new projects due to their faster build times and more modern approaches to development.","status":"maintenance","version":"1.3.0","language":"javascript","source_language":"en","source_url":"https://github.com/facebook/create-react-app","tags":["javascript","react","create-react-app","template","typescript"],"install":[{"cmd":"npm install cra-template-typescript","lang":"bash","label":"npm"},{"cmd":"yarn add cra-template-typescript","lang":"bash","label":"yarn"},{"cmd":"pnpm add cra-template-typescript","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core React library for UI development. Required for all React projects.","package":"react","optional":false},{"reason":"React library for DOM-specific operations. Necessary for rendering React apps in a browser environment.","package":"react-dom","optional":false},{"reason":"Contains the configuration, development server, and build scripts used by Create React App projects.","package":"react-scripts","optional":false},{"reason":"Provides TypeScript language support and compilation for the project.","package":"typescript","optional":false}],"imports":[{"note":"This demonstrates a typical component import pattern within a CRA-generated TypeScript project. With Create React App 4.0+ (using `react-scripts@4.x.x` or higher) and React 17+, the new JSX transform often makes `import React from 'react';` unnecessary at the top of files that only contain JSX, but it's still needed for React hooks or other React exports.","wrong":"const App = require('./App');","symbol":"App (component)","correct":"import './App.css';\nimport React from 'react'; // Or omit in newer CRA with new JSX transform\n\nfunction App() { return <div>Hello world</div>; }"},{"note":"React hooks like `useState` are standard named exports from the `react` package. While CommonJS `require` can be used in some Node environments, CRA projects are configured for ESM (`import`/`export`) for application code.","wrong":"const { useState } = require('react');","symbol":"useState (React Hook)","correct":"import React, { useState } from 'react';\n\nfunction MyComponent() {\n  const [count, setCount] = useState(0);\n  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;\n}"},{"note":"`React.FC` is a type definition for functional components, providing implicit children prop typing. While `import { FC } from 'react';` is syntactically correct, using `React.FC` directly is often preferred for consistency with the primary `React` import and can avoid naming conflicts in some TypeScript setups. Newer TypeScript versions and linting rules might even discourage `React.FC` in favor of inline type annotations for props.","wrong":"import { FC } from 'react';","symbol":"React.FC (Functional Component type)","correct":"import React from 'react';\n\ninterface MyComponentProps { name: string; }\n\nconst MyComponent: React.FC<MyComponentProps> = ({ name }) => {\n  return <div>Hello, {name}</div>;\n};"}],"quickstart":{"code":"npx create-react-app my-ts-app --template typescript\n\ncd my-ts-app\n\nnpm start\n\n// To build your application for production:\n// npm run build\n\n// Example of a basic component structure in src/App.tsx after creation:\n// import React from 'react';\n// import './App.css';\n\n// function App() {\n//   return (\n//     <div className=\"App\">\n//       <header className=\"App-header\">\n//         <p>Edit <code>src/App.tsx</code> and save to reload.</p>\n//       </header>\n//     </div>\n//   );\n// }\n\n// export default App;","lang":"typescript","description":"Demonstrates the initial command to create a new TypeScript React application using the CRA TypeScript template, navigate into it, and start the development server. It also shows the typical structure of a generated `App.tsx`."},"warnings":[{"fix":"After upgrading `react-scripts` to version 5, carefully review your `package.json` for any conflicting peer dependencies. If you're using custom Webpack/Babel configurations, these will likely need substantial updates or removal. Consider migrating away from tools like `customize-cra` if possible.","message":"Create React App v5.0.0 (`react-scripts@5.x.x`) introduced significant dependency upgrades including webpack 5, Jest 27, ESLint 8, and PostCSS 8. These major version bumps in core tooling can lead to compatibility issues with older custom configurations (e.g., `config-overrides.js`) or specific third-party libraries that rely on older versions of these tools.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Modify your `src/index.tsx` from `ReactDOM.render(<App />, document.getElementById('root'));` to:\n`import { createRoot } from 'react-dom/client';\nconst container = document.getElementById('root');\nconst root = createRoot(container!); // Use createRoot(container!) if using TypeScript and confident 'root' exists\nroot.render(<App />);`","message":"CRA v5.0.1 (`react-scripts@5.0.1`) brought improved compatibility with React 18, which introduced the new root API (`ReactDOM.createRoot`). Projects migrating from CRA 4.x or earlier to 5.x *must* update their `src/index.tsx` file to use `createRoot` instead of the deprecated `ReactDOM.render` for concurrent mode features and to avoid console warnings.","severity":"breaking","affected_versions":">=5.0.1"},{"fix":"While `import React from 'react';` can be omitted in files solely containing JSX, it's still necessary if you use React Hooks (e.g., `useState`, `useEffect`) or other named exports directly from the `react` package. Linters might flag unused `React` imports, which can be safely removed if only JSX is present.","message":"CRA v4.0.0 (`react-scripts@4.x.x`) enabled the new JSX transform introduced in React 17. This change means that `import React from 'react';` is no longer strictly required at the top of every file that uses JSX, as the React runtime is automatically injected by the compiler.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Always use `npm install --save --save-exact react-scripts@latest` or `yarn add --exact react-scripts@latest` for `react-scripts` updates. Never rely on caret (^) or tilde (~) ranges for this specific package.","message":"When updating an existing Create React App project, it is strongly recommended to update `react-scripts` using `npm install --save --save-exact react-scripts@latest` or `yarn add --exact react-scripts@latest`. Using `--save-exact` or `--exact` ensures that the `react-scripts` package and its tightly coupled internal dependencies (like Webpack, Babel) are installed at precise, tested versions, preventing potential dependency mismatches and build failures.","severity":"gotcha","affected_versions":"All"},{"fix":"Ensure your Node.js environment is at least version 14. It is best practice to use a Node Version Manager (like `nvm`) to easily switch between and manage different Node.js versions (e.g., `nvm install 18 && nvm use 18`).","message":"Create React App, and thus projects created with this template, requires a Node.js version of 14 or higher. Using older Node.js versions can lead to installation failures, build errors, or runtime issues due to incompatibility with updated package dependencies.","severity":"gotcha","affected_versions":"<14.0.0 (Node.js)"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Navigate to your project directory and run `npm install` or `yarn install`. If the problem persists, try clearing your package manager cache (`npm cache clean --force` or `yarn cache clean`), then delete `node_modules` and `package-lock.json` (or `yarn.lock`), and reinstall.","cause":"The core `react` package or one of its dependencies is not correctly installed or symlinked in the project's `node_modules` directory, or there's an issue with the package manager cache.","error":"Module not found: Error: Can't resolve 'react' in '...' or similar 'Cannot find module'"},{"fix":"This issue is complex to fix without ejecting CRA. The best approach is to check if an updated version of the problematic library exists that is compatible with Webpack 5. If not, you might need to find an alternative library or, as a last resort, use tools like `customize-cra` (with the associated risks of not having official support) to add webpack polyfills.","cause":"This error frequently occurs in Create React App v5 projects (which use webpack 5) when a third-party library assumes the presence of Node.js global variables like `process` or `Buffer` in a browser environment. Webpack 5 no longer automatically polyfills these by default.","error":"TypeError: Cannot read properties of undefined (reading 'process') at Object.<anonymous> (../node_modules/some-lib/index.js:X:Y)"},{"fix":"Ensure `react-scripts` is present in your `package.json` under `dependencies` and run `npm install` or `yarn install` in your project's root directory. If you've just created the project, verify that the `create-react-app` command completed without errors.","cause":"The `react-scripts` package, which provides all the executable scripts (`start`, `build`, `test`) for Create React App, is either missing from your `node_modules` or is not listed in your project's `package.json` dependencies.","error":"Error: `react-scripts` is not found. Did you mean to run `npm install` or `yarn install`?"}],"ecosystem":"npm"}