question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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 babel-preset-react-app@3.1.1 and babel@6, but when I updated to babel-preset-react-app@5.0.3 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?

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:1
  • Comments:5 (4 by maintainers)

github_iconTop GitHub Comments

14reactions
simonedavicocommented, 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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

babel/preset-react
This preset always includes the following plugins: ... to classic // "importSource": "custom-jsx-library" // defaults to react (only in automatic runtime) ...
Read more >
Creating a Component Library for React with Babel 7 and Jest
Learn to create a React component library with Babel 7 and Jest. This tutorial will walk you through setting up a new package...
Read more >
babel-preset-react-app-babel-7 - npm
Babel preset used by Create React App. Latest version: 4.0.2-0, last published: 4 years ago. Start using babel-preset-react-app-babel-7 in ...
Read more >
Babel-preset-react-app - npm.io
Check Babel-preset-react-app 10.0.1 package - Last release 10.0.1 with MIT licence at our NPM packages aggregator and search engine.
Read more >
0 - Stack Overflow
My goal: I am creating a React component library in JavaScript with Webpack 5 and Babel 7 that is published to npm.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found