Registry /
web-framework / cra-template-typescript
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
App (component)
✓ import './App.css';
import React from 'react'; // Or omit in newer CRA with new JSX transform
function App() { return <div>Hello world</div>; }
✗ const App = require('./App');
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)
✓ import React, { useState } from 'react';
function MyComponent() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}
✗ const { useState } = require('react');
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)
✓ import React from 'react';
interface MyComponentProps { name: string; }
const MyComponent: React.FC<MyComponentProps> = ({ name }) => {
return <div>Hello, {name}</div>;
};
✗ import { FC } from 'react';
`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.
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;
create-react-app --version
Debug
Known issues
breakingCreate 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.fixAfter 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.
affects: >=5.0.0
breakingCRA 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.fixModify 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 />);` affects: >=5.0.1
breakingCRA 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.fixWhile `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.
affects: >=4.0.0
gotchaWhen 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.fixAlways 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.
affects: All
gotchaCreate 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.fixEnsure 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`).
affects: <14.0.0 (Node.js)
Errors
Common errors & fixes
Module not found: Error: Can't resolve 'react' in '...' or similar 'Cannot find module'
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.
fixNavigate 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)
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.
fixThis 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`?
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.
fixEnsure `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.
Audit
Dependencies
reactrequiredCore React library for UI development. Required for all React projects.
react-domrequiredReact library for DOM-specific operations. Necessary for rendering React apps in a browser environment.
react-scriptsrequiredContains the configuration, development server, and build scripts used by Create React App projects.
typescriptrequiredProvides TypeScript language support and compilation for the project.