首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >got无法解决“react/jsx-运行时”错误,同时使用react类型记录尝试创建带有故事书的共享组件

got无法解决“react/jsx-运行时”错误,同时使用react类型记录尝试创建带有故事书的共享组件
EN

Stack Overflow用户
提问于 2021-01-01 05:02:26
回答 4查看 66.3K关注 0票数 33

我尝试使用带有redux的故事书创建一个共享组件。我正在使用汇总创建一个共享组件。由于某些错误,无法创建共享组件。package.json

代码语言:javascript
运行
复制
{
  "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

代码语言:javascript
运行
复制
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()]
};

然后在我的另一个存储库中运行yarn add stroy1命令。

当我尝试使用这个组件时,我得到了一个错误

代码语言:javascript
运行
复制
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

如何修复此错误?

EN

Stack Overflow用户

发布于 2021-02-08 16:12:29

导入组件的项目的反应版本是什么?

我得到了同样的错误,找到了两个解决方案。

  1. Use React < 17 &类型记录< 4.1.0与以下tsconfig更改:

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

  1. 在库和其他存储库上使用Reactive17

"jsx":“react jsx”

票数 20
EN
查看全部 4 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/65527359

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档