This guide provides concise solutions to resolve the “Can’t resolve ‘react/jsx-runtime’” error in React, commonly encountered when upgrading to React 17 or later.

Why This Error Occurs

React 17 introduced a new JSX runtime (react/jsx-runtime) to automate JSX transformation. If your project isn’t configured to use this runtime, the compiler fails to locate the required module, resulting in the error.

Benefits of the New JSX Runtime

  1. No Need to Import React: JSX can be used without explicitly importing React.
  2. Smaller Bundle Size: The new runtime can reduce JavaScript bundle size.

Solutions to Fix the Error

1. Upgrade React and React-DOM to Version 17+

Ensure your project uses React 17 or higher. Update package.json:

1
2
3
4
"dependencies": {  
  "react": "^17.0.0",  
  "react-dom": "^17.0.0"  
}

Run npm install or yarn install to apply changes.

2. Configure tsconfig.json for TypeScript Projects

Update tsconfig.json to use the new JSX runtime:

1
2
3
4
5
{  
  "compilerOptions": {  
    "jsx": "react-jsx"  
  }  
}

3. Modify Webpack Configuration

For webpack projects, resolve the JSX runtime paths in webpack.config.js:

1
2
3
4
5
6
7
8
module.exports = {  
  resolve: {  
    fallback: {  
      'react/jsx-runtime': require.resolve('react/jsx-runtime.js'),  
      'react/jsx-dev-runtime': require.resolve('react/jsx-dev-runtime.js')  
    }  
  }  
};

4. Upgrade to React 18 (Optional)

React 18 includes internal webpack configurations to resolve this issue. Update package.json:

1
2
3
4
"dependencies": {  
  "react": "^18.0.0",  
  "react-dom": "^18.0.0"  
}

Note: Ensure compatibility with other dependencies before upgrading.

Additional Tips

  • Check Dependency Conflicts: Ensure all dependencies support React 17+.
  • Use Create React App (CRA): Update CRA to a version supporting the new JSX runtime.
  • Clear Cache: Run npm cache clean --force to resolve lingering issues.

Conclusion

Resolve the “Can’t resolve ‘react/jsx-runtime’” error by upgrading React, configuring tsconfig.json, or modifying webpack settings. These steps ensure a smooth transition to the new JSX runtime, improving performance and maintainability.

For more details, refer to the official React documentation.