Parcel: Unexpected "With `useBuiltins` option, required direct setting of `corejs` option" with default configuration

Created on 19 Mar 2019  ·  46Comments  ·  Source: parcel-bundler/parcel

🐛 bug report

Calling parcel build <entry point> with all default configuration results in a warning from @babel/preset-env.

🎛 Configuration (.babelrc, package.json, cli command)

  • .babelrc:
    none
  • package.json:
{
  "name": "test",
  "version": "1.0.0",
  "license": "MIT",
  "devDependencies": {
    "parcel-bundler": "^1.12.2"
  }
}
  • CLI command: yarn run parcel build src/index.html

🤔 Expected Behavior

The build should complete with no errors or warnings

😯 Current Behavior

The build completes, but it emits the following warning:
With `useBuiltIns` option, required direct setting of `corejs` option

💁 Possible Solution

This warning appears to come from @babel/preset-env. It seems like it might be possible to avoid by specifying corejs appropriately in transforms/babel.js

🔦 Context

I'm trying to bootstrap a project which requires no extra configuration than what Parcel comes with out of the box. It would be helpful for this warning to be resolved without having to add extra non-functional Babel configuration (several attempts at configuring correctly have failed).

💻 Code Sample

The following files with the addition of the above configuration should be enough to reproduce the issue.

  • src/index.html:
<!DOCTYPE html>
<html>
  <body>
    <div id="root">test</div>
    <script src="./index.js"></script>
  </body>
</html>
  • src/index.js:
document.getElementById('root').append('more test')

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.12.2
| Node | 11.9.0
| npm/Yarn | 1.13.0
| Operating System | macOS 10.14.3

Bug babel
Source
picture tmbrwn
👍28

Most helpful comment

I'm not sure about the core-js thing. It's a warning, but people tend to freak out about warnings, and perhaps other bugs in babel 7.4 are getting conflated with this warning.

Ok, let me explain the current situation:
@babel/preset-env generates imports to core-js. Let's assume that it only generates imports to core-js@2, that it doesn't know about core-js@3. We can make this assumption because core-js@2 is the default behavior.

The fact that it generates those imports means that users need to have "core-js": "^2.0.0" in their package.json's dependencies.
Since almost every node project which uses npm already has core-js as a dependency of a dependency (it has three times the downlaods of react or of webpack), and npm hoist packages to the top when possible, so node_modules/core-js always existed even if it wasn't defined as a dependency: even if it was documented, people didn't notice that they where depending on a package which they hadn't specified.

Yesterday core-js@3 was released. If any package in your dependency tree (for example, as you noted in https://github.com/parcel-bundler/parcel/issues/2819#issuecomment-474982867, Babel), your app will have both core-js@2 and core-js@3 in your dependencies three and npm can choose which to hoist.
If it decides to hoist core-js@3, all the imports pointing to core-js@2 will be broken. It is a major version of the package, so it isn't unexpected that it breaks something.
For this reason, users must have core-js@2 in their dependencies: if they are relying on a package, it needs to be explicit or major updates will be done when any of the dependencies updates its subdependency.

Even if the necessity to npm install --save core-js has been documented since Babel 6, users didn't do it. We needed to do something to make them aware about it, so we asked them _not_ to rely on the default behavior but to be explicit about it: corejs: 2 is a way of saying "I know I'm using core-js@2". I know, the warning message doesn't explain it and we will soon update it (https://github.com/babel/babel/pull/9716).

An example of a project which relied on core-js without it being installed is angular-cli: https://github.com/angular/angular-cli/issues/13954#issuecomment-474827906

Relying on npm hoisting won't work anymore, and we need to make people aware of the presence of core-js in their project.

I don't know if parcel does analyse node_modules, but if it does the only way to proper fix this issue is to set the corejs option you pass to preset env based on what will be bundled: corejs: require("core-js/package.json").version.

Thanks for reporting the other issue, I'm looking at it.

picture nicolo-ribaudo on 20 Mar 2019
👍7

All 46 comments

Seems to be due to https://github.com/babel/babel/pull/7646#issue-178694344

My build is broken as well, thanks to Babel 7.4.0. I don't think it's a Parcel issue but I'd really like to hear what the solution is.

SGrondin picture SGrondin on 19 Mar 2019

"useBuiltIns now requires direct setting of corejs version option, without it will be used 2 by default and shown deprecation warning."
merged 3 hours ago at the time of writing.

Didn't realize the change was so recent. Looks like Babel is making a soft API change in 7.4.0. I doubt they'll turn back on that, so unfortunately I think it has become a Parcel issue.

tmbrwn picture tmbrwn on 20 Mar 2019
😕1

See this stackoverflow question for some solutions/approaches.

loopmode picture loopmode on 20 Mar 2019
❤4

See this stackoverflow question for some solutions/approaches.

I tried to lock Babel core to ~7.3 but the message still shows up

Cerlancism picture Cerlancism on 20 Mar 2019

我的 Babel 版本是 7.0.0 也是这个问题 。。。。。。

qiangxiazhanling picture qiangxiazhanling on 20 Mar 2019

Seems to be due to babel/babel#7646 (comment)

My build is broken as well, thanks to Babel 7.4.0. I don't think it's a Parcel issue but I'd really like to hear what the solution is.

I am not sure the severity of this issue, is your built really "broken" as not able run stably? Is this supposed to just a deprecation warning which should be harmless for now? I have a production project and its build is affected by this but it seems to work fine, I hope things actually are fine.

Cerlancism picture Cerlancism on 20 Mar 2019

For some reason my parcel build src/index.html is failing with:

With `useBuiltIns` option, required direct setting of `corejs` option


With `useBuiltIns` option, required direct setting of `corejs` option

×  XXXX\src\polyfills.js: Cannot resolve dependency 'core-js/modules/es6.array.copy-within'
    at Resolver.resolve (XXXX\node_modules\parcel-bundler\src\Resolver.js:71:17)

Despite installing core-js@3 as dependency of the project and using ["@babel/preset-env", {"useBuiltIns":"entry","corejs":"core-js@3"}] as suggested.

Rolled back to @babel/[email protected] for now.

Maximilianos picture Maximilianos on 20 Mar 2019

See the same issue by using "cnpm install" today, however, using "npm install" is ok for me.
今天使用"cnpm install"遇到了同样的问题，但是改用“npm install” 问题就没有了。

liuzeyafzy picture liuzeyafzy on 20 Mar 2019

I am not sure the severity of this issue, is your built really "broken" as not able run stably?

My build is broken. parcel build fails with an error, and parcel index.html fails with the same error.

It seems to be due to https://github.com/babel/babel/pull/9616

I fixed it by adding "@babel/parser": "<7.4.0", to my dependencies. That forces parcel-bundler to resolve to @babel/parser 7.3. And with that the problem is fixed. I'll revisit this in a month or two once the Babel people fix the problem.

npm ls @babel/parser
├─┬ @babel/[email protected]
│ ├── @babel/[email protected]  deduped
│ ├─┬ @babel/[email protected]
│ │ └── @babel/[email protected]
│ └─┬ @babel/[email protected]
│   └── @babel/[email protected]
├── @babel/[email protected]
└─┬ [email protected]
  └── @babel/[email protected]  deduped

Other links discussing this problem:
https://stackoverflow.com/questions/55251983/what-does-this-error-mean-with-usebuiltins-option-required-direct-setting-of
https://github.com/parcel-bundler/parcel/issues/2820
https://github.com/vuejs/vue-cli/issues/3678
https://github.com/apollographql/react-apollo/issues/2886

SGrondin picture SGrondin on 20 Mar 2019

In Babel that is just a log message, not an error. If your build is broken, it's because of something else.

nicolo-ribaudo picture nicolo-ribaudo on 20 Mar 2019

same issue here even on babel@6😠

cdll picture cdll on 20 Mar 2019

1
2
For the solution of plug-in error reporting upgraded to version 7.4.0, personally testing the following configuration can be successful!
1、
npm i -g core-js
2、
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: {
version: 3,
proposals: true
}
}
PS:
'@babel/plugin-transform-runtime'can't have the corejs configuration option, although the source code in its version 7.4.0 has this option, but setting it will make an error!!! Use the'@babel/preset-env'plug-in's corejs configuration options!!!

LP1994 picture LP1994 on 20 Mar 2019

https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md

LP1994 picture LP1994 on 20 Mar 2019

'@babel/plugin-transform-runtime'can't have the corejs configuration option, although the source code in its version 7.4.0 has this option, but setting it will make an error!!!

Can you show an example which explains the problem? It should work.

@Maximilianos Doesn't Babel 7.4.0 work if you do not upgrade to core-js@3?

nicolo-ribaudo picture nicolo-ribaudo on 20 Mar 2019

@nicolo-ribaudo perhaps because babel-preset-env explicitly depends on core-js 3 itself?

https://github.com/babel/babel/blob/master/packages/babel-preset-env/package.json#L58

devongovett picture devongovett on 20 Mar 2019

It shouldn't be a problem: the node_modules folder should end up being similar to this:

- @babel/[email protected]
  - [email protected]
- core-js@2

And the user code will end up loading core-js@2.

Anyway, maybe it's possible to make core-js a devDependency of core-js-compat instead of a dependency. cc @zloirock

nicolo-ribaudo picture nicolo-ribaudo on 20 Mar 2019

So I tried both

  1. locking "@babel/parser": "<7.4.0
  2. Solution mentioned above
    Neither are working.
    I assume others are having the same result can anyone confirm?
robGetsTheJobDone picture robGetsTheJobDone on 20 Mar 2019

Did you try to npm install --save core-js@2?

nicolo-ribaudo picture nicolo-ribaudo on 20 Mar 2019
❤1

@nicolo-ribaudo yes this is my babelrc file
{ "presets": [ ["@babel/preset-env", { "useBuiltIns": "entry", "corejs": "core-js@2" }] ] }
Still no luck :(

robGetsTheJobDone picture robGetsTheJobDone on 20 Mar 2019

Unfortunately, that won't work since Parcel overrides the preset-env config with its own. And we have no way of knowing what corejs version to use. This isn't something users should need to worry about anyway. I think the warning needs to be removed. Just use core-js 2 unless it is specified.

devongovett picture devongovett on 20 Mar 2019

(btw this overriding behavior is bad and it's going away in parcel 2, but it's what we have right now)

devongovett picture devongovett on 20 Mar 2019
👍1

Its not just a warning in my case even when i remove the babelrc file with core-js@2 installed i break on building :(
` /Users/rob/Documents/GitHub/h1/node_modules/history/esm/history.js:904:9: Export 'createBrowserHistory' is not defined (904:9)
902 | }
903 |

904 | export { createBrowserHistory, createHashHistory, createMemoryHistory, createLocation, locationsAreEqual, parsePath, createPath };`

robGetsTheJobDone picture robGetsTheJobDone on 20 Mar 2019

I believe that is probably a separate issue with babel 7.4, unrelated to the warning.

devongovett picture devongovett on 20 Mar 2019
👍1

So I tried to force @babel/parser": "<7.4.0 without any luck. Any ideas of a workaround that actually works ?

robGetsTheJobDone picture robGetsTheJobDone on 20 Mar 2019

Probably https://github.com/babel/babel/pull/9589

devongovett picture devongovett on 20 Mar 2019

@devongovett Thanks for your help! I am not experienced with the inner workings of babel or parcel I played around with web-pack today and had no issues building my app. I prefer parcel and love how easy it is to set up. Do you think it would be a wise choice to switch back over to webpack until this issue is resolved ?

robGetsTheJobDone picture robGetsTheJobDone on 20 Mar 2019

This isn't an issue with parcel, it's a bug in babel. You'd have the same issues with webpack.

devongovett picture devongovett on 20 Mar 2019

I'm trying to write a detailed explaination of the current situation, but it will vary depending on what you think that the bug is: is the problem that Babel generates a warning, that it generates imports to core-js@2 by default, or that there is core-js@3 in the node_modules of some users?

nicolo-ribaudo picture nicolo-ribaudo on 20 Mar 2019

I downgraded all babel packages to < 7.4 in https://github.com/parcel-bundler/parcel/commit/53c09b3cfa3a14bc0dc9875950b31e43d4a9a2e4 while we get this figured out. Published parcel v1.12.3.

devongovett picture devongovett on 20 Mar 2019
👍4 ❤3

I'm not sure about the core-js thing. It's a warning, but people tend to freak out about warnings, and perhaps other bugs in babel 7.4 are getting conflated with this warning.

I was more worried about other bugs in babel 7.4 like the undefined exports issue mentioned above. Seems to be happening with many commonly used libraries, e.g. history, and react-intl. I'll try to file an issue if there isn't one already for that.

devongovett picture devongovett on 20 Mar 2019

https://github.com/babel/babel/issues/9720

devongovett picture devongovett on 20 Mar 2019
❤1

babel/babel#9720

@devongovett Isn't that rather what was reported here: https://github.com/parcel-bundler/parcel/issues/2820 ?
Seems related to strictMode: false

mischnic picture mischnic on 20 Mar 2019

yep, same issue.

devongovett picture devongovett on 20 Mar 2019

I'm not sure about the core-js thing. It's a warning, but people tend to freak out about warnings, and perhaps other bugs in babel 7.4 are getting conflated with this warning.

Ok, let me explain the current situation:
@babel/preset-env generates imports to core-js. Let's assume that it only generates imports to core-js@2, that it doesn't know about core-js@3. We can make this assumption because core-js@2 is the default behavior.

The fact that it generates those imports means that users need to have "core-js": "^2.0.0" in their package.json's dependencies.
Since almost every node project which uses npm already has core-js as a dependency of a dependency (it has three times the downlaods of react or of webpack), and npm hoist packages to the top when possible, so node_modules/core-js always existed even if it wasn't defined as a dependency: even if it was documented, people didn't notice that they where depending on a package which they hadn't specified.

Yesterday core-js@3 was released. If any package in your dependency tree (for example, as you noted in https://github.com/parcel-bundler/parcel/issues/2819#issuecomment-474982867, Babel), your app will have both core-js@2 and core-js@3 in your dependencies three and npm can choose which to hoist.
If it decides to hoist core-js@3, all the imports pointing to core-js@2 will be broken. It is a major version of the package, so it isn't unexpected that it breaks something.
For this reason, users must have core-js@2 in their dependencies: if they are relying on a package, it needs to be explicit or major updates will be done when any of the dependencies updates its subdependency.

Even if the necessity to npm install --save core-js has been documented since Babel 6, users didn't do it. We needed to do something to make them aware about it, so we asked them _not_ to rely on the default behavior but to be explicit about it: corejs: 2 is a way of saying "I know I'm using core-js@2". I know, the warning message doesn't explain it and we will soon update it (https://github.com/babel/babel/pull/9716).

An example of a project which relied on core-js without it being installed is angular-cli: https://github.com/angular/angular-cli/issues/13954#issuecomment-474827906

Relying on npm hoisting won't work anymore, and we need to make people aware of the presence of core-js in their project.

I don't know if parcel does analyse node_modules, but if it does the only way to proper fix this issue is to set the corejs option you pass to preset env based on what will be bundled: corejs: require("core-js/package.json").version.

Thanks for reporting the other issue, I'm looking at it.

nicolo-ribaudo picture nicolo-ribaudo on 20 Mar 2019
👍7

Also, 53c09b3 will only work until some other dependency will depend on core-js@3. As you can see in https://github.com/parcel-bundler/parcel/issues/2819#issuecomment-474898805, it's not a problem specific of v7.4.

nicolo-ribaudo picture nicolo-ribaudo on 20 Mar 2019
👀2

'@babel/plugin-transform-runtime'can't have the corejs configuration option, although the source code in its version 7.4.0 has this option, but setting it will make an error!!!

Can you show an example which explains the problem? It should work.

@Maximilianos Doesn't Babel 7.4.0 work if you do not upgrade to core-js@3?

I only installed version 3.0.0 of "core-js".(npm i -g core-js)
No "core-js@2"!!!

My version of "core-js" in "package.json":
"core-js": "^3.0.0" ,
"core-js-compat": "^3.0.0" ,
"core-js-pure": "^3.0.0"

and, My Babel configuration has the following information:
'@babel/preset-env',
{
targets: {
browsers: [
'>= 10%',
'cover 95%',
'since 2017-01-01',
'iOS >= 10',
'Safari >= 10',
'Edge >= 16',
'Opera >= 47',
'Android >= 56',
'Chrome >= 56',
'ChromeAndroid >= 56',
'Firefox ESR',
'Firefox >= 54',
'FirefoxAndroid >= 54',
'last 2 Baidu major versions',
'last 2 OperaMini major versions',
'last 2 QQAndroid major versions',
'last 2 UCAndroid major versions',
'last 2 OperaMobile major versions',
'last 2 Samsung major versions',
'last 2 BlackBerry major versions',
'last 2 major versions',
'last 2 versions',
'not ie <= 11',
'not ie_mob <= 11',
'not dead'
],
safari: 'tp',
esmodules: false
},
modules: false,
spec: false,
loose: true,
shippedProposals: true,
useBuiltIns: 'usage'
}
'@babel/plugin-transform-runtime',
{
helpers: true,
regenerator: true,
useESModules: true
}

When the @babel/preset-env and @babel/plugin-transform-runtime options are set the "corejs" option, the value is:
corejs: {
version: 3,
proposals: true
}
Report wrong!!!
The error message is as follows:
error1
1.txt

If only the "corejs" option of "@babel/plugin-transform-runtime" is set, and the value is:
corejs: {
version: 3,
proposals: true
}
And there is no "corejs" option for "@babel/preset-env"!!!
However, the value of the "useBuiltIns" option of "@babel/preset-env" is "usage".
It will go wrong.!!!
The error message is as follows:
只启用transform1
只启用transform2
只启用transform.txt

But if me just set the "corejs" option of "@babel/preset-env", the value is:
corejs: {
version: 3,
proposals: true
}
No "corejs" option is set for "@babel/plugin-transform-runtime"!
Then my project will compile successfully!!!

LP1994 picture LP1994 on 21 Mar 2019
👍2

If you want to use core-js with Babel/runtime you need to install @babel/runtime-corejs2 or @babel/runtime-corejs3.

Anyway (at everyone) this issue is turning in a Babel-related support not related to Parcel. Please ask these questions in the Babel repo.

nicolo-ribaudo picture nicolo-ribaudo on 21 Mar 2019

If you want to use core-js with Babel/runtime you need to install @babel/runtime-corejs2 or @babel/runtime-corejs3.

Anyway (at everyone) this issue is turning in a Babel-related support not related to Parcel. Please ask these questions in the Babel repo.

Exactly!!!
I went to my "node_modules" folder and found that there was only "@babel/runtime-core js2" and no "@babel/runtime-core js3"!!!
I'll try it now!!!
Thank you for your answer!!!
I am a person who likes to use the latest babel. As a result, many problems have been encountered before due to the changes in the new version, but solutions have been found on "GitHub" and "Stack Overflow" and "Babel official website".

LP1994 picture LP1994 on 21 Mar 2019

使用npm start报错
image
但parcel index.html又正常。。。
image

ewqazxc picture ewqazxc on 25 Mar 2019

I just use these.
you can also try update parcel,it maybe deal this bug
image

ewqazxc picture ewqazxc on 24 Apr 2019
👍1

@devongovett With the next release switching back to the latest Babel, is the corejs situation resolved now?

mischnic picture mischnic on 9 May 2019

Confirmed that this issue is solved with 1.12.3 of parcel

tmbrwn picture tmbrwn on 16 May 2019
👍2 🎉1

Sorry, just realized that 1.12.3 only rolled back the version of babel. I think I should keep this open until there is a definitive solution.

tmbrwn picture tmbrwn on 16 May 2019
👍1

1
2
For the solution of plug-in error reporting upgraded to version 7.4.0, personally testing the following configuration can be successful!
1、
npm i -g core-js
2、
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: {
version: 3,
proposals: true
}
}
PS:
'@babel/plugin-transform-runtime'can't have the corejs configuration option, although the source code in its version 7.4.0 has this option, but setting it will make an error!!! Use the'@babel/preset-env'plug-in's corejs configuration options!!!

babel.config.js吗

AK47-dadada picture AK47-dadada on 27 May 2019

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.

github-actions[bot] picture github-actions[bot] on 18 Jan 2020

Upgrading made this go away:

    "parcel": "^1.12.4",

{
    "presets": [
        ["@babel/preset-env", {
            "useBuiltIns": "usage",
            "corejs": "3"
        }]
    ],
    "plugins": [
        ["@babel/plugin-proposal-class-properties", {}]
    ]
}
airtonix picture airtonix on 28 Jun 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

bbugh picture bbugh  ·  84Comments
devongovett picture devongovett  ·  49Comments
Znarkus picture Znarkus  ·  38Comments
natqe picture natqe  ·  40Comments
devcati picture devcati  ·  45Comments