reactjs - got Can't resolve 'react/jsx-runtime' error while use try to create the shared component with storybook in react-typescript
问题描述
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?
解决方案
你导入组件的项目的 React 版本是什么?
我得到了同样的错误并找到了2个解决方案
使用 React < 17 & Typescript < 4.1.0 并进行以下 tsconfig 更改:
"jsx": "react" // from jsx-react
在库和其他存储库上使用 React 17
"jsx": "react-jsx"
推荐阅读
- java - 如何从列表中删除重复元素
? - json - 在 Postman 中使用 JS Lodash 提取嵌套的 JSON 数组响应对象
- ios - Heroku调度程序不适用于Rails api
- javascript - 在发布请求后使用 res.send 返回发布的数据?
- r - R中识别字符串中第一个字符的最佳方法是什么?
- javascript - 在 Google App Maker 中创建指向页面特定部分(小部件)的链接的最佳方法是什么?
- mysql - 如何使用 PL/SQL 在 mysql 中生成动态列?
- laravel - Snappy pdf 在单页中显示内容
- javascript - Enhancing/manipulating react children props
- google-cloud-platform - 我可以将 Google Container Registry (GCR) 配置为允许推送新图像但不允许更改标签吗?