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

[Landon-CN]

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/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": true option 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
babel/babel@2679d67

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

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