Parser `decorators` plugin option `decoratorsBeforeExport` no longer defaulting #8562

jaydenseric · 2018-08-28T04:37:51Z

Bug Report

Current Behavior
In a recent v7 release (maybe even the final?), the parser decorators plugin option decoratorsBeforeExport no longer defaults as it used to.

const { parse } = require('@babel/core')

const result = parse(code, {
  parserOpts: {
    plugins: [
      'decorators'
    ]
  }
})

Results in an error:

/Users/jaydenseric/Sites/demo/node_modules/@babel/core/lib/transformation/normalize-file.js:209
    throw err;
    ^

Error: The 'decorators' plugin requires a 'decoratorsBeforeExport' option, whose value must be a boolean.

This is unexpected, as the decoratorsBeforeExport option is meant to default to false. Manually providing the same value as the supposed default works:

  const result = parse(code, {
    parserOpts: {
      plugins: [
-       'decorators'
+       ['decorators', { decoratorsBeforeExport: false }]
      ]
    }
  })

Expected behavior/code
A clear and concise description of what you expected to happen (or code).

Babel Configuration (.babelrc, package.json, cli command)

N/A.

Environment

Babel version(s): v7.0.0
Node/npm version: Node.js v10.9.0, npm v6.4.0
OS: macOS
Monorepo [e.g. yes/no/Lerna]: No
How you are using Babel: [e.g. cli, register, loader]: API

Possible Solution

Additional context/Screenshots

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

babel-bot · 2018-08-28T04:37:53Z

Hey @jaydenseric! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community that typically always has someone willing to help. You can sign-up here
for an invite.

loganfsmyth · 2018-08-28T04:43:21Z

This was a purposeful change in #8465 for now because the spec authors haven't settled on one or the other. To avoid us choosing the wrong default, we opted to require users to choose.

In the short term, I'd expect users transitioning from 6.x to use legacy: true anyway.

jaydenseric · 2018-08-28T04:46:10Z

Maybe the docs should be updated to reflect that there is no longer a default. Encountered the issue when reinstalling node_modules for jsdoc-md here: https://github.com/jaydenseric/jsdoc-md/blob/v1.5.0/lib/jsdocCommentsFromCode.js#L16

loganfsmyth · 2018-08-28T04:58:28Z

Totally, happy to leave this open to we can address the docs. FYI, you may want to consider using 'decorators-legacy' since that is what was supported in 6.x.

Also, in the long run, since you're using babel/core's parse, you could pass it a filename and remove decorators entirely and rely on your users having a Babel config file that enables the proper decorators proposal on their side.

See babel/babel#8562.

the-simian · 2018-08-28T18:27:54Z

I'm struggling with this right now, when I set this:

      [
        require('@babel/plugin-proposal-decorators'),
        { decoratorsBeforeExport: false, legacy: true }
      ],

OR

      [
        require('@babel/plugin-proposal-decorators'),
        { decoratorsBeforeExport: true, legacy: true }
      ],

For both I get the same error 'decoratorsBeforeExport' can't be used with legacy decorators.

if I remove the legacy flag, like this:

      [
        require('@babel/plugin-proposal-decorators'),
        { decoratorsBeforeExport: false }
      ],

I get "The new decorators proposal is not supported yet. You must pass the "legacy": true option to @babel/plugin-proposal-decorators".

if I remove the decoratorsBeforeExport entirely and just do the legacy flag,

[require('@babel/plugin-proposal-decorators'), { legacy: true }],

I am able to proceed...

However this does now cause errors with using decorators and then using export default. I'm aware the spec is 'still in flux' but what is the way to configure this where I can use decorators like

@something
export default class MyClass

Is this no longer able to be done?

nicolo-ribaudo · 2018-08-28T21:49:42Z

Just using { legacy: true } should work. What error are you getting?

the-simian · 2018-08-29T01:50:22Z

Its not giving me a message like the others, just 'failed to compile'. when I change the files to

@something
class Thing
...
export default Thing;

that works. I'm not really sure what's wrong but in the previous beta (7.0.0-beta.49) this worked, and for me at least in 7 its not. What I mean is that code that had decorators preceding an export did not break, and I was able to specify decoratorsBeforeExport : true and everything was fine.

If you're telling me that's a config that works, its possible the error is in eslint or something. I mainly wanted to confirm that's the correct config, but I am getting breaks on situations where there are dercorators before export and I was not beforehand. Should that config be working on decorators before the export keyword ?

nicolo-ribaudo · 2018-08-29T07:35:02Z

Sorry y'all, I was confused with another issue. Our parser has two diffrent plugins: decorators (which is the new decorators proposal) and decorators-legacy. If you want the old behavior, you should use decorators-legacy.

the-simian · 2018-08-29T19:58:04Z

@nicolo-ribaudo I'll answer your questions first:
I am indeed using @babel/plugin-proposal-decorators at 7.0.0. I was using this in the 7 beta as well.
I am using babel-eslint at 9.0.0 also.

I am a bit confused on what is meant about the new/old proposal. I have been using this 'new' proposal lib and only with the release of 7.0.0 did it break. It was working with beta-49+ as far as i can recall. I'm using and have been using the new behavior. However, I am not sure what the expectation right now in this proposal plugin should be. I was under the impression that there was no consensus yet on before or after export (such as in this thread) tc39/proposal-decorators#69 and that the plugin you've authored here allowed the enduser to configure, via a flag (decoratorsBeforeExport).

Regardless, rather than referencing these confusing threads with hundreds of back-and-forth comments, more directly I am asking :

with this plugin (@babel/plugin-proposal-decorators) can you do decorators like export default class Thing at all? you could in the beta version, was this removed?
if not, can you post a very very small snippet of a decorator that this plugin actually accepts so I understand 'code first' what should actually be written with this plugin ?
could this simply be a problem with babel-eslint @9 ? where it is indeed parsing, but somehow the linter is throwing anyways? (maybe there is non parity between the linter and parser?)

I've already converted my codebase to

@decorator
class Thing{}
export default Thing

I've been able to move past, but this was really time consuming, and to be honest I preferred the way it was beforehand.

Sorry to keep this going, but any answers you give help other folks besides myself reading this get some clarity. The decorators 'situation' is very confusing overall, even if you're studiously reading the TC-39 threads (most people aren't).

Thanks again for any replies, and I appreciate the effort on this project.

nicolo-ribaudo · 2018-08-30T06:46:01Z

Sorry for the confusion, I get that old/new proposal doesn't mean anything for many people.

The "old" proposal is the one y'all are used to: it's the only one implemented in Babel and TypeScript. It's the one supported by babel-plugin-transform-decorators-legacy and @babel/plugin-transform-decorators, { legacy: true }. In @babel/parser it is decorators-legacy.

The "new" proposal is currently only implemented in @babel/parser (using the decorators plugin) and in babel-eslint, because it uses @babel/parser. We are implementing it (#7976), and also the TypeScript team is.

The decoratorsBeforeExport option is only meaningful for the "new" version of the proposal because, as you noted, there isn't consensus yet. You can't really use it in @babel/plugin-proposal-decorators because #7976 has not been merged yet, but you can use it in the @babel/parser's decorators plugin.

with this plugin (@babel/plugin-proposal-decorators) can you do decorators like export default class Thing at all? you could in the beta version, was this removed?

You still can, the old behavior hasn't changed. We only require the legacy option now:

const out = babel.transformSync(
  `
  @decorator
  export default class Foo {}
  `,
  {
    plugins: [
      [
        require("./packages/babel-plugin-proposal-decorators"),
        { legacy: true },
      ],
    ],
  }
);

console.log(out.code);

logs

var _class;

let Foo = decorator(_class = class Foo {}) || _class;

export { Foo as default };

could this simply be a problem with babel-eslint @9 ? where it is indeed parsing, but somehow the linter is throwing anyways? (maybe there is non parity between the linter and parser?)

In babel-eslint you have to opt-in to use the "old" proposal: in your eslint config, you should have something like this:

{
  parserOptions: {
    ecmaFeatures: {
      legacyDecorators: true
    }
  }
}

jaydenseric · 2018-08-30T08:00:22Z

This issue should not have been closed, since the docs are still incorrect:

The decoratorsBeforeExport option does not default to false.

nicolo-ribaudo · 2018-08-30T12:34:24Z

Do you want to open a PR to babel/website?

existentialism · 2018-08-30T15:33:07Z

Fixed:

Sorry for any confusion the docs caused, as you can imagine... lots of moving parts leading up to shipping 7!

damianobarbati · 2018-09-02T09:45:34Z

@the-simian I had you same problem, solved with @nicolo-ribaudo suggestion, change you eslint config:

    "eslintConfig": {
        "parser": "babel-eslint",
        "parserOptions": {
            "ecmaVersion": 2019,
            "sourceType": "module",
            "impliedStrict": true,
            "ecmaFeatures": {
                "jsx": true,
                "impliedStrict": true,
                "globalReturn": false,
                "experimentalObjectRestSpread": true,
                "legacyDecorators": true
            }
        },
        "env": {
            "browser": true,
            "serviceworker": true,
            "node": true,
            "jest": true,
            "es6": true
        },
        "plugins": [
            "react",
            "jest"
        ],
        "extends": [
            "eslint:recommended",
            "plugin:react/recommended",
            "plugin:jest/recommended"
        ],
        "rules": {
            "no-console": "off"
        }
    },

the-simian · 2018-09-03T17:18:31Z

I believe this was my problem thank you @nicolo-ribaudo , I see there's an issue for this here: babel/babel-eslint#679

wyuenho · 2018-09-09T12:00:09Z

The doc is not fixed. It still says decoratorsBeforeExport defaults to false.

wyuenho · 2018-09-09T12:24:06Z

@nicolo-ribaudo @loganfsmyth @existentialism The intention of #8465 is unclear, probably should write the tests a bit better so this is caught.

xtuc · 2018-09-10T06:10:00Z

@wyuenho could you please open an issue on https://github.com/babel/website?

jcabrerazuniga · 2018-11-01T21:49:35Z

Sorry for the confusion, I get that old/new proposal doesn't mean anything for many people.

The "old" proposal is the one y'all are used to: it's the only one implemented in Babel and TypeScript. It's the one supported by babel-plugin-transform-decorators-legacy and @babel/plugin-transform-decorators, { legacy: true }. In @babel/parser it is decorators-legacy.

The "new" proposal is currently only implemented in @babel/parser (using the decorators plugin) and in babel-eslint, because it uses @babel/parser. We are implementing it (#7976), and also the TypeScript team is.

The decoratorsBeforeExport option is only meaningful for the "new" version of the proposal because, as you noted, there isn't consensus yet. You can't really use it in @babel/plugin-proposal-decorators because #7976 has not been merged yet, but you can use it in the @babel/parser's decorators plugin.

with this plugin (@babel/plugin-proposal-decorators) can you do decorators like export default class Thing at all? you could in the beta version, was this removed?

You still can, the old behavior hasn't changed. We only require the legacy option now:
const out = babel.transformSync(
  `
  @decorator
  export default class Foo {}
  `,
  {
    plugins: [
      [
        require("./packages/babel-plugin-proposal-decorators"),
        { legacy: true },
      ],
    ],
  }
);

console.log(out.code);
logs
var _class;

let Foo = decorator(_class = class Foo {}) || _class;

export { Foo as default };
could this simply be a problem with babel-eslint @9 ? where it is indeed parsing, but somehow the linter is throwing anyways? (maybe there is non parity between the linter and parser?)

In babel-eslint you have to opt-in to use the "old" proposal: in your eslint config, you should have something like this:
{
  parserOptions: {
    ecmaFeatures: {
      legacyDecorators: true
    }
  }
}

How can you set the legacyDcorators:false in webpack?

nicolo-ribaudo · 2018-11-01T22:27:40Z

What is your current config?

charlesritchea · 2018-11-06T16:52:49Z

Yes, please explain how to resolve this with a webpack config. I dont' even know where to start with this error.

nicolo-ribaudo · 2018-11-06T18:05:58Z

What is your current config?

charlesritchea · 2018-11-06T18:45:24Z

@nicolo-ribaudo This is my webpack 3.x config, which is used by electron-webpack. I'm taking over this project and I'm very ignorant of why things are configured the way they are.

.babelrc

{
  "presets": [
    "babel-preset-es2015-allow-top-level-this"
  ],
  "plugins": [
    "add-module-exports",
    "transform-remove-strict-mode"
  ]
}

webpack.config.js

// This configuration will be automatically merged with the electron-build default webpack configuration
// https://webpack.electron.build/modifying-webpack-configurations
const projectConfig = require('./project.config');
const webpack = require('webpack');
const isDev = process.env.NODE_ENV === "development";

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.jsx$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['react']
                    }
                }
            },
            {
                test: /\.css$/,
                use: [{
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                }]
            },
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                }, {
                    loader: "postcss-loader"
                }, {
                    loader: "less-loader"
                }]
            },
            {
                test: /\.WOFF$/,
                use: "url-loader?mimetype=application/font-woff"
            },
            {
                test: /\.json$/,
                use: "json-loader"
            },
            {
                test: /\.txt$/,
                use: 'raw-loader'
            },
            {
                test: /\.waveform/,
                use: 'arraybuffer-loader'
            }
        ]
    },
    devtool: isDev ? 'eval-source-map' : 'source-map',
    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': isDev ? JSON.stringify('development') : JSON.stringify('production')
        }),
        new webpack.ProvidePlugin({
            _: 'underscore',
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            Backbone: 'backbone',
            Bb: 'backbone',
            Marionette: 'backbone.marionette',
            Mn: 'backbone.marionette',
            d3: 'd3'
        })
    ],
    resolve: {
        modules: [
            projectConfig.srcDirectoryPath,
            projectConfig.nodeModulesDirectoryPath
        ],
        alias: {
            root: projectConfig.rootDirectoryPath,
            apps: projectConfig.appsDirectoryPath,
            data: projectConfig.dataDirectoryPath,
            svg: projectConfig.svgDirectoryPath,
            modules: projectConfig.nodeModulesDirectoryPath,
            'jquery-ui': projectConfig.jQueryUIDirectoryPath
        }
    }
};

And of course when attempting to upgrade to Webpack 4.x, I've changed the babel 6 versions of things to the babel 7 @babel\preset-react etc. I've also told electron-webpack to not even use this config, just the default, and I still get the same decoratorsBeforeExport error. I'm not even using decorators.

Unfortunately I don't have my Webpack 4.x attempt because it's just too frustrating of an endeavor right now, so I had to revert and move on.

nicolo-ribaudo · 2018-11-06T22:54:55Z

You can run npx nls why @babel/plugin-proposa-decorators to see why it is installed.

charlesritchea · 2018-11-06T23:16:57Z

Thanks, that's very helpful

…

On Tue, Nov 6, 2018, 5:55 PM Nicolò Ribaudo ***@***.***> wrote: You can run npx nls why @babel/plugin-proposa-decorators to see why it is installed. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#8562 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABlGHbuDAIH_Idfeo5zMc03HUdxZlEhlks5ushNbgaJpZM4WO5xl> .

Aszmel · 2019-01-06T21:15:45Z

recently was getting problem with this error and installed
npm install --save-dev @babel/plugin-proposal-decorators
and setup
"babel": { "plugins": [ [ "@babel/plugin-proposal-decorators", { "legacy": true } ] ], "presets": [ "react-app" ] },

this run my code with some errors, but app was working, I'm a beginner, so hope this comment is relevant

sergiotapia · 2019-04-05T17:25:05Z

For would be Googler's and create-react-app users.

Create your create-react-app.

Then eject the project:

yarn eject

Add mobx, mobx-react and the decorator plugin:

yarn add @babel/plugin-proposal-decorators mobx mobx-react

Then in your package.json you'll see:

"babel": {
  "presets": [
    "react-app"
  ]
}

Just update it to:

"babel": {
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ]
  ],
  "presets": [
    "react-app"
  ]
}

hoenth · 2019-04-23T13:18:47Z

@sergiotapia Did you mean 'Then in your .babelrc`

jaydenseric added a commit to jaydenseric/jsdoc-md that referenced this issue Aug 28, 2018

Fix a Babel breaking change to parsing decorators.

8d6727d

See babel/babel#8562.

nicolo-ribaudo added the i: docs label Aug 28, 2018

nicolo-ribaudo mentioned this issue Aug 28, 2018

'decoratorsBeforeExport' can't be used with legacy decorators. #8569

Closed

wanliyunyan mentioned this issue Aug 29, 2018

The 'decorators' plugin requires a 'decoratorsBeforeExport' option, whose value must be a boolean. ant-design/ant-design-pro#2043

Closed

This comment has been minimized.

Sign in to view

nicolo-ribaudo mentioned this issue Aug 29, 2018

More helpful errorr message for missing decoratorsBeforeExport in parser #8576

Merged

existentialism closed this as completed in #8576 Aug 29, 2018

roelandmoors mentioned this issue Aug 30, 2018

ERROR: The 'decorators' plugin requires a 'decoratorsBeforeExport' option Galooshi/import-js#515

Closed

nicolo-ribaudo reopened this Aug 30, 2018

nicolo-ribaudo closed this as completed Aug 30, 2018

gotjoshua mentioned this issue Aug 31, 2018

Error: The 'decorators' plugin requires a 'decoratorsBeforeExport' option Galooshi/atom-import-js#38

Open

the-simian mentioned this issue Sep 3, 2018

decorators (legacy) enforce decorators after export #8598

Closed

wyuenho mentioned this issue Sep 9, 2018

Fix #515 Add required option to decorator plugin Galooshi/import-js#518

Merged

wyuenho mentioned this issue Sep 10, 2018

Decorator decoratorsBeforeExport should be required babel/website#1819

Closed

leoj3n mentioned this issue Sep 22, 2018

Migrate to gatsby v2 greglobinski/gatsby-starter-personal-blog#64

Open

lock bot added the outdated A closed issue/PR that is archived due to age. Recommended to make a new issue label Jul 23, 2019

lock bot locked as resolved and limited conversation to collaborators Jul 23, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Parser `decorators` plugin option `decoratorsBeforeExport` no longer defaulting #8562

Parser `decorators` plugin option `decoratorsBeforeExport` no longer defaulting #8562

jaydenseric commented Aug 28, 2018

babel-bot commented Aug 28, 2018

loganfsmyth commented Aug 28, 2018

jaydenseric commented Aug 28, 2018

loganfsmyth commented Aug 28, 2018 •

edited

the-simian commented Aug 28, 2018 •

edited

nicolo-ribaudo commented Aug 28, 2018

the-simian commented Aug 29, 2018 •

edited

This comment has been minimized.

nicolo-ribaudo commented Aug 29, 2018

the-simian commented Aug 29, 2018 •

edited

nicolo-ribaudo commented Aug 30, 2018

jaydenseric commented Aug 30, 2018 •

edited

nicolo-ribaudo commented Aug 30, 2018

existentialism commented Aug 30, 2018 •

edited

damianobarbati commented Sep 2, 2018

the-simian commented Sep 3, 2018

wyuenho commented Sep 9, 2018

wyuenho commented Sep 9, 2018 •

edited

xtuc commented Sep 10, 2018

jcabrerazuniga commented Nov 1, 2018

nicolo-ribaudo commented Nov 1, 2018

charlesritchea commented Nov 6, 2018

nicolo-ribaudo commented Nov 6, 2018

charlesritchea commented Nov 6, 2018

nicolo-ribaudo commented Nov 6, 2018

charlesritchea commented Nov 6, 2018 via email

Aszmel commented Jan 6, 2019 •

edited

sergiotapia commented Apr 5, 2019

hoenth commented Apr 23, 2019

Parser decorators plugin option decoratorsBeforeExport no longer defaulting #8562

Parser decorators plugin option decoratorsBeforeExport no longer defaulting #8562

Comments

jaydenseric commented Aug 28, 2018

Bug Report

babel-bot commented Aug 28, 2018

loganfsmyth commented Aug 28, 2018

jaydenseric commented Aug 28, 2018

loganfsmyth commented Aug 28, 2018 • edited

the-simian commented Aug 28, 2018 • edited

nicolo-ribaudo commented Aug 28, 2018

the-simian commented Aug 29, 2018 • edited

This comment has been minimized.

nicolo-ribaudo commented Aug 29, 2018

the-simian commented Aug 29, 2018 • edited

nicolo-ribaudo commented Aug 30, 2018

jaydenseric commented Aug 30, 2018 • edited

nicolo-ribaudo commented Aug 30, 2018

existentialism commented Aug 30, 2018 • edited

damianobarbati commented Sep 2, 2018

the-simian commented Sep 3, 2018

wyuenho commented Sep 9, 2018

wyuenho commented Sep 9, 2018 • edited

xtuc commented Sep 10, 2018

jcabrerazuniga commented Nov 1, 2018

nicolo-ribaudo commented Nov 1, 2018

charlesritchea commented Nov 6, 2018

nicolo-ribaudo commented Nov 6, 2018

charlesritchea commented Nov 6, 2018

nicolo-ribaudo commented Nov 6, 2018

charlesritchea commented Nov 6, 2018 via email

Aszmel commented Jan 6, 2019 • edited

sergiotapia commented Apr 5, 2019

hoenth commented Apr 23, 2019

Parser `decorators` plugin option `decoratorsBeforeExport` no longer defaulting #8562

Parser `decorators` plugin option `decoratorsBeforeExport` no longer defaulting #8562

loganfsmyth commented Aug 28, 2018 •

edited

the-simian commented Aug 28, 2018 •

edited

the-simian commented Aug 29, 2018 •

edited

the-simian commented Aug 29, 2018 •

edited

jaydenseric commented Aug 30, 2018 •

edited

existentialism commented Aug 30, 2018 •

edited

wyuenho commented Sep 9, 2018 •

edited

Aszmel commented Jan 6, 2019 •

edited