Vue-cli: Please update babel dependencies.

Created on 28 Aug 2018  路  23Comments  路  Source: vuejs/vue-cli

What problem does this feature solve?

The official babel 7.0.0 has been released, but the version used by @vue/babel-preset-app is 'beta.47'.

Thanks for your efforts to create such a great framework.

What does the proposed API look like?

Update babel dependencies' version from '7.0.0-beta.47' to '7.0.0'.

enhancement intend to implement babel

Most helpful comment

@LinusBorg seems the v2.2.0 release support both babel 6 and 7 already, according to this comment https://github.com/airbnb/babel-plugin-dynamic-import-node/pull/64#issuecomment-428011905

All 23 comments

@634750802 Shouldn't "babel-core" deps also be changed to "@babel/core"?

@corbinu Which package.json file? In packages/@vue/babel-preset-app/package.json there is no "babel-core".

it is used a few places including the main package.json and the jest generator

The main "babel-core" dep is under version 7.0.0-bridge. I think this may be a feature.

Yes as in it was the "bridge" until 7.0.0 was released ... @babel/core replaces it.

screen shot 2018-08-28 at 8 52 54 pm

I'm not sure about what the bridge used for. Does it affect the babel compiler? I found another '@babel/core' dep in '@vue/cli-plugin-babel' which I think is the dep that babel used in fact.

# yarn.lock
jest-config@^23.5.0:
  version "23.5.0"
  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-23.5.0.tgz#3770fba03f7507ee15f3b8867c742e48f31a9773"
  dependencies:
    babel-core "^6.0.0"
    babel-jest "^23.4.2"
    chalk "^2.0.1"
    glob "^7.1.1"
    jest-environment-jsdom "^23.4.0"
    jest-environment-node "^23.4.0"
    jest-get-type "^22.1.0"
    jest-jasmine2 "^23.5.0"
    jest-regex-util "^23.3.0"
    jest-resolve "^23.5.0"
    jest-util "^23.4.0"
    jest-validate "^23.5.0"
    micromatch "^2.3.11"
    pretty-format "^23.5.0"

Maybe it is used for jest, which depends on babel 6. Should I upgrade jest dep in this issue or create a new one?

Needs help, It's beyond my ability.

ok no worries

jest needs [email protected] to work with @babel/core@^7.0.0. I believe the reason is that jest still imports babel core as babel-core, so the "bridge" is meant to force @babel/core to be imported.

Jest itself is ok with the bridge, but we need this PR to be merged:

https://github.com/airbnb/babel-plugin-dynamic-import-node/pull/64

As this plugin is still using babel 6

@LinusBorg seems the v2.2.0 release support both babel 6 and 7 already, according to this comment https://github.com/airbnb/babel-plugin-dynamic-import-node/pull/64#issuecomment-428011905

is this fixed? can somebody told me what to do?
currently i have
dependencies: { "@babel/core": "^7.1.2", }
and
devDependencies: { "babel-core": "7.0.0-bridge.0", "babel-jest": "^23.0.1", }
and a lot more @babel plugin. but now each time i do npm isntall it says @babel/{plugins} requires a peer of @babel/[email protected] but none is installed.

i am confused, should i downgrade it to @babel/core 7.0.0-beta.47 ? or can i do something?

I use
"@vue/cli-plugin-babel": "^3.0.1",
"@vue/cli-plugin-eslint": "^3.0.3",
"@vue/cli-plugin-unit-jest": "^3.0.1",
"@vue/cli-service": "^3.0.1",
"@vue/eslint-config-airbnb": "^3.0.3",
"@vue/test-utils": "^1.0.0-beta.20",

the reason i want to know this was, bcs i failed to run the jest, and i tried to update this and that, but i still cant make it work

@rgalaxy You need to upgrade those babel plugins.

@vikr01 hi vikr thanks for the reply, i already try to update babel plugins, but it still show the same, for instance
i upgrade @babel/preset-env but it still show the message @babel/[email protected] requires a peer of @babel/[email protected] but none is installed. You must install peer dependencies yourself.

i dont understand, is it because there is a hidden plugin somewhere? and what's weird lot of the dependencies is not even ont package.json devdependencies. is it bcs vue cli 3 isntall it somewhere? even without showing on package.json?

@rgalaxy It's a dependency of @vue/cli-plugin-babel. This is gonna be fixed in the next release.
Maybe the errors are due to the "@babel/core": "^7.1.2" in the package.json suppressed dependency hoisting so for now you can remove this field to see if it works.

@sodatea hi sodat, thanks for the reply, when you say 'This is gonna be fixed in the next release', it means i need to update my vue cli version and then reinstall? or will it update all the project inside and able to fix also the problems?

and i tried to remove all the @babel/ from my package.json, remove package-lock.json and run npm install, and.... guess what is still gaves me the errors..
and i can see this line [email protected] requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
i am so ultra mega ultimately confused, i tried to create another vue-cli project and it works normally (without all the @babel/ thing)

@rgalaxy Are you able to create a repo that reproduces the issue? Just with all babel dependencies you had installed.

i am not sure, can you suggest me where i can do this? @vikr01

I'm experiencing the same problem. @vikr01, if you are wanting an example you could use this package.json.

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:e2e": "vue-cli-service test:e2e",
    "test:unit": "vue-cli-service test:unit"
  },
  "dependencies": {
    "register-service-worker": "^1.0.0",
    "vue": "^2.5.17",
    "vue-class-component": "^6.0.0",
    "vue-property-decorator": "^7.0.0",
    "vue-router": "^3.0.1",
    "vuetify": "^1.3.0",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@cypress/webpack-preprocessor": "^3.0.0",
    "@types/jest": "^23.1.4",
    "@vue/cli-plugin-babel": "^3.0.5",
    "@vue/cli-plugin-e2e-cypress": "^3.0.5",
    "@vue/cli-plugin-eslint": "^3.0.5",
    "@vue/cli-plugin-pwa": "^3.0.5",
    "@vue/cli-plugin-typescript": "^3.0.5",
    "@vue/cli-plugin-unit-jest": "^3.0.5",
    "@vue/cli-service": "^3.0.5",
    "@vue/eslint-config-prettier": "^3.0.5",
    "@vue/eslint-config-typescript": "^3.0.5",
    "@vue/test-utils": "^1.0.0-beta.20",
    "babel-core": "7.0.0-bridge.0",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.0.1",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1",
    "ts-jest": "^23.0.0",
    "typescript": "^3.0.0",
    "vue-cli-plugin-vuetify": "^0.4.4",
    "vue-template-compiler": "^2.5.17",
    "vuetify-loader": "^1.0.5"
  }
}

Note everything as far as compiling and linting appears fine, but running npm install produces.

npm WARN rollback Rolling back [email protected] failed (this is probably harmless): EPERM: operation not permitted, rmdir 'D:\Projects\warehouse\node_modules\fsevents\node_modules'
npm WARN @babel/[email protected] requires a peer of @babel/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

I have these warnings too, however these were already fixed in #2642 and as sodatea said, these fixes will be included in the next release.

Well, in most cases you shouldn't ignore this; the issue arises from babel having so many package versions (babel 6, babel 7; etc.)
Here is a reference: https://nuget.qite.be/feeds/NPM/babel-core/7.0.0-bridge.0
solution for me was: sudo npm install --save-dev [email protected]

Was this page helpful?
0 / 5 - 0 ratings