繁体   English   中英

使用 React 从 monorepo 中的另一个包导入 JSX 文件时出错

Error when importing JSX files from another package in monorepo with React

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我创建了一个简单的项目来研究 monorepo。 该示例由三个 React 应用程序组成,其中一个包含带有 Storybook 的组件库,另外两个将导入此包的组件。

但是我无法从另一个包中导入组件。 当我导入一个常用函数时,没有发生错误。

Github 存储库

错误信息

../components/src/button/Button.js
SyntaxError: /home/thiago/Documentos/Dev/projects/learn-monorepo/packages/components/src/button/Button.js: Support for the experimental syntax 'jsx' isn't currently enabled (7:5):

   5 | function Button({label, ...rest}) {
   6 |   return (
>  7 |     <div>
     |     ^
   8 |       <button {...rest}>
   9 |         {label}
  10 |       </button>

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.

按钮组件

function Button({label, ...rest}) {
  return (
    <div>
      <button {...rest}>
        {label}
      </button>
    </div>
  );
}

export { Button };

应用程序.js

import React from 'react';
import { Button } from '@project/components';

function App() {
  return (
    <div>
      <h1>Hello World - App 01</h1>
      <Button label="Button"/>
    </div>
  );
}

export default App;

包.json

{
  "name": "project",
  "version": "1.0.0",
   "main": "build/index.js",
  "author": "thiago <thenrique2012@gmail.com>",
  "license": "MIT",
  "private": true,
  "workspaces": {
    "packages": ["packages/*"]
  },
  "babel": {
    "presets": [
      "@babel/preset-react"
    ],
    "plugins": [
      "@babel/plugin-syntax-jsx"
    ]
  },
  "scripts": {
    "bootstrap": "lerna bootstrap",
    "start:app-01": "lerna run --scope @project/app-01 start",
    "start:app-02": "lerna run --scope @project/app-02 start",
    "start:storybook": "lerna run --scope @project/components storybook",
    "start:web": "yarn start:app-01 & yarn start:app-02 & yarn start:storybook"
  },
  "devDependencies": {
    "@babel/plugin-syntax-jsx": "^7.12.1",
    "@babel/preset-react": "^7.12.10",
    "babel-loader": "8.1.0",
    "lerna": "^3.22.1"
  }
}

1 个回复

您会收到错误消息,因为您尚未转换共享的 React 组件。 使用create-react-app有一些(非官方)解决方案。 其中之一是使用react-app-rewiredcustomize-cra 将它们安装为 dev-dependency 并将config-overrides.js文件添加到create-react-app的根目录:

var path = require('path')
const { override, babelInclude } = require('customize-cra')

module.exports = function (config, env) {
  return Object.assign(
    config,
    override(
      babelInclude([
        /* transpile (converting to es5) code in src/ and shared component library */
        path.resolve('src'),
        path.resolve('../components'),
      ])
    )(config, env)
  )
}

然后在react-scripts中使用react-app-rewired而不是react-scripts scripts 来启动和构建项目:

"scripts": {
        "start": "react-app-rewired start",
        "build-prod": "react-app-rewired build",
        "build": "react-app-rewired build",
        "test": "react-app-rewired test",
        "eject": "react-scripts eject"
},
1 文件位于同一目录AND包中时导入错误

我试图将一大类实用程序类从父目录中的文件导入子目录中的几个不同文件(请参见下面的草图)。 我创建了一个包(com.example.mypackage),并在每个文件的顶部声明了该包 我希望能够在所有文件(1、2、3和4)中使用Util.java中的类。 但是,当我尝试这种方法时 ...

4 使用 JSX 导入 React 组件

使用 JXS 导入 react 组件时出现问题。 组件从库中导入(像 SDK 一样使用)。 /sdk/dist/js/app.js 有一个项目使用了这个 SDK,有 webpack/babel 已经做了构建,导入这个组件的文件是这样的: 应用程序/js/index.js 结果: 但 ...

6 将模块导入新的 create-react-app 项目时,构建时出现 Babel/JSX Transpiler 错误

在这里反应菜鸟。 我已经坚持了一段时间。 我试图将一个模块添加到我正在制作的项目中,但发现当我使用新的 create-react-app 运行它时会出现同样的问题。 我相信它与 babel/JSX 相关,因为如果我将导入的模块 src 放入一个新项目或仅放入现有项目的 src 中,它似乎编译得 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM