react build_error ai_generated true

Module not found: Can't resolve 'react/jsx-runtime'

ID: react/cannot-find-jsx-runtime

Also available as: JSON · Markdown
92%Fix Rate
90%Confidence
95Evidence
2020-10-01First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
18 active — — —

Root Cause

Build tools (webpack, TypeScript, Jest) cannot locate the react/jsx-runtime module introduced in React 17's new JSX transform. Happens when React version is too old, tsconfig uses the wrong jsx option, or the module resolution can't find the package.

generic

Workarounds

  1. 90% success Set tsconfig.json jsx option to 'react-jsx' (not 'react') 
    // tsconfig.json
{
  "compilerOptions": {
    "jsx": "react-jsx",  // Uses react/jsx-runtime (React 17+)
    // NOT "jsx": "react" which uses React.createElement
    "moduleResolution": "node"  // or "bundler" for newer setups
  }
}

    Sources: https://www.typescriptlang.org/tsconfig#jsx

  2. 92% success Ensure React version is 17+ and properly installed in node_modules 
    npm ls react
# If version < 17, upgrade:
npm install react@latest react-dom@latest
# Verify the file exists:
ls node_modules/react/jsx-runtime.js

    Sources: https://react.dev/blog/2020/09/22/introducing-the-new-jsx-transform

  3. 88% success For Jest, configure the test environment to use the new JSX transform 
    // jest.config.js or package.json
{
  "transform": {
    "^.+\\.[jt]sx?$": ["babel-jest", {
      "presets": [["@babel/preset-react", { "runtime": "automatic" }]]
    }]
  }
}

Dead Ends

Common approaches that don't work:

  1. Adding /** @jsxRuntime classic */ pragma to every file 70% fail

    This falls back to the old React.createElement transform per-file, which defeats the purpose of the new JSX transform (smaller bundles, no React import needed). It doesn't fix the underlying configuration issue and creates tech debt.

  2. Downgrading to React 16 to avoid the new JSX transform 80% fail

    React 16 lacks key features (concurrent rendering, automatic batching, useId). The jsx-runtime issue is a configuration problem, not a React version problem. React 17+ is needed for the new transform.

Error Chain

Frequently confused with: