Next.js: “transform-decorators-legacy” does not work with next@7

[jim-king-2000]

"transform-decorators-legacy" works fine with next@6. Here is the version:

"dependencies": {
    "mobx": "^5.1.2",
    "mobx-react": "^5.2.8",
    "next": "^6.1.2",
    "babel-plugin-styled-components": "^1.7.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.5"
}

{
  "presets": [
    "next/babel"
  ],
  "plugins": [
    "transform-decorators-legacy",
    [
      "babel-plugin-styled-components", 
      {
        "ssr": true, 
        "displayName": true, 
        "preprocess": false 
      }
    ]
  ]
}

Then change the version of next.js to 7.0.0. The error occurs:

Module build failed (from ./node_modules/next/dist/build/webpack/loaders/next-babel-loader.js):
Error: The 'decorators' plugin requires a 'decoratorsBeforeExport' option, whose value must be a boolean. If you are migrating from Babylon/Babel 6 or want to use the old decorators proposal, you should use the 'decorators-legacy' plugin instead of 'decorators'.
at validatePlugins (C:\Users\Jim_K\Downloads\projects\hello-next\node_modules\@babel\parser\lib\index.js:10421:13)
at getParser (C:\Users\Jim_K\Downloads\projects\hello-next\node_modules\@babel\parser\lib\index.js:10478:5)
at parse (C:\Users\Jim_K\Downloads\projects\hello-next\node_modules\@babel\parser\lib\index.js:10462:12)
at parser (C:\Users\Jim_K\Downloads\projects\hello-next\node_modules\@babel\core\lib\transformation\normalize-file.js:170:34)
at normalizeFile (C:\Users\Jim_K\Downloads\projects\hello-next\node_modules\@babel\core\lib\transformation\normalize-file.js:138:11)
at runSync (C:\Users\Jim_K\Downloads\projects\hello-next\node_modules\@babel\core\lib\transformation\index.js:44:43)
at runAsync (C:\Users\Jim_K\Downloads\projects\hello-next\node_modules\@babel\core\lib\transformation\index.js:35:14)
at process.nextTick (C:\Users\Jim_K\Downloads\projects\hello-next\node_modules\@babel\core\lib\transform.js:34:34)
at process._tickCallback (internal/process/next_tick.js:61:11)

Is there any workaround for this? Or is there another decorator plugin which can work with next@7?

[timneutkens]

Please follow the issue template and create a minimal reproduction.

[Aeonrush]

Hi
Looks like it a Babel related, not a Next (sorry, if I'm not right). Do you read Babel doc about transform-decorators?

[jim-king-2000]

I'll create a repro ASAP. It is probably the Babel 7 issue. However, I still don't know how to to after reading the Babel doc.

[jim-king-2000]

By the way, I tried the "transform-decorators" plug-in. The same error occurs.

[jim-king-2000]

Here is the repo:
"https://github.com/jim-king-2000/nextbugrepro.git"
"[email protected]:jim-king-2000/nextbugrepro.git"

Steps:

1. Clone the code.
2. npm i && npm run dev
3. Open "localhost:3000"

Use next@6 and try again.

[cdonohue]

@jim-king-2000 did you try adding the decoratorsBeforeExport option to your Babel configuration?

...
"plugins": [
  ["@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true }],
  ...
]
...

[jim-king-2000]

@cdonohue The same error remains. Have pushed the change into the repro.

[MaxGraey]

I use ["@babel/plugin-proposal-decorators", { "legacy": true }] and this works for me

[jim-king-2000]

It works! Thank @MaxGraey . I'll use ["@babel/plugin-proposal-decorators", { "legacy": true }] instead.

[jim-king-2000]

But every articles of mobx suggest "transform-decorators-legacy". It would be a huge trouble to use mobx and next@7 together.

[jim-king-2000]

@MaxGraey , it will introduce another error. I'll update my repro ASAP.

Error message:
./components/Canvas/index.js
Syntax error: D:projectslocation-service-fireeyefe-fireeyecomponentsCanvasindex.js: Support for the experimental syntax 'decorators' isn't currently enabled (12:1):

10 | const point = {longitude: 121.33209608289931, latitude: 31.15187445746528};
11 |

12 | @inject('appStore')
| ^
13 | @observer
14 | class Canvas extends Component {
15 | constructor() {

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

After the investigation, the error only occurs when using next@6. It's OK using next@7.

[cdonohue]

@jim-king-2000 the issue here: https://github.com/zeit/next.js/issues/5231#issuecomment-423203458 was that you still had the transform-decorators-legacy with no additional options. Removing that plugin solved it for me.

[jim-king-2000]

@MaxGraey @cdonohue , ["@babel/plugin-proposal-decorators", { "legacy": true }] works with next@7, but not with next@6. And, transform-decorators-legacy works with next@6 while not with next@7. My problem has been resolved, I'll use ["@babel/plugin-proposal-decorators", { "legacy": true }] together with next@7. However, the situation of mobx + next@6 or next@7 is still messy.

[jim-king-2000]

It is extremely tricky to use mobx together with next@7. After spending several days investigating next@7, mobx, bable plugins, I make the minimal sample code of "mobx + next@7". Here is the repo:
"https://github.com/jim-king-2000/nextbugrepro.git"
"[email protected]:jim-king-2000/nextbugrepro.git"

The trickiest thing is in the .babelrc file.

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

We have to use the two plugins above for the decorator grammar. And the order of the two plugins cannot be reversed.

I strongly suggest that "mobx + next@7" should be added into the tutorial of next.js.

[timneutkens]

Feel free to update the example in the examples folder.

[xilanhthanki]

I just upgrade to next@7 and also use this config:

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

But still see the error: Support for the experimental syntax 'decorators-legacy' isn't currently enabled (9:1): at @withI18next('translations')

This is my package.json

{
    "name": "consumer-nextjs",
    "scripts": {
        "start": "node server.js",
        "build": "next build",
        "server": "SET NODE_ENV=production&& node server.js"
    },
    "dependencies": {
        "@zeit/next-css": "^1.0.1",
        "@zeit/next-sass": "^1.0.1",
        "bootstrap": "^4.1.3",
        "express": "^4.16.3",
        "i18next": "11.3.6",
        "i18next-browser-languagedetector": "2.2.0",
        "i18next-express-middleware": "1.2.0",
        "i18next-node-fs-backend": "1.2.1",
        "i18next-xhr-backend": "1.5.1",
        "isomorphic-unfetch": "^2.1.1",
        "moment": "^2.22.2",
        "next": "^7.0.0",
        "next-images": "^1.0.0",
        "node-sass": "^4.9.3",
        "react": "^16.4.2",
        "react-dom": "^16.4.2",
        "react-i18next": "7.8.1",
        "react-id-swiper": "^1.6.7",
        "react-image": "^1.4.1",
        "react-redux": "^5.0.7",
        "reactstrap": "^6.4.0",
        "redux": "^4.0.0",
        "redux-persist": "^5.10.0"
    },
    "devDependencies": {
        "@babel/core": "^7.0.0",
        "@babel/plugin-proposal-decorators": "^7.1.0",
        "babel-eslint": "8",
        "css-loader": "^1.0.0",
        "eslint": "^5.4.0",
        "eslint-loader": "^2.1.0",
        "eslint-plugin-react": "^7.11.1",
        "moment-locales-webpack-plugin": "^1.0.7",
        "redux-devtools-extension": "^2.13.5",
        "sass-loader": "^7.1.0",
        "style-loader": "^0.23.0",
        "url-loader": "^1.1.1"
    }
}

And the next.config.js

const path = require('path');
const withSass = require('@zeit/next-sass');
const withImages = require('next-images');
const withCSS = require('@zeit/next-css');
const MomentLocalesPlugin = require('moment-locales-webpack-plugin');

module.exports = withSass(withCSS(withImages({
    webpack: (config, { dev }) => {
        // Fixes npm packages that depend on `fs` module
        config.node = {
          fs: 'empty'
        }
        config.module.rules.push(
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/i,
                use: [
                  {
                    loader: 'url-loader',
                    options: {
                        limit: 8192
                    }
                  }
                ]
            }
        )
        if (dev) {
            config.module.rules.push({
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: 'eslint-loader',
                options: {
                    // eslint options (if necessary)
                }
            })
        }
        // module resolve
        config.resolve.modules.push(path.resolve('./'))
        return config
    },
    sassLoaderOptions: {
        includePaths: [
            "./"
        ]
    }
})));

Please correct me.
Thanks.

[jim-king-2000]

It seems the culprit is "withI18next". I don't know what it is, maybe you could remove it and try again?

[rizkisunaryo]

Thank you @jim-king-2000 . Your solution works for me.

[jim-king-2000]

See "https://github.com/jim-king-2000/mobxSampleWithNext7" for mobx + next@7.

[deepthi2798]

It is extremely tricky to use mobx together with next@7. After spending several days investigating next@7, mobx, bable plugins, I make the minimal sample code of "mobx + next@7". Here is the repo:
"https://github.com/jim-king-2000/nextbugrepro.git"
"[email protected]:jim-king-2000/nextbugrepro.git"

The trickiest thing is in the .babelrc file.

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

We have to use the two plugins above for the decorator grammar. And the order of the two plugins cannot be reversed.

I strongly suggest that "mobx + next@7" should be added into the tutorial of next.js.

this config works for me!