Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

babel-preset-react-app, babel 7 for component library #5443

Closed
bogdansoare opened this issue Oct 15, 2018 · 5 comments
Closed

babel-preset-react-app, babel 7 for component library #5443

bogdansoare opened this issue Oct 15, 2018 · 5 comments

Comments

@bogdansoare
Copy link
Contributor

bogdansoare commented Oct 15, 2018

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
Copy link

simonedavico commented Oct 16, 2018

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
Copy link
Contributor Author

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

@iddan
Copy link
Contributor

iddan commented Nov 17, 2018

Can absoluteRuntime appear in docs?

@Timer
Copy link
Contributor

Timer commented Nov 17, 2018

Send a PR. 😄

@iddan
Copy link
Contributor

iddan commented Nov 17, 2018

Done #5847

@lock lock bot locked and limited conversation to collaborators Jan 9, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants