Vue-cli: 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/[email protected]@cache-loader/dist/cjs.js??ref--12-0!./node_modules/[email protected]@babel-loader/lib!./node_modules/_cache[email protected]@cache-loader/dist/cjs.js??ref--0-0!./node_modules/[email protected]@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/[email protected]@cache-loader/dist/cjs.js??ref--12-0!./node_modules/[email protected]@babel-loader/lib!./node_modules/_cache[email protected]@cache-loader/dist/cjs.js??ref--0-0!./node_modules/[email protected]@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 https://github.com/babel/babel/pull/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/[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

[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

[hellomrbigshot]

Same question to me !

[oakromulo]

I proposed this temporary PR for this issue: https://github.com/vuejs/vue-cli/pull/3692

the best idea for now is probably to set this a package.json resolution like this:
"resolutions": { "@vue/cli-plugin-babel/**/@babel/core": "^7.0.0 <7.4.0" }

[kobe990]

yeah, if we want use core-js 3.0, we need change our babel config like this:

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

or

["@babel/preset-env",{
    "corejs": "core-js@3"
}]

as our old configuration, we didn't config the corejs version, it will adopt the corejs@2 default. But the @babel/preset-env 7.4.0 has the dependency of corejs-3.0. so it leads to these 'not found' errors. I think the @babel/preset-env also needs to add the dependency of corejs@2 to the package.json.

Another way to solve this if you don't want to change the babelrc configuration, it is to install corejs@2 at the top of our dependency. just one command at your current project: npm i corejs@2

[sodatea]

Fixed in 3.5.2

[davidlin504]

I solve it by
npm install --save core-js
note my Vue Cli version vue -V 3.9.2

[vladdou]

As same as wrote davidlin504

I solve it by
npm install --save core-js
note my Vue Cli version vue -V 3.9.2

[sam-araiza]

It looks like core js is being corrupted.

98% after emitting CopyPlugin
Dependencies were not found:

core-js/../es6.array.fill
core-js/../es6.array.find
core-js/../es6.array.for-each
core-js/../es6.array.map
core-js/../es6.regexp.match
core-js/../es6.regexp.to-string
etc ..

Node 10.16.0
vue: 2.6.10
vue/cli-service: 3.9.0

[sam-araiza]

It looks like core js is being corrupted.

98% after emitting CopyPlugin
Dependencies were not found:

core-js/../es6.array.fill
core-js/../es6.array.find
core-js/../es6.array.for-each
core-js/../es6.array.map
core-js/../es6.regexp.match
core-js/../es6.regexp.to-string
etc ..

Node 10.16.0
vue: 2.6.10
vue/cli-service: 3.9.0

Not 100% sure how I resolved this, but package-lock wasn't resolving my changed dependencies or something. npm ci or npm i wasn't working out. Had to literally copy and paste my package-lock.json from a separate working branch.

[KarmaBlackshaw]

babel.config.js

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

Thanks man!

[smelike]

this issue seems be caused by the dependency -- core-js in the package.json.

[SavkaTaras]

Solved by:

1. npm install --save core-js
2. Updated file babel.config.js:
   presets: [
   [
   '@vue/app',
   {
   useBuiltIns: 'entry'
   }
   ]
   ]

[dxc-jbeck]

The problem is the build script is looking for core-js/modules/es6.something
But all the files are in there and begin with core-js/modules/es.something

[sodatea]

@dxc-jbeck please install core-js@2 rather than 3.

[dxc-jbeck]

@sodatea thank you it's working with core-js 2.65 and this in main.js

import 'core-js'
import 'core-js/shim'
import '@babel/polyfill'

[bkarlson]

Whoever comes across this with Yarn 2 and wouldn't want to bloat their package with useBuiltIns: "entry" (still works, but do you really need ALL polyfills in your production build?), here's a recipe:

1. Add to root package.json:

  "dependenciesMeta": {
    "core-js": {
      "unplugged": true
    }
  }

1. Add to .yarnrc.yml:

packageExtensions:
  "@babel/runtime@*":
    peerDependencies:
      core-js: "*"

Re-run yarn, probably need to clean .yarn/cache, lock and pnp.js first.

See https://github.com/vuejs/vue-cli/issues/5135 for other similar scenarios related to Yarn 2.

[JulianV8]

babel.config.js

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

Para el template Light Bootstrap Dashboard de VUE, debes realizar esta configuracion en el archivo .babelrc

"useBuiltIns": "entry"

El archivo quedaria asi

{ "presets": [ [ "@vue/app", { "polyfills": ["es7.object.entries", "es6.promise"], "useBuiltIns": "entry" } ] ] }

[okboy5555]

babel.config.js

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

it works.