[英]Error when importing JSX files from another package in monorepo with React
I created a simple project to study monorepo.我创建了一个简单的项目来研究 monorepo。 The example consists of three React applications, where one consists of a lib of components with the Storybook and the other two will import the components of this package.
该示例包含三个 React 应用程序,其中一个包含带有 Storybook 的组件库,另外两个将导入此 package 的组件。
However I am not able to import a component from another package.但是我无法从另一个 package 导入组件。 When I import a common function, no error occurs.
当我导入一个普通的function时,没有出现错误。
../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 };
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;
{
"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"
}
}
You get error because you have not transpiled your shared react components.你得到错误是因为你没有编译你的共享反应组件。 There are some (not official) solutions for this with
create-react-app
. create-react-app
有一些(非官方)解决方案。 One of them is to use react-app-rewired
and customize-cra
.其中之一是使用
react-app-rewired
和customize-cra
。 Instal lthem as dev-dependency and add a config-overrides.js
file to the root of your create-react-app
:将 lthem 安装为 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)
)
}
Then use react-app-rewired
instead of react-scripts
in your scripts for start and build of the project:然后在脚本中使用
react-app-rewired
而不是react-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"
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.