Create React App TypeScript Template

Common errors

• Module not found: Error: Can't resolve 'react' in '...' or similar 'Cannot find module'

  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.
  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.

• TypeError: Cannot read properties of undefined (reading 'process') at Object.<anonymous> (../node_modules/some-lib/index.js:X:Y)

  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.
  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.

• Error: `react-scripts` is not found. Did you mean to run `npm install` or `yarn install`?

  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.
  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.

Warnings

• breaking 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.
  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.
• breaking 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.
  Fix: Modify your `src/index.tsx` from `ReactDOM.render(<App />, document.getElementById('root'));` to: `import { createRoot } from 'react-dom/client'; const container = document.getElementById('root'); const root = createRoot(container!); // Use createRoot(container!) if using TypeScript and confident 'root' exists root.render(<App />);`
• breaking 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.
  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.
• gotcha 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.
  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.
• gotcha 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.
  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`).

Install

• npm install cra-template-typescript npm
• yarn add cra-template-typescript yarn
• pnpm add cra-template-typescript pnpm

Imports

• App (component)
  wrong:

  const App = require('./App');

  correct:

  import './App.css';
  import React from 'react'; // Or omit in newer CRA with new JSX transform
  
  function App() { return <div>Hello world</div>; }

  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.
• useState (React Hook)
  wrong:

  const { useState } = require('react');

  correct:

  import React, { useState } from 'react';
  
  function MyComponent() {
    const [count, setCount] = useState(0);
    return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
  }

  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.
• React.FC (Functional Component type)
  wrong:

  import { FC } from 'react';

  correct:

  import React from 'react';
  
  interface MyComponentProps { name: string; }
  
  const MyComponent: React.FC<MyComponentProps> = ({ name }) => {
    return <div>Hello, {name}</div>;
  };

  `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.

Quickstart

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`.

npx create-react-app my-ts-app --template typescript

cd my-ts-app

npm start

// To build your application for production:
// npm run build

// Example of a basic component structure in src/App.tsx after creation:
// import React from 'react';
// import './App.css';

// function App() {
//   return (
//     <div className="App">
//       <header className="App-header">
//         <p>Edit <code>src/App.tsx</code> and save to reload.</p>
//       </header>
//     </div>
//   );
// }

// export default App;