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?

Answer 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"
   

Answer 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 react@17.0.2

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

Answer 4

To solve the error "Module not found: Error: Can't resolve 'react/jsx-runtime'", make sure to update the react package by opening your terminal in your project's root directory and running the command npm install react@latest react-dom@latest and restart your dev server.

Open your terminal in your project's root directory (where your package.json file is located) and run the following commands:

️ with NPM

npm install react@latest react-dom@latest

️ ONLY If you use TypeScript

npm install --save-dev @types/react@latest @types/react-dom@latest

----------------------------------------------

️ with YARN

yarn add react@latest react-dom@latest

️ ONLY If you use TypeScript

yarn add @types/react@latest @types/react-dom@latest --dev

credits: https://bobbyhadz.com/blog/react-module-not-found-cant-resolve-react-jsx-runtime