尝试在monorepo项目中配置Babel-当前未启用'classProperties'。 如何在monorepo项目中设置Babel？

Question

I have a monorepo that is set according to this tutorial: tutorial .

This project is composed by a main folder (series4) that holds three packages, which are focused on web, mobile applications and common code - they are named web, app and common folders respectively.

Summarizing ... these folders are:

/series4/packages/web
/series4/packages/common
/series4/packages/app

I am trying to use the Modal module, however I get this error:

SyntaxError: series4/node_modules/react-native-modal/src/index.js: Support for the experimental syntax 'classProperties' isn't currently enabled (25:20)

I have read the documentation that is here: Babel .

However I was not able to solve this error.

The package.json that is in "series4" directory is:

{
  "name": "@wow/common",
  "version": "1.0.0",
  "description": "",
  "main": "dist/index.js",
  "scripts": {
    "build": "rimraf dist && tsc",
    "watch": "tsc --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "16.8.2",
    "react-native": "0.59.0-rc.1",
    "react-native-elements": "^1.1.0",
    "react-native-image-slider-box": "^1.0.5",
    "react-native-snap-carousel": "^3.8.0"
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@types/react-native": "0.57.36",
    "rimraf": "^2.6.3",
    "typescript": "3.3.3"
  }
}

The babel.config.js file (it is in series4 directory) is:

module.exports =  {
    presets: [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    plugins: [
      '@babel/proposal-class-properties',
      '@babel/plugin-proposal-class-properties'
    ],
    babelrcRoots: [
        ".",
        "packages/*",
      ],
  };

I have configured the following babelrc in web and common folders.

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        [
          "@babel/plugin-proposal-class-properties"
        ]
    ]
}

The package.json in common folder is:

{
  "name": "@wow/common",
  "version": "1.0.0",
  "description": "",
  "main": "dist/index.js",
  "scripts": {
    "build": "rimraf dist && tsc",
    "watch": "tsc --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "16.8.2",
    "react-native": "0.59.0-rc.1",
    "react-native-elements": "^1.1.0",
    "react-native-image-slider-box": "^1.0.5",
    "react-native-snap-carousel": "^3.8.0"
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@types/react-native": "0.57.36",
    "rimraf": "^2.6.3",
    "typescript": "3.3.3"
  }
}

The package.json in web folder is:

{
  "name": "react-native-web-workout-series",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@types/jest": "24.0.5",
    "@types/node": "11.9.4",
    "@types/react": "16.8.3",
    "@types/react-dom": "16.8.1",
    "@wow/common": "1.0.0",
    "react": "^16.8.2",
    "react-art": "16.8.2",
    "react-dom": "^16.8.2",
    "react-native": "0.55.4",
    "react-native-modal": "^11.3.1",
    "react-native-web": "0.10.0",
    "react-scripts": "2.1.5",
    "typescript": "3.3.3"
  },
  "scripts": {
    "start": "cross-env SKIP_PREFLIGHT_CHECK=true 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"
  ],
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@types/react-native": "0.55.4",
    "babel-plugin-module-resolver": "^3.2.0",
    "cross-env": "^5.2.0"
  }
}

I get the error when I run the

yarn start 

command in web folder (the command works perfectly when I execute it without the Modal module).

What am I missing?

Answer 1

This is probably caused by react-native-modal not transpiling class property syntax. And, by default, node_modules will not be transpiled. When js engine read the class property syntax, it bails.

You need babel.config.js to affect the node_modules

 
 
 
  
  module.exports = function (api) { api.cache(true); return { babelrcRoots: [ '.', './modules/*' ], ignore: [/node_modules/(?!react-native-modal)/], presets: ["@babel/preset-env"] }; }
 
  

'classProperties' isn't currently enabled also implies that the JS engine support class property syntax with some configuration, maybe there is a way to make the engine accept this syntax

See this

TL;DR

To have a custom config for babel in create-react-app , you need to first eject and work on the config directly after that.

Run npm run eject , go to config/webpack.config.js , find and replace the babel-loader with test: /\\.(js|mjs|jsx|ts|tsx)$/ .

 ... { test: /\\.(js|mjs|jsx|ts|tsx)$/, include: [paths.appSrc, paths.appNodeModules], exclude: /node_modules\\/(?!react-native-modal|react-native-animatable)/, loader: require.resolve('babel-loader'), options: { customize: require.resolve( 'babel-preset-react-app/webpack-overrides' ), presets: [ "@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript", ], plugins: [ [ require.resolve('babel-plugin-named-asset-import'), { loaderMap: { svg: { ReactComponent: '@svgr/webpack?-svgo,+titleProp,+ref![path]', }, }, }, ], ['@babel/plugin-proposal-class-properties', { loose: true }], ], // This is a feature of `babel-loader` for webpack (not Babel itself). // It enables caching results in ./node_modules/.cache/babel-loader/ // directory for faster rebuilds. cacheDirectory: true, cacheCompression: isEnvProduction, compact: isEnvProduction, }, }, ... 

---

What I said is partially true, babel is not transpiling react-native-modal . And, why creating a babel.cofig.js doesn't work is, create-react-app uses a config that lives in another universe ( see this SO ).

At first I noticed there is a syntax error in your babel.config.js but building the project is not complaining anything about that. So I suspect it is not being used and come across the above SO post.

It now compiles successfully but throws some runtime error because some packages are built for mobile app and expo .

---

out of scope

One notable one is in react-native-modal .

module.exports = {
  get DeviceEventEmitter() { ... }
};
// which is approximately
export default {
  DeviceEventEmitter,
}

However, in react-native ,

presets: [
  ["@babel/preset-env", { module: 'commonjs' }],
  "@babel/preset-react",
  "@babel/preset-typescript",
],

Using named import as object destructuring is considered wrong by babel. You could workaround this by

 presets: [ ["@babel/preset-env", { module: 'commonjs' }], "@babel/preset-react", "@babel/preset-typescript", ], 

However, DeviceEventEmitter will be undefined then. Other export works fine tho.