Closed Landon-CN closed 6 years ago
Same. On a fresh install, using 5.8.0
>yarn serve
yarn run v1.5.1
$ vue-cli-service serve --open
INFO Starting development server...
94% asset optimization
ERROR Failed to compile with 1 errors 23:59:26
error in ./src/main.js
Module build failed: Error: [BABEL] /Users/dzza/multiselect/src/main.js: The new decorators proposal is not supported yet. You must pass the `"decoratorsLegacy": true` option to @babel/preset-stage-2 (While processing: "/Users/dzza/multiselect/node_modules/@vue/babel-preset-app/index.js$1")
at /Users/dzza/multiselect/node_modules/@babel/preset-stage-2/lib/index.js:107:11
at /Users/dzza/multiselect/node_modules/@babel/helper-plugin-utils/lib/index.js:18:12
at /Users/dzza/multiselect/node_modules/@babel/core/lib/config/full.js:172:14
at cachedFunction (/Users/dzza/multiselect/node_modules/@babel/core/lib/config/caching.js:42:17)
at loadPresetDescriptor (/Users/dzza/multiselect/node_modules/@babel/core/lib/config/full.js:243:63)
at /Users/dzza/multiselect/node_modules/@babel/core/lib/config/full.js:68:19
at Array.map (<anonymous>)
at recurseDescriptors (/Users/dzza/multiselect/node_modules/@babel/core/lib/config/full.js:66:36)
at recurseDescriptors (/Users/dzza/multiselect/node_modules/@babel/core/lib/config/full.js:97:26)
at loadFullConfig (/Users/dzza/multiselect/node_modules/@babel/core/lib/config/full.js:112:6)
@ multi (webpack)-dev-server/client/index.js (webpack)/hot/dev-server.js ./src/main.js
package.json
{
"name": "multiselect",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve --open",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"vue": "^2.5.13"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.0.0-beta.6",
"@vue/cli-plugin-eslint": "^3.0.0-beta.6",
"@vue/cli-service": "^3.0.0-beta.6",
"@vue/eslint-config-prettier": "^3.0.0-beta.6",
"node-sass": "^4.7.2",
"sass-loader": "^6.0.6",
"vue-template-compiler": "^2.5.13"
},
"babel": {
"presets": [
"@vue/app"
]
},
"eslintConfig": {
"root": true,
"extends": [
"plugin:vue/essential",
"@vue/prettier"
]
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
As babel added "decoratorsLegacy" to presets few days ago https://github.com/babel/babel/commit/2679d6775cc957e6cc77f23da0e31cd24bbfd18f
I changed vue/babel-preset-app/index.js (line number: 17)
const envOptions = { modules: options.modules || false, targets: options.targets, useBuiltIns: typeof options.useBuiltIns === 'undefined' ? 'usage' : options.useBuiltIns, }
added decoratorsLegacy
const envOptions = { modules: options.modules || false, targets: options.targets, useBuiltIns: typeof options.useBuiltIns === 'undefined' ? 'usage' : options.useBuiltIns, decoratorsLegacy: options.decoratorsLegacy || false }
It works, not sure whether it is best way though
missed another part need to change line number : 40 set decoratorsLegacy to true
presets.push([require('@babel/preset-stage-2'), {
useBuiltIns: true,
decoratorsLegacy: true
}])
@soft90 I solved the problem.Thank you very much!
My working file of
node_moudles/vue/babel-peset-app/index.js
module.exports = (context, options = {}) => {
const presets = []
const plugins = []
// JSX
if (options.jsx !== false) {
plugins.push(
require('@babel/plugin-syntax-jsx'),
require('babel-plugin-transform-vue-jsx')
// require('babel-plugin-jsx-event-modifiers'),
// require('babel-plugin-jsx-v-model')
)
}
const envOptions = {
modules: options.modules || false,
targets: options.targets,
useBuiltIns: typeof options.useBuiltIns === 'undefined' ? 'usage' : options.useBuiltIns,
decoratorsLegacy: options.decoratorsLegacy || false
}
delete envOptions.jsx
// target running node version (this is set by unit testing plugins)
if (process.env.VUE_CLI_BABEL_TARGET_NODE) {
envOptions.targets = { node: 'current' }
}
// cli-plugin-jest sets this to true because Jest runs without bundling
if (process.env.VUE_CLI_BABEL_TRANSPILE_MODULES) {
envOptions.modules = 'commonjs'
// necessary for dynamic import to work in tests
plugins.push(require('babel-plugin-dynamic-import-node'))
}
// pass options along to babel-preset-env
presets.push([require('@babel/preset-env'), envOptions])
// stage 2. This includes some important transforms, e.g. dynamic import
// and rest object spread.
presets.push([require('@babel/preset-stage-2'), {
useBuiltIns: true,
decoratorsLegacy: true
}])
// transform runtime, but only for helpers
plugins.push([require('@babel/plugin-transform-runtime'), {
polyfill: false,
regenerator: false,
moduleName: path.dirname(require.resolve('@babel/runtime/package.json'))
}])
return {
presets,
plugins
}
}
added line 21: decoratorsLegacy: options.decoratorsLegacy || false and line 42 : decoratorsLegacy: true
While those PR changes are discussed vue create
is broken for the entire community, and I'd expect some existing projects are broken if they lose their lockfile as well.
Maybe there should a hard lock onto the previous beta version of babel rather than a ^
to prevent this from happening again.
Edit: Confirmed, just talked to the babel maintainers who say that you should absolutely version lock your babel betas. babel/babel@2679d67
@light24bulbs Since Babel 7 is still a prerelease beta, we're free to make breaking changes between versions. If you're using 7.x, you should be using one specific version of it.
Really sorry this happened!
We aren't in RC yet and there has been a few things we wanted to change before doing so. Unfortunately, this means that a project that is using ^
would pick up the latest beta. And this isn't specific to this release or even this project since at some point you might hit an intentional breaking change. The internal packages are also exact versions as well; this can be an issue in a monorepo.
Not really sure a better way to be able to talk/enforce this on our side. I think we've said this per release, but it hasn't broken in such an obvious way for people before?
Here's Babel's own deps for Babel https://github.com/babel/babel/blob/3a2aa9b86284957533d01105754044fb6b235d41/package.json#L13-L15.
fix? i am waiting
I had solved the problem by using a custom config by @babel/preset-env
in file .babelrc. Working well, like this:
{
"presets": [
["@babel/preset-env", {
"targets": {
"browsers": [
"> 5%",
"last 2 versions",
"not ie <= 8"
]
},
"modules": false,
"exclude": [
"transform-regenerator"
]
}],
["@babel/preset-stage-2", {
"useBuiltIns": true,
"decoratorsLegacy": true
}]
],
"plugins": [
]
}
Guys while this issue is not fixed, simply use this temporary solution:
Specify the old version of @babel/preset-stage-2
in devDependencies
// package.json
"devDependencies": {
"@babel/preset-stage-2": "7.0.0-beta.44",
...
}
then run npm run install
Waiting!
Waiting for what ? It's a beta of vue-cli, and multiple way to fix the issue has been given, just use them ?
No one works for me @Pymous .
@Hugale12 : Did you try https://github.com/vuejs/vue-cli/issues/1162#issuecomment-383797149 ? You need to run npm install
after the change.
"devDependencies": {
"@babel/preset-stage-2": "7.0.0-beta.44",
"@vue/cli-plugin-babel": "^3.0.0-beta.6",
"@vue/cli-plugin-eslint": "^3.0.0-beta.6",
"@vue/cli-plugin-pwa": "^3.0.0-beta.6",
"@vue/cli-plugin-unit-jest": "^3.0.0-beta.6",
"@vue/cli-service": "latest",
"@vue/eslint-config-airbnb": "^3.0.0-beta.6",
"@vue/test-utils": "^1.0.0-beta.14",
"autoprefixer": "^8.3.0",
"babel-core": "^7.0.0-0",
"babel-eslint": "^8.2.3",
"babel-jest": "^22.0.4",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"eslint": "^4.19.1",
"less": "^2.7.3",
"less-loader": "^4.0.5",
"lint-staged": "^6.0.0",
"postcss-import": "^11.1.0",
"postcss-preset-env": "^3.2.2",
"vue-svgicon": "^2.1.3",
"vue-template-compiler": "^2.5.13"
I have that for the moment maybe change another thing ?
I don't have any error with your dependancies on a clean folder. Try clearing your node_modules
folder ? You might have installed a package which is conflicting with the script and not saved to your package.json
adding to .babelrc
is not helping. The same is for just using the fixed version of preset-stage-2
, and both in combination. Hopefully the next beta will be out soon and this issue addressed as well. Hacking the code in node_modules/
is no solution.
Waiting for https://github.com/vuejs/vue-cli/pull/1163 to be merged.
One of my colleague have this error ... Mine is resolve
error in ./src/App.vue Module build failed: TypeError: Property right of AssignmentExpression expected node to be of a type ["Expression"] but instead got null
https://github.com/vuejs/vue-cli/issues/1162#issuecomment-383797149 worked for me.
Just to clarify, you'll want to add this the @babel/preset-stage-2
line in your package.json
sitting in the root of your project. There is not currently an entry for that package in there and that threw me off. Don't forget to run npm install
after you update package.json
I solved this problem. npm install --save-dev babel-preset-stage-2
Installing babel-preset-stage-2@7.0.0-beta.44
per https://github.com/vuejs/vue-cli/issues/1162#issuecomment-383797149 did not resolve the error for me. The other suggestion in https://github.com/vuejs/vue-cli/issues/1162#issuecomment-383796325 actually worked, but I discovered a different solution that modifies the @vue/app
preset to include the required decoratorsLegacy
setting:
.babelrc
(which only contains a config to use the @vue/app
preset)..babelrc.js
with the following code:const vueBabelPreset = require('@vue/babel-preset-app');
module.exports = (context, options = {}) => {
// Cache the returned value forever and don't call this function again.
context.cache(true);
const {presets, plugins} = vueBabelPreset(context, options);
// Find @babel/preset-stage-2, and update its config to enable `decoratorsLegacy`.
const presetStage2 = require('@babel/preset-stage-2');
const preset = presets.find(p => p[0] === presetStage2);
if (preset) {
preset[1].decoratorsLegacy = true;
}
return {
presets,
plugins
};
}
This solution works better in my opinion because it maintains the settings originally intended by @vue/app
, and should be forward compatible with any potential changes in @vue/app
(assuming no conflict with a new decoratorsLegacy
setting). [1]
I think I tried most if not all of the suggestions thus far. Only thing that worked for me was this comment. Thanks @nitta-honoka
i just found out that removing the babel entry in package.json also solves the issue.
"@babel/preset-stage-2": "7.0.0-beta.44"
didn't work for me
there is a new cli version published (beta7) that fixes this issue. This issue can be closed now.
I'm using beta7 and still had the issue, until I deleted and reinstalled node mods
Version
3.0.0-beta.6
Reproduction link
https://codepen.io/
Steps to reproduce
vue-cli will install @babel/preset-stage-2@7.0.0-beta.45 and npm run serve will throw error:
The new decorators proposal is not supported yet. You must pass the
"decoratorsLegacy": trueoption to @babel/preset-stage-2
see: https://github.com/babel/babel/blob/master/packages/babel-preset-stage-2/src/index.js#L29
forgive my poor English
What is expected?
server success
What is actually happening?
The new decorators proposal is not supported yet. You must pass the
"decoratorsLegacy": true
option to @babel/preset-stage-2