Vue-cli: npm run serve error: You must pass the `"decoratorsLegacy": true` option to @babel/preset-stage-2

[scliuyang]

Version

3.0.0-beta.6

Reproduction link

https://codepen.io/

Steps to reproduce

• Vue CLI v3.0.0-beta.6
• ? Please pick a preset: Manually select features
• ? Check the features needed for your project: TS, Router, Vuex, CSS Pre-processors, Linter
• ? Use class-style component syntax? Yes
• ? Use Babel alongside TypeScript for auto-detected polyfills? Yes
• ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): LESS
• ? Pick a linter / formatter config: Airbnb
• ? Pick additional lint features:
• ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
• ? Save this as a preset for future projects? No

vue-cli will install @babel/[email protected] 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

[dzza]

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"
  ]
}

[soft903]

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

[soft903]

missed another part need to change
line number : 40
set decoratorsLegacy to true

 presets.push([require('@babel/preset-stage-2'), {
    useBuiltIns: true,
    decoratorsLegacy: true
  }])

[nusr]

@soft90 I solved the problem.Thank you very much!

[soft903]

My working file of

node_moudles/vue/babel-peset-app/index.js

```const path = require('path')

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

[light24bulbs]

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.

[hzoo]

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.

[yiqianglin]

fix? i am waiting

[nitta-honoka]

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": [
  ]
}

[ftgibran]

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

[Chatles]

Waiting!

[Pymous]

Waiting for what ? It's a beta of vue-cli, and multiple way to fix the issue has been given, just use them ?

[Hugale12]

No one works for me @Pymous .

[Pymous]

@Hugale12 : Did you try https://github.com/vuejs/vue-cli/issues/1162#issuecomment-383797149 ? You need to run npm install after the change.

[Hugale12]

  "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 ?

[Pymous]

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

[axtho]

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.

[Hugale12]

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

[droidenator]

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

[kimse310]

I solved this problem.
npm install --save-dev babel-preset-stage-2

[tony19]

Installing [email protected] 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:

1. Delete .babelrc (which only contains a config to use the @vue/app preset).
2. Create .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]

[bdiz]

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

[stephanepericat]

i just found out that removing the babel entry in package.json also solves the issue.

[quantuminformation]

"@babel/preset-stage-2": "7.0.0-beta.44"

didn't work for me

[axtho]

there is a new cli version published (beta7) that fixes this issue. This issue can be closed now.

[quantuminformation]

I'm using beta7 and still had the issue, until I deleted and reinstalled node mods