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?

resolved in stackoverflow.com/a/76561254/6318705

Li Zheng
– Li Zheng

2023-06-27 02:27:21 +00:00
Commented Jun 27, 2023 at 2:27 — Li Zheng
– Li Zheng, Commented Jun 27, 2023 at 2:27

Elfen · Accepted Answer · 2021-03-11 11:03:41Z

28

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

I got the same error and found 2 solutions

Use React < 17 & Typescript < 4.1.0 with the following tsconfig change:
```
"jsx": "react" // from jsx-react
```
Use React 17 on both the library and the other repository with
```
"jsx": "react-jsx"
```

edited Mar 11, 2021 at 11:03

answered Feb 8, 2021 at 16:12

Elfen

9838 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Darren Oster Over a year ago

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 Over a year ago

where to add this line ? in peer dependencies ?

Andy Esp Over a year ago

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

Harshad Prajapati Over a year ago

This is helpful for React project with Typescript setup

Musadul Islam · Accepted Answer · 2021-09-28 09:15:19Z

20

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]

answered Sep 28, 2021 at 9:15

Musadul Islam

4084 silver badges11 bronze badges

1 Comment

ToyRobotic Over a year ago

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 :)

syntagma · Accepted Answer · 2022-07-11 23:16:37Z

11

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 .

edited Jul 11, 2022 at 23:16

syntagma

24.6k17 gold badges85 silver badges142 bronze badges

answered Aug 27, 2021 at 19:13

NGUM BUKA FON NYUYDZE

1191 silver badge6 bronze badges

2 Comments

BobtheMagicMoose Over a year ago

This worked for me! No reboot necessary.

Rickard Elimää Over a year ago

Step 1 and 3 was enough for me before I did a npm install.

Samilly Nunes · Accepted Answer · 2025-04-15 14:02:27Z

0

I had the same problem while working on my React project. To resolve, I had to update the React version to ^18 and worked.

That happens because MUI is prepared to work with 18+ versions

answered Apr 15 at 14:02

Samilly Nunes

14 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

4 Comments

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related