Next.js: Unable to get decorators working

[trusktr]

Bug report

Describe the bug

I tried using a decorator, then Next output said

Add @babel/plugin-proposal-decorators (https://git.io/vb4ST) to the 'plugins' section of your Babel config to enable transformation.

so I npm installed it and added it to my .babelrc.

Then, when I restart next I get the same error.

Babelrc:

{
  "presets": [
    "next/babel",
    "@zeit/next-typescript/babel"
  ],
  "plugins": [
    ["@babel/plugin-proposal-decorators", {
      "legacy": true
    }]
  ]
}

If I remove the "legacy": true from babelrc, then the output complains that I need it, so at least that part is working. Once I add "legacy": true it goes back to telling me I need to add @babel/plugin-proposal-decorators to my plugins.

To Reproduce

^

Expected behavior

It'd be sweet to get it working.

System information

• OS: macOS
• Version of Next.js: 6.1.1

[trusktr]

Seems like this is a similar, but older issue: https://github.com/zeit/next.js/issues/1660

I see this one: https://github.com/zeit/next.js/issues/4707

[trusktr]

Ah, that solved it: https://github.com/zeit/next.js/issues/4707#issuecomment-414155609

[wl00887404]

@trusktr
I failed to use @babel-/plugin-* with nextjs 6.1.2 last night.
but I get it working with nextjs 7.0.0-canary.16.
I think update nextjs is another solution.

[WingMrL]

I'm running Next 9.
It works with .babelrc like this:

{
  "presets": [
    [
      "next/babel",
      {
        "class-properties": {
          "loose": true
        }
      }
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ]
  ]
}

[techedemic]

I'm running Next 9.
It works with .babelrc like this:

{
  "presets": [
    [
      "next/babel",
      {
        "class-properties": {
          "loose": true
        }
      }
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ]
  ]
}

@WingMrL thanks for this, it solved it for me. I was having a hard time getting 'mobx' to work with NextJS.

Could you perhaps explain 'why' this works?

[kenberkeley]

If using TS, just learn from https://github.com/zeit/next.js/blob/canary/examples/with-mobx-state-tree-typescript/.babelrc

Don't forget to set "experimentalDecorators": true in tsconfig.json

[ericgoe]

If using TS, just learn from https://github.com/zeit/next.js/blob/canary/examples/with-mobx-state-tree-typescript/.babelrc

Don't forget to set "experimentalDecorators": true in tsconfig.json
@kenberkeley

This doesn't work for me.
I get the following error at runtime when executing next. I'm using next v9.3.3.

Module parse failed: Unexpected character '@' (4:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

ps: I've also set "experimentalDecorators": true

Do you or anybody else have an idea ?