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

Landon-CN · 2018-04-23T03:12:59Z

Version

3.0.0-beta.6

Reproduction link

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

The text was updated successfully, but these errors were encountered:

dzza · 2018-04-23T04:06:12Z

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 · 2018-04-23T05:45:00Z

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 · 2018-04-23T06:10:55Z

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 · 2018-04-23T06:20:29Z

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

soft903 · 2018-04-23T07:42:12Z

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

factoidforrest · 2018-04-23T20:17:39Z

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 · 2018-04-23T20:46:25Z

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 · 2018-04-24T03:33:35Z

fix? i am waiting

nitta-honoka · 2018-04-24T04:00:44Z

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 · 2018-04-24T04:07:32Z

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 · 2018-04-24T06:09:11Z

Waiting!

Pymous · 2018-04-24T08:01:40Z

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

Hugale12 · 2018-04-24T08:03:06Z

No one works for me @Pymous .

Pymous · 2018-04-24T08:05:12Z

@Hugale12 : Did you try #1162 (comment) ? You need to run npm install after the change.

Hugale12 · 2018-04-24T08:13:23Z

  "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 · 2018-04-24T08:29:38Z

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 · 2018-04-24T13:58:00Z

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 #1163 to be merged.

Hugale12 · 2018-04-24T14:52:02Z

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 · 2018-04-25T01:25:01Z

#1162 (comment) 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 · 2018-04-25T05:25:36Z

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

tony19 · 2018-04-25T07:11:23Z

Installing [email protected] per #1162 (comment) did not resolve the error for me. The other suggestion in #1162 (comment) actually worked, but I discovered a different solution that modifies the @vue/app preset to include the required decoratorsLegacy setting:

Delete .babelrc (which only contains a config to use the @vue/app preset).
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 · 2018-04-25T12:05:43Z

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 · 2018-04-25T14:51:58Z

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

quantuminformation · 2018-04-26T06:25:54Z

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

didn't work for me

axtho · 2018-04-26T06:26:55Z

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

quantuminformation · 2018-04-26T06:46:17Z

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

dzza mentioned this issue Apr 23, 2018

Decorators legacy option babel/babel#7734

Merged

silkentrance mentioned this issue Apr 23, 2018

Fixing "The new decorators proposal is not supported yet." #1163

Merged

vuejs deleted a comment from 001123 Apr 23, 2018

vuejs deleted a comment from zhuweiyou Apr 23, 2018

vuejs deleted a comment from pedrogao Apr 23, 2018

vuejs deleted a comment from designbuedchen Apr 23, 2018

vuejs deleted a comment from chenKuer Apr 23, 2018

vuejs deleted a comment from nusr Apr 23, 2018

vuejs deleted a comment from chenKuer Apr 23, 2018

vuejs deleted a comment from koen-chen Apr 23, 2018

vuejs deleted a comment from zhangwei900808 Apr 23, 2018

vuejs deleted a comment from yozman Apr 23, 2018

factoidforrest referenced this issue in babel/babel Apr 23, 2018

Add "decoratorsLegacy" to presets

2679d67

nklayman mentioned this issue Apr 25, 2018

Running linux executable throws "Error: Cannot find module 'source-map-support/source-map-support.js'" nklayman/vue-cli-plugin-electron-builder#3

Closed

yyx990803 closed this as completed in dbc3f10 Apr 25, 2018

anton-belousov mentioned this issue Apr 25, 2018

Problem with @babel/preset-stage-2 creativetimofficial/ct-vue-now-ui-dashboard-pro#10

Closed

hzoo mentioned this issue Jul 6, 2018

Create 0002-no-caret-prerelease-installs.md npm/rfcs#14

Merged

chenbin92 mentioned this issue Jul 29, 2018

npm run start 报错 alibaba/ice#755

Closed

EmilyRosina mentioned this issue Mar 2, 2019

update to vue-cli 3 EmilyRosina/hub#1

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

Landon-CN commented Apr 23, 2018

dzza commented Apr 23, 2018 •

edited

Loading

soft903 commented Apr 23, 2018 •

edited

Loading

soft903 commented Apr 23, 2018

nusr commented Apr 23, 2018

soft903 commented Apr 23, 2018 •

edited

Loading

factoidforrest commented Apr 23, 2018 •

edited

Loading

hzoo commented Apr 23, 2018

yiqianglin commented Apr 24, 2018

nitta-honoka commented Apr 24, 2018

ftgibran commented Apr 24, 2018 •

edited

Loading

Chatles commented Apr 24, 2018

Pymous commented Apr 24, 2018

Hugale12 commented Apr 24, 2018

Pymous commented Apr 24, 2018

Hugale12 commented Apr 24, 2018 •

edited

Loading

Pymous commented Apr 24, 2018 •

edited

Loading

axtho commented Apr 24, 2018 •

edited

Loading

Hugale12 commented Apr 24, 2018

droidenator commented Apr 25, 2018

kimse310 commented Apr 25, 2018

tony19 commented Apr 25, 2018 •

edited

Loading

bdiz commented Apr 25, 2018

stephanepericat commented Apr 25, 2018

quantuminformation commented Apr 26, 2018

axtho commented Apr 26, 2018

quantuminformation commented Apr 26, 2018 •

edited

Loading

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

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

Comments

Landon-CN commented Apr 23, 2018

Version

Reproduction link

Steps to reproduce

What is expected?

What is actually happening?

dzza commented Apr 23, 2018 • edited Loading

soft903 commented Apr 23, 2018 • edited Loading

soft903 commented Apr 23, 2018

nusr commented Apr 23, 2018

soft903 commented Apr 23, 2018 • edited Loading

factoidforrest commented Apr 23, 2018 • edited Loading

hzoo commented Apr 23, 2018

yiqianglin commented Apr 24, 2018

nitta-honoka commented Apr 24, 2018

ftgibran commented Apr 24, 2018 • edited Loading

Chatles commented Apr 24, 2018

Pymous commented Apr 24, 2018

Hugale12 commented Apr 24, 2018

Pymous commented Apr 24, 2018

Hugale12 commented Apr 24, 2018 • edited Loading

Pymous commented Apr 24, 2018 • edited Loading

axtho commented Apr 24, 2018 • edited Loading

Hugale12 commented Apr 24, 2018

droidenator commented Apr 25, 2018

kimse310 commented Apr 25, 2018

tony19 commented Apr 25, 2018 • edited Loading

bdiz commented Apr 25, 2018

stephanepericat commented Apr 25, 2018

quantuminformation commented Apr 26, 2018

axtho commented Apr 26, 2018

quantuminformation commented Apr 26, 2018 • edited Loading

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

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

dzza commented Apr 23, 2018 •

edited

Loading

soft903 commented Apr 23, 2018 •

edited

Loading

soft903 commented Apr 23, 2018 •

edited

Loading

factoidforrest commented Apr 23, 2018 •

edited

Loading

ftgibran commented Apr 24, 2018 •

edited

Loading

Hugale12 commented Apr 24, 2018 •

edited

Loading

Pymous commented Apr 24, 2018 •

edited

Loading

axtho commented Apr 24, 2018 •

edited

Loading

tony19 commented Apr 25, 2018 •

edited

Loading

quantuminformation commented Apr 26, 2018 •

edited

Loading