Vue-cli: Build fails with @babel/preset-env 7.4.0

Created on 19 Mar 2019 · 38Comments · Source: vuejs/vue-cli

This has been fixed in @babel/[email protected]. You will need to delete yarn.lock/package-lock.json and run yarn/npm i again.

Version

3.5.1

Environment info

Environment Info:

  System:
    OS: Linux 4.18 Debian GNU/Linux 9 (stretch) 9 (stretch)
    CPU: (12) x64 Intel(R) Xeon(R) CPU D-1531 @ 2.20GHz
  Binaries:
    Node: 11.12.0 - /usr/bin/node
    Yarn: 1.15.2 - /usr/bin/yarn
    npm: 6.7.0 - /usr/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0-beta.2
    @vue/babel-plugin-transform-vue-jsx:  1.0.0-beta.2
    @vue/babel-preset-app:  3.5.1
    @vue/babel-preset-jsx:  1.0.0-beta.2
    @vue/babel-sugar-functional-vue:  1.0.0-beta.2
    @vue/babel-sugar-inject-h:  1.0.0-beta.2
    @vue/babel-sugar-v-model:  1.0.0-beta.2
    @vue/babel-sugar-v-on:  1.0.0-beta.2
    @vue/cli-overlay:  3.5.1
    @vue/cli-plugin-babel: ^3.5.0 => 3.5.1
    @vue/cli-plugin-eslint: ^3.5.0 => 3.5.1
    @vue/cli-service: ^3.5.0 => 3.5.1
    @vue/cli-shared-utils:  3.5.1
    @vue/component-compiler-utils:  2.6.0
    @vue/preload-webpack-plugin:  1.1.0
    @vue/web-component-wrapper:  1.2.0
    eslint-plugin-vue: ^5.0.0 => 5.2.2
    vue: ^2.6.6 => 2.6.9
    vue-eslint-parser:  5.0.0
    vue-hot-reload-api:  2.3.3
    vue-loader:  15.7.0
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.5.21 => 2.6.9
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

yarn global add @vue/cli
vue create -d vue-cli-test
cd vue-cli-test
yarn build

What is expected?

A successful build.

What is actually happening?

The build fails because @babel/preset-env/data/built-ins.json can't be found. It seems this file doesn't exist anymore as of @babel/preset-env 7.4.0.

Source

AegirLeet

👍12

Most helpful comment

We just released @babel/[email protected], which should fix the issue.

nicolo-ribaudo on 20 Mar 2019

👍4 ❤3 🎉3

All 38 comments

AegirLeet on 19 Mar 2019

👍1

I have the same issue. Full error output looks like

 ERROR  Failed to compile with 1 errors                                                                         01:04:29

 error  in ./src/main.js

Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: [BABEL] /home/bob/git/misc/test/src/main.js: Cannot find module '@babel/preset-env/data/built-ins.json' (While processing: "/home/bob/git/misc/test/node_modules/@vue/babel-preset-app/index.js")
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at getPolyfills (/home/bob/git/misc/test/node_modules/@vue/babel-preset-app/index.js:18:24)
    at module.exports (/home/bob/git/misc/test/node_modules/@vue/babel-preset-app/index.js:105:17)
    at loadDescriptor (/home/bob/git/misc/test/node_modules/@babel/core/lib/config/full.js:165:14)
    at cachedFunction (/home/bob/git/misc/test/node_modules/@babel/core/lib/config/caching.js:33:19)
    at loadPresetDescriptor (/home/bob/git/misc/test/node_modules/@babel/core/lib/config/full.js:235:63)
    at config.presets.reduce (/home/bob/git/misc/test/node_modules/@babel/core/lib/config/full.js:77:21)
    at Array.reduce (<anonymous>)
    at recurseDescriptors (/home/bob/git/misc/test/node_modules/@babel/core/lib/config/full.js:74:38)
    at loadFullConfig (/home/bob/git/misc/test/node_modules/@babel/core/lib/config/full.js:108:6)
    at process.nextTick (/home/bob/git/misc/test/node_modules/@babel/core/lib/transform.js:28:33)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)

 @ multi (webpack)-dev-server/client?http://192.168.1.182:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

BobNobrain on 19 Mar 2019

👍7

This PR was merged 2 hours ago & includes a commit that deleted the built-ins.json file.

PR: https://github.com/babel/babel/pull/7646
Commit: https://github.com/babel/babel/commit/3303b079c596e56909adff4b834f098f5f1d8e2a#diff-0ec74dc48ab9f3209ac7e2816fb79b21

EDIT: Oh sorry, @AegirLeet already mentioned the commit 🤐

mikerogne on 19 Mar 2019

isPluginRequired has moved and the built-ins have changed to corejs2-built-ins.json. The following update resolves the issue:

const { isPluginRequired } = require('@babel/preset-env/lib/filter-items')
const builtInsList = require('@babel/preset-env/data/corejs2-built-ins.json')

Edit: I forgot to specify the file @vue/babel-preset-app/index.js

perkola on 19 Mar 2019

👍4

This PR was merged 2 hours ago & includes a commit that deleted the built-ins.json file.

PR: babel/babel#7646
Commit: babel/babel@3303b07#diff-0ec74dc48ab9f3209ac7e2816fb79b21

EDIT: Oh sorry, @AegirLeet already mentioned the commit 🤐

A PR has been open bringing back isPluginRequired but won't fix the built-ins.json issue.
https://github.com/babel/babel/pull/9709
Issue related: https://github.com/babel/babel/issues/9707

ajanssens on 19 Mar 2019

👍2

In the meantime adding "@babel/preset-env": "7.3.4", to your package.json should do the trick.

kculmback on 19 Mar 2019

👍5

In the meantime adding "@babel/preset-env": "7.3.4", to your package.json should do the trick.

Can confirm, does work! :)

mikerogne on 19 Mar 2019

👍2

I created a quick PR #3673 but I'm not sure if is is an adequate solution.

perkola on 19 Mar 2019

In the meantime adding "@babel/preset-env": "7.3.4", to your package.json should do the trick.

Just done a fresh vue create, added this to the dev depdendencies, but still getting:

isPluginRequired is not a function - any ideas?

samdjstevens on 19 Mar 2019

👍1

Ok, isPluginRequired was just merged in https://github.com/babel/babel/pull/9709, but built-ins file was not

BobNobrain on 19 Mar 2019

🎉1

Could anyone try to

Clone the Babel repo
Checkout https://github.com/babel/babel/pull/9711
Run make bootstrap (it needs yarn)
Symlink packages/babel-preset-env/ in the node_modules of a broken vue project, so that vue-cli will pick it up
Check if that PR fixes the issue?

nicolo-ribaudo on 19 Mar 2019

@nicolo-ribaudo Yeah, that seems to fix the issue.

AegirLeet on 20 Mar 2019

👍1

On the broken repo I added "@babel/preset-env": "^7.3.4", but it did not help.

❯❯❯ yarn why @babel/preset-env                                 master ◼
yarn why v1.13.0
[1/4] 🤔  Why do we have the module "@babel/preset-env"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "@babel/[email protected]"
info Has been hoisted to "@babel/preset-env"
info Reasons this module exists
   - Specified in "devDependencies"
   - Hoisted from "@vue#cli-plugin-babel#@vue#babel-preset-app#@babel#preset-env"
info Disk size without dependencies: "276KB"
info Disk size with unique dependencies: "9.48MB"
info Disk size with transitive dependencies: "38.4MB"
info Number of shared dependencies: 76
✨  Done in 0.90s.

stevenroussey-privicy on 20 Mar 2019

We just released @babel/[email protected], which should fix the issue.

nicolo-ribaudo on 20 Mar 2019

👍4 ❤3 🎉3

Can confirm @babel/[email protected] fixes this.

AegirLeet on 20 Mar 2019

No I get the other error:

Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: [BABEL] ./src/main.js: isPluginRequired 
is not a function (While processing: "./node_modules/@vue/babel-preset-app/index.js")

stevenroussey-privicy on 20 Mar 2019

👍1

What does npx nls why @babel/preset-env say?

nicolo-ribaudo on 20 Mar 2019

❯❯❯ npx nls why @babel/preset-env                                                                                                                                                master ◼
npx: installed 8 in 2.742s

  Who required @babel/preset-env:

  project > @babel/preset-env@^7.4.1
  project > @vue/cli-plugin-babel > @vue/babel-preset-app > @babel/preset-env@^7.0.0

stevenroussey-privicy on 20 Mar 2019

❯❯❯ yarn why @babel/preset-env                                                                                                                                                   master ◼
yarn why v1.13.0
[1/4] 🤔  Why do we have the module "@babel/preset-env"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "@babel/[email protected]"
info Has been hoisted to "@babel/preset-env"
info This module exists because it's specified in "devDependencies".
info Disk size without dependencies: "280KB"
info Disk size with unique dependencies: "9.48MB"
info Disk size with transitive dependencies: "38.41MB"
info Number of shared dependencies: 76
=> Found "@vue/babel-preset-app#@babel/[email protected]"
info This module exists because "@vue#cli-plugin-babel#@vue#babel-preset-app" depends on it.
info Disk size without dependencies: "276KB"
info Disk size with unique dependencies: "9.48MB"
info Disk size with transitive dependencies: "38.4MB"
info Number of shared dependencies: 76
✨  Done in 1.12s.

stevenroussey-privicy on 20 Mar 2019

@vue/babel-preset-app still uses @babel/[email protected] in your node_modules. I suggest deleting node_modules and running yarn again.

nicolo-ribaudo on 20 Mar 2019

No change. :/

stevenroussey-privicy on 20 Mar 2019

Does yarn why @babel/preset-env print the same thing?

nicolo-ribaudo on 20 Mar 2019

Yes

stevenroussey-privicy on 20 Mar 2019

I had to delete yarn.lock. You may be able to find the reference to 7.4.0 in the lockfile as well and remove that manually.

andreyrd on 20 Mar 2019

👍4

@AegirLeet
Could you edit the original issue mentioning that this issue has been fixed in @babel/[email protected] and that people can fix it by deleting yarn.lock/package-lock.json and running yarn/npm i again?

nicolo-ribaudo on 20 Mar 2019

OK, I am working again. :)

One thing I noticed was:

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

stevenroussey-privicy on 20 Mar 2019

👍3 ❤2 🎉1

@nicolo-ribaudo I've added a note at the top.

AegirLeet on 20 Mar 2019

👍3 ❤1 🎉1

@stevenroussey-desiclabs Yeah, we had to introduce a deprecation warning to prevent people from accidentally generating imports to core-js@2 with preset-env while having core-js@3 (released today) in their node_modules.
You can ignore it for now, but if anyone wants to open a PR to this repo adding that option to @babel/preset-env and upgrading to ^7.4.1 it would be :top: (cc @perkola since you wrote the original PR).

nicolo-ribaudo on 20 Mar 2019

Should @babel/core@^7.0.0 also be added? If I just add @babel/[email protected] to devDependencies I get a lot of has unmet peer dependency "@babel/core@^7.0.0-0". warnings.

dustinmichels on 20 Mar 2019

You don't need to add @babel/[email protected] to your devDeps, you just need to delete node_modules/lockfile and re-run yarn or npm i

nicolo-ribaudo on 20 Mar 2019

@nicolo-ribaudo I created a new PR with the correct built-ins path and a dependency bump to 7.4.1, see #3674.

Edit: I'm not sure why the build is failing on my PR. I have no more time on hand so if anyone wants to continue, feel free.

perkola on 20 Mar 2019

I guess change these lines?

https://github.com/vuejs/vue-cli/blob/dev/package.json#L80 (to 7.4.1)
https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/babel-preset-app/index.js#L157 (change the 2 to a 3)

stevenroussey-privicy on 20 Mar 2019

Oh, and https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js#L18 too?

sroussey on 20 Mar 2019

2 is fine (I don't know this project well enough to say if updating to 3 would be a breaking change). You need to copy that line to envOptions.

nicolo-ribaudo on 20 Mar 2019

OK, I am working again. :)

One thing I noticed was:
With `useBuiltIns` option, required direct setting of `corejs` option

I do think you did something right.
I changed useBuiltIns to false and manually import "@babel/polyfill" and it finally works.
I think something's going wrong with useBuiltIns: 'usage'. It's trying to resolve the code and import core-js one-by-one. But things go wrong with @babel/[email protected] when working with [email protected], it resolves dependencies incorrectly, which gives us some Module not found errors.

LiuJi-Jim on 20 Mar 2019

If you are using core-js@3, you need to pass the corejs: 3 option to the preset-env package. By default it uses core-js@2, like it did in previous releases (but now it warms if you don't set corejs: 2).

nicolo-ribaudo on 20 Mar 2019

Hi,

I just ran into this very same issue.

I have the 3.5.3 cli.

According to the release notes that version fixes these issues. Not so much in my experience :(

Now, despite a range of solutions that have been posted here, I actually have no clue how i can fix this.. I have installed the cli with:
npm i -g @vue/cli

As per most guides on how to use vue (have it installed globally). So what should i change now - and where? - to get this working?

Thank you :)

markg85 on 30 Mar 2019

@markg85

make sure the local @vue/cli-plugin-babel dependency in your project is the latest version
if that doesn't help, try to run npm install --save core-js@2 in the project root.