Trying to configure Babel in a monorepo project - 'classProperties' isn't currently enabled. How to set up Babel in a monorepo project?

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?

seanplwong · Answer 1 · 2019-09-09T17:35:07.687

~~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.

// react-native-modal
import { DeviceEventEmitter } from 'react-native';

However, in react-native,

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

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.

The problem is related to this one: https://stackoverflow.com/questions/52237855/support-for-the-experimental-syntax-classproperties-isnt-currently-enabled — Siqueira, Sep 07 '19 at 00:22
Oh, seems your `node_modules` is in `seriers4` and your project babel config have the roots set to `.` and `packages/*`, thus `series4/node_module` will not be considered by babel — seanplwong, Sep 07 '19 at 04:40
i think you need to have `ignore: [/node_modules/(?!react-native-modal)/]` to instruct babel to transpile `react-native-modal`. also you might need to remove `seriers4/web/.babelrc`, this might be getting into the way of babel — seanplwong, Sep 07 '19 at 17:09
btw, i noticed `seriers4/package.json` is the same as `seriers4/packages/common/package.json` — seanplwong, Sep 07 '19 at 17:11
if you could upload it to a github repo, i might be able to check it out when i have time — seanplwong, Sep 07 '19 at 17:11
I tried to make a project with a single package, and the error persists ... pehaps it is a conflict caused by the react-native-web. — Siqueira, Sep 07 '19 at 20:22

Trying to configure Babel in a monorepo project - 'classProperties' isn't currently enabled. How to set up Babel in a monorepo project?

1 Answers1

TL;DR