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

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

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

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

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

fix? i am waiting

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:

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]

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.

Waiting!

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

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.

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

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

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

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

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

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.

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

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

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