Next.js: Decorators plugin order causing build to fail

[willopez]

The nextjs' build fails due to the babel plugin order. NextJS includes this plugin "@babel/plugin-proposal-class-properties", and my project needs this one @babel/plugin-proposal-decorators, apparently the order is causing the build to fail.

To Reproduce
Clone the project below and check out branch: feat-upgrade-to-nextjs-6 and execute docker-compose up --build

Expected behavior

ERROR  Failed to compile with 3 errors

error  in ./src/lib/stores/AuthStore.js

Syntax Error: Method has decorators, put the decorator plugin before the classes one.
@observable _token = "";

@computed get token() {

return this._token;
}

System information

• OS: macOS]
• NextJS 6

Additional context
.babelrc

{
  "presets": [
    [
      "@babel/preset-stage-2",
      {
        "decoratorsLegacy": true,
        "loose": true
      }
    ],
    [
      "next/babel",
      {
        "preset-env": {
          "targets": {
            "node": "current",
            "browsers": [
              "last 2 versions"
            ]
          }
        }

      }
    ]
  ],
  "plugins": [
    [
      "module-resolver",
      {
        "root": [
          "./src"
        ]
      }
    ]
  ]
}

dependencies and dev dependencies:

"dependencies": {
    "apollo-cache-inmemory": "^1.1.11",
    "apollo-client": "^2.2.7",
    "apollo-link-http": "^1.5.4",
    "body-parser": "^1.18.2",
    "chalk": "^2.3.2",
    "classnames": "^2.2.5",
    "express": "^4.16.3",
    "graphql": "^0.13.1",
    "graphql-tag": "^2.8.0",
    "isomorphic-fetch": "^2.2.1",
    "js-cookie": "^2.2.0",
    "keymirror": "^0.1.1",
    "material-ui": "^1.0.0-beta.44",
    "mdi-material-ui": "^3.2.0",
    "mobx": "^4.1.1",
    "mobx-react": "^5.0.0",
    "next": "^6.0.0",
    "next-routes": "^1.4.1",
    "passport": "^0.4.0",
    "passport-cookie": "^1.0.6",
    "prop-types": "^15.6.1",
    "react": "^16.3.0",
    "react-apollo": "^2.1.3",
    "react-dom": "^16.3.0",
    "react-helmet": "^5.2.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.0.0-beta.46",
    "@babel/core": "^7.0.0-beta.46",
    "@babel/node": "^7.0.0-beta.46",
    "@babel/plugin-proposal-decorators": "^7.0.0-beta.46",
    "@babel/preset-stage-2": "^7.0.0-beta.46",
    "@reactioncommerce/eslint-config": "^1.7.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^8.2.2",
    "babel-jest": "^22.4.3",
    "babel-plugin-module-resolver": "^3.1.1",
    "babel-watch": "^2.0.7",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "eslint": "^4.19.1",
    "eslint-plugin-import": "^2.10.0",
    "eslint-plugin-jest": "^21.15.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-promise": "^3.7.0",
    "eslint-plugin-react": "^7.7.0",
    "jest": "^22.4.3",
    "jest-junit": "^3.6.0",
    "jest-transform-graphql": "2.1.0",
    "react-test-renderer": "^16.3.1",
    "rimraf": "^2.6.2",
    "snyk": "^1.73.0"
  },

[willopez]

Issue fixed by using legacy decorators plugin.

[marek-sed]

@willopez Hi did you solve it? I ran into same issue with @babel/core 7.0.0-beta.55.

what do you mean by legacy decortar plugin

[willopez]

@marek-sed solved by using a this .babelrc config:
{ "presets": [ ["next/babel", { "preset-env": { "modules": "commonjs", "targets": { "node": "current", "browsers": [ "last 2 versions" ] } } }] ], "env": { "development": { "plugins": [ "transform-decorators-legacy", "transform-class-properties" ] }, "production": { "plugins": [ ["@babel/plugin-proposal-decorators", { "legacy": true }], ["@babel/plugin-proposal-class-properties", { "loose": true }] ] }, "jesttest": { "plugins": [ ["@babel/plugin-proposal-decorators", { "legacy": true }], ["@babel/plugin-proposal-class-properties", { "loose": true }] ] } } }
And you will need to add @babel/plugin-proposal-decorators and @babel/plugin-proposal-class-properties to your project.

[timneutkens]

modules": "commonjs"

never do this, it disables tree shaking in webpack. There’s no good reason to provide this option. Only for the test env it might be required

[willopez]

@timneutkens Hi Tim and thanks for your suggestion, I would like to enable tree shaking. However, when I remove "commnjs" from the .babelrc I get the following error:
/usr/local/src/reaction-app/src/server.js:1 (function (exports, require, module, __filename, __dirname) { import cookieParser from "cookie-parser"; SyntaxError: Unexpected token import

If you are inclined to see the context, your can run this project and see se error: https://github.com/reactioncommerce/reaction-next-starterkit