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

更新您的反应版本可能可以解决您的问题。命令行：npm install --save react@latest。

如果您希望指定版本，则需要运行： npm install --save react@ 例如 npm install --save react@17.0.2

Answer 2

我遇到了类似的问题，但我无法找出原因。为了解决这个问题我

• 删除了节点模块和package.lock.json
• 删除C:\Users\user\AppData\Roaming中的npm和npm-cache文件夹并重新启动 PC
• 然后运行​​npm cache clean以确保缓存已正确清理。
• 将react和react-dom版本更新为^17.0.0
• 我也将我的 npm 版本更新到最新版本，也许这可能不是错误的原因，但我发现执行更新很有用。
• 之后我跑了：

• npm 安装

我的项目已恢复并运行。我相信遵循这一点可能会对遇到类似问题的人有所帮助。

我不明白错误的主要原因是什么，因为它的发生没有明显的原因，因为项目运行得很好，突然出现了错误。我相信该文件已损坏，并且我认为从 React 17 开始的新 jsx 转换解决了该问题，因为在范围内进行 React 并不是 jsx 编译的绝对必要条件。有关新 jsx 转换的详细信息，请访问https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html。

Answer 3

你导入组件的项目的 React 版本是什么？

我遇到了同样的错误并找到了 2 个解决方案

1. 使用 React < 17 & Typescript < 4.1.0 并进行以下 tsconfig 更改：

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

2. 在库和其他存储库上使用 React 17

   "jsx": "react-jsx"