core-js module error

[kobe990]

Version

3.5.1

Environment info

mac os 10.14.3

Steps to reproduce

vue-cli-service serve --mode development

What is expected?

run the project correctly

What is actually happening?

With useBuiltIns option, required direct setting of corejs option
98% after emitting CopyPlugin
ERROR Failed to compile with 36 errors 10:20:25
These dependencies were not found:

core-js/modules/es6.array.iterator in ./src/main.js, ./src/webapp/main.js
core-js/modules/es6.function.name in ./src/main.js
core-js/modules/es6.number.constructor in ./src/assets/js/utils.js
core-js/modules/es6.object.assign in ./src/main.js, ./src/webapp/main.js
core-js/modules/es6.object.to-string in ./src/main.js, ./src/assets/js/utils.js and 2 others
core-js/modules/es6.promise in ./src/main.js, ./src/webapp/main.js
core-js/modules/es6.regexp.match in ./src/assets/js/utils.js
core-js/modules/es6.regexp.replace in ./src/main.js, ./src/assets/js/gt.js and 3 others
core-js/modules/es6.regexp.split in ./src/assets/js/utils.js
core-js/modules/es6.regexp.to-string in ./src/main.js, ./src/assets/js/utils.js and 1 other
core-js/modules/es6.string.includes in ./src/store.js, ./src/main.js and 2 others
core-js/modules/es6.string.iterator in ./node_modules/_cache-loader@2.0.1@cache-loader/dist/cjs.js??ref--12-0!./node_modules/_babel-loader@8.0.5@babel-loader/lib!./node_modules/_cache-loader@2.0.1@cache-loader/dist/cjs.js??ref--0-0!./node_modules/_vue-loader@15.7.0@vue-loader/lib??vue-loader-options!./src/views/assets/Index.vue?vue&type=script&lang=js&
core-js/modules/es6.typed.uint8-array in ./src/assets/js/utils.js
core-js/modules/es7.array.includes in ./src/store.js, ./src/main.js and 3 others
core-js/modules/es7.promise.finally in ./src/main.js, ./src/webapp/main.js
core-js/modules/web.dom.iterable in ./node_modules/_cache-loader@2.0.1@cache-loader/dist/cjs.js??ref--12-0!./node_modules/_babel-loader@8.0.5@babel-loader/lib!./node_modules/_cache-loader@2.0.1@cache-loader/dist/cjs.js??ref--0-0!./node_modules/_vue-loader@15.7.0@vue-loader/lib??vue-loader-options!./src/views/assets/Index.vue?vue&type=script&lang=js&

[zivyangll]

This is reason: https://babeljs.io/docs/en/babel-preset-env#usebuiltins

This option adds direct references to the core-js module as bare imports. Thus core-js will be resolved relative to the file itself and needs to be accessible. You may need to specify core-js@2 as a top level dependency in your application if there isn't a core-js dependency or there are multiple versions.

So you can set: presets: [ [ "@vue/app", { useBuiltIns: "entry" } ] ].

More important, you must set polyfills in code. ref: https://cli.vuejs.org/guide/browser-compatibility.html#usebuiltins-usage

if one of your dependencies has specific requirements on polyfills, by default Babel won't be able to detect it.

[agrass-GitHub]

babel.config.js

presets: [ [ "@vue/app", { useBuiltIns: "entry" } ] ]

[kobe990]

babel.config.js

presets: [ [ "@vue/app", { useBuiltIns: "entry" } ] ]

I try this, it works. but why config like this? If config it as 'entry', maybe we need import the @babel/polyfill manually. Any change of the babel leads to this problem? I just npm update our project. confused

[Gitsifu]

babel.config.js

presets: [ [ "@vue/app", { useBuiltIns: "entry" } ] ]

I try this, it works. why?

[Gitsifu]

If don’t change it, will report the following error.why?

[kobe990]

I think the reason is that the core-js is updated to version 3, in this version it removes these file: 'core-js/modules/es6.array.iterator', but the @babel/preset-env still generate these code: import "core-js/modules/es6.array.iterator".
So It leads to the errors in the topic

[SGrondin]

It seems to be due to babel/babel#9616

I fixed it by adding "@babel/parser": "<7.4.0", to my dependencies. That forces your app 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/core@7.3.4
│ ├── @babel/parser@7.3.4  deduped
│ ├─┬ @babel/template@7.4.0
│ │ └── @babel/parser@7.4.0
│ └─┬ @babel/traverse@7.4.0
│   └── @babel/parser@7.4.0
├── @babel/parser@7.3.4
└─┬ parcel-bundler@1.11.0
  └── @babel/parser@7.3.4  deduped

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

[gd4Ark]

这是原因：https：//babeljs.io/docs/en/babel-preset-env#usebuiltins

此选项将core-js模块的直接引用添加为裸导入。因此，core-js将相对于文件本身进行解析，并且需要可访问。如果没有core-js依赖项或者有多个版本，您可能需要将core-js @ 2指定为应用程序中的顶级依赖项。

所以你可以设置：presets：[[“@ vue / app”，{useBuiltIns：“entry”}]]。

更重要的是，您必须在代码中设置polyfill。参考：https：//cli.vuejs.org/guide/browser-compatibility.html#usebuiltins-usage

如果您的某个依赖项对polyfill有特定要求，默认情况下Babel将无法检测到它。

This can solve my problem

[maxiloEmmmm]

["@babel/preset-env",{
    "corejs": { 
        "version": 3, 
        "proposals": true 
    }
}]

solve