got Can't resolve 'react/jsx-runtime' error while use try to create the shared component with storybook in react-typescript

Question

I tried to create a shared component using a storybook with react-redux. I am using rollup to create a shared component. due to some error unable to create the shared component. package.json

{
  "name": "story1",
  "version": "0.1.0",
  "private": false,
  "main": "./build/index.js",
  "module": "./build/index.es.js",
  "peerDependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.53",
    "@types/react-dom": "^16.9.8",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "rollup": "2.30",
    "typescript": "^4.0.3",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "start-storybook -p 6006 -s public",
    "build": "rollup -c",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build-storybook": "build-storybook -s public"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^17.0.0",
    "@rollup/plugin-node-resolve": "^11.0.1",
    "@storybook/addon-actions": "^6.1.11",
    "@storybook/addon-essentials": "^6.1.11",
    "@storybook/addon-links": "^6.1.11",
    "@storybook/node-logger": "^6.1.11",
    "@storybook/preset-create-react-app": "^3.1.5",
    "@storybook/react": "^6.1.11",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-typescript2": "^0.29.0"
  }
}

rollup.config.js

import commonjs from "@rollup/plugin-commonjs";
import resolve from "@rollup/plugin-node-resolve";
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import typescript from "rollup-plugin-typescript2";

import packageJson from "./package.json";

// eslint-disable-next-line import/no-anonymous-default-export
export default {
  input: "./src/index.ts",
  output: [
    {
      file: packageJson.main,
      format: "cjs",
      sourcemap: true
    },
    {
      file: packageJson.module,
      format: "esm",
      sourcemap: true
    }
  ],
  plugins: [peerDepsExternal(), resolve(), commonjs(), typescript()]
};

and I run the yarn add stroy1 command in my other repository.

when I try to use this component I got an error

ERROR in ./node_modules/story1/build/index.es.js
Module not found: Error: Can't resolve 'react/jsx-runtime' in '/Users/gowthamv/Documents/Workspace/my-app/node_modules/story1/build'
 @ ./node_modules/story1/build/index.es.js 1:0-56 47:12-15 52:12-15 52:38-42 52:98-102 52:123-126 52:245-249 52:316-319 53:36-39 54:36-39 55:24-27 56:16-19 56:47-50 56:127-131 56:132-140 56:155-158 57:28-31 62:12-16 62:41-44 63:12-16 63:41-44 64:20-24 64:84-87 64:201-204 65:20-23 66:20-24 66:44-47 67:28-31 68:20-24 68:108-111 68:286-289 69:20-24 69:84-87 69:207-210 69:329-332 69:398-401

How to fix this error?

Solution 1

What the React version of the project you import the component?

I got the same error and found 2 solutions

1. Use React < 17 & Typescript < 4.1.0 with the following tsconfig change:

   "jsx": "react" // from jsx-react
   

2. Use React 17 on both the library and the other repository with

   "jsx": "react-jsx"
   

Solution 2

Updating your react version possibily can resolve your problem. Command line: npm install --save react@latest.

If you wish to specific a version, you need to run: npm install --save react@ e.g. npm install --save [email protected]

Solution 3

I had a similar problem which i could not figure out the cause. In order to solve this problem i

• deleted the node modules and package.lock.json
• deleted npm and npm-cahce folder in C:\Users\user\AppData\Roaming and rebooted the PC
• Then ran npm cache clean to make sure the cache was correctly cleaned.
• Updated the react and react-dom version to ^17.0.0
• Updated my npm version to the most recent too, perhaps this might not be a reason for the error, but i found useful to perform the update.
• After that i ran:

• npm install

And my project was back up and running. I believe following this might might help one with a similar problem.

I do not understand what was the main cause of the error since it occurred with no tangible reason since the project was working just fine and out of a sudden the error appeared. I believe that the file got corrupted, and i think that the new jsx transform as from react 17 kind of solved the problem, since having react in scope was not more an absolute necessity for jsx compilation. details on the new jsx transform can be read on https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html .

Comments

[Darren Oster]

Should that be 'react-jsx'? ERROR in tsconfig.json TS6046: Argument for '--jsx' option must be: 'preserve', 'react-native', 'react', 'react-jsx', 'react-jsxdev'.

[Awais Usmani]

where to add this line ? in peer dependencies ?

[Andy Esp]

For all those wondering, this line should be added in tsconfig.json

[ToyRobotic]

I'm new to React and had the same issue. We use Themosis as WordPress framework for a new project. In this project we want to extend the Gutenberg editor. Gutenberg based on React. Themosis glued Laravel and WordPress and we use Laravel Mix for our Javascript stuff. Laravel provide a helper for React. However I got the error message Module not found: Error: Can't resolve 'react/jsx-runtime' and installing the last React version fixed this error. I don't know the real problem however this helps me and I want to share my knowledge :)

[BobtheMagicMoose]

This worked for me! No reboot necessary.

[Harshad Prajapati]

This is helpful for React project with Typescript setup