时间戳

首页 > 解决方案 > 纱线工作区共享反应组件 babel 错误

reactjs - 纱线工作区共享反应组件 babel 错误

问题描述

Xena - 纱线工作区

单回购设置：

xena
  |----- node_modules
  |----- package.json
  |----- admin-client2
     |------ node_modules
     |------ src
     |------ packages.json
  |----- components
     |----- nmds-components
        |----- node_modules
        |----- src
        |----- index.js
        |----- packages.json
    |----- constants
        |----- countries.js
        |----- languages.js
        |----- node_modules
        |----- package.json

共享的 react 组件不会通过 babel 进行转译，因此消费应用程序会给出 babel 错误。

  23 | 
  24 | 
> 25 |   dismissError = () => this.setState({ isErrorHidden: true });
     |                ^
  26 | 
  27 |   render() {
  28 |     const { error } = this.props;

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.

我已将其.babelrc放入我的共享组件文件夹（nmds-component）。也"source":true给共享组件package.json。

根包.json

{
  "name": "xena",
  "version": "0.0.1",
  "description": "NextJS, CRA app monorepo",
  "main": "index.js",
  "repository": "https://github.com/s4kh/xena",
  "author": "skh",
  "license": "MIT",
  "private": true,
  "scripts": {
    "clean": "shx rm -rf **/node_modules",
    "dev-admin2": "yarn workspace admin2-client start"
  },
  "devDependencies": {
    "node-sass-chokidar": "^1.3.3",
    "npm-run-all": "^4.1.3",
    "shx": "^0.3.2"
  },
  "workspaces": [
    "components/*",
    "admin2-client"
  ]
}

admin2-client package.json

{
  "name": "admin2-client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "2.1.8",
    "nmds-components": "1.0.0" << THE SHARED COMPONENT
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

我的猜测是react-scripts start不会在里面转译代码node_modules，而是作为符号链接nmds-components存在于根目录中。node_modules

标签： reactjsbabeljsnext.jsyarn-workspaces

解决方案

推荐阅读