Babel 'decorators-legacy' syntax isn't currently enabled about nextjs-monorepo-example HOT 5 CLOSED

Hey @Maczuga , I've never dared to play with decorators and babel compiler :)

My intuitions:

• Prefer babel.config.js rather than .babelrc (must have in a monorepo structure)... You can convert it from the nextjs .babelrc example and add the plugins you need.

• You might have to use babelRoots at the top (jestjs/jest#7359). I'm nt sure if it's fixed...

Let me know if t helps or send me your babel config...

Happy new year !

PS:

Examples taken from older projects:

// file: <monorepoRoot>/babel.config/js
module.exports = {
  // jest: https://github.com/facebook/jest/issues/7359
  babelrcRoots: [ './apps/my-app/*' ],
  presets: [ '@babel/preset-typescript' ],
};

// file <apps/my-app>/babel.config.js 
module.exports = {
  env: {
    development: {
      presets: [
        [
          'next/babel',
          {
            'preset-env': {},
            'transform-runtime': {},
            'styled-jsx': {},
            'class-properties': {},
          },
        ],
      ],
      plugins: [
        [
          "@babel/plugin-proposal-decorators",
          {
            "legacy": true
          }
        ]
      ],
    },
    production: {
      presets: [
        [
          'next/babel',
          {
            'preset-env': {},
            'transform-runtime': {},
            'styled-jsx': {},
            'class-properties': {},
          },
        ],
      ],
      plugins: [
        [
          "@babel/plugin-proposal-decorators",
          {
            "legacy": true
          }
        ]
      ],
    },
  },
};

from nextjs-monorepo-example.

@belgattitude Happy new year to you too!

I didn't have any custom babel config file at that time, thought that Next.JS would take care of it.

The babel.config.js file in workspace directory helped with addition of this in my web-app:

websites/ts4u-website/babel.config.js

module.exports = {
  presets: [
    [
      "next/babel",
    ],
  ],
  plugins: [
    ["@babel/plugin-proposal-decorators", {"legacy": true}]
  ],
};

But now other issues remains, not related to babel this time, but either webpack or next.js itself trying to import server modules into client (like nodemailer, bcrypt etc), even if those are only imported in pages/api.ts files. Will post that in another issue for clearity.

from nextjs-monorepo-example.

@belgattitude The class properties was not needed in fact. Kinda copied those 2 lines from other issue on Next.JS. I have edited the previous reply accordingly.

And the bundle problem was in fact my own issue with barreling both client and server functions into single index file. I have split that dir separate client/server includes. The mono-repo with prop. decorators is now working better than ever before!

from nextjs-monorepo-example.

At least your babel config must have ["@babel/plugin-proposal-decorators", { "legacy": true }]. See also https://stackoverflow.com/questions/54332378/now-sh-build-breaking-due-to-support-for-the-experimental-syntax-decorators-le/65502903#65502903

I've edited the snippet above, but haven't tested it 😄

from nextjs-monorepo-example.

@Maczuga nice !

Out of curiosity, is the class properties plugin required ?

And by the way the bundle problem is totally fixable in my experience. Be sure to never import backend classes into client side ones. I generally work with two containers (+/- di-backend, di-frontend).

from nextjs-monorepo-example.