Create-react-app: babel-preset-react-app, babel 7 for component library

[bogdansoare]

I'm using babel-preset-react-app to transpile a npm package with just babel that I'm consuming in a CRA app.

It worked well with [email protected] and babel@6, but when I updated to [email protected] and babel@7 the output build contained relative imports for babel stuff instead on inlining the functions

Before upgrade:

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

import React, { Component } from 'react';

After upgrade:

import _objectWithoutProperties from "/Users/bogdansoare/Sites/platform_shared/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties";
import _classCallCheck from "/Users/bogdansoare/Sites/platform_shared/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "/Users/bogdansoare/Sites/platform_shared/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/createClass";
import React, { Component } from 'react';

The build command that I'm using is NODE_ENV=production babel src --out-dir build --copy-files

Am I doing something wrong with the new version of babel-preset-react-app ? Or it's a config issue from babel?

[simonedavico]

We are releasing a component library using the same method and struggled with this for a few hours as well. We are using the react-app preset in our .babelrc.

We solved the issue by configuring the react-app preset to avoid generating absolute paths for @babel/runtime, like this:

"presets:" [
  [ "react-app", { "absoluteRuntime": false } ]
]

This requires having @babel/runtime as a dependency in our package.json.

[bogdansoare]

@simonedavico awesome, thank you very much for this explanation 🙏

[iddan]

Can absoluteRuntime appear in docs?

[Timer]

Send a PR. 😄

[iddan]

Done https://github.com/facebook/create-react-app/pull/5847