Babel 'decorators-legacy' syntax isn't currently enabled

[Maczuga]

Hello. I am currently migrating my old workspace setup to match the one from example. There seems to be an issue with TypeScript decorators when imported TS file is inside a monorepo, but outside the Next.JS app location.

• I am using tsconfig path method, same issue is present with next-transpile-modules.
• I have added the webpack config for Next.JS app.

This is the error:

My project structure is:
| packages
| -- components
| -- utils
| websites
| -- ts4u-client

next dev is being launched from 'websites/ts4u-client'.

Same decorators were working with my previous setup, where I had to precompile all 'packages' content before launching the next dev command.

Any ideas what could cause the problem?

[belgattitude]

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 (babel-jest issues with monorepo and jest multi project runner  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
          }
        ]
      ],
    },
  },
};

[belgattitude]

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 😄

[Maczuga]

@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.

[belgattitude]

@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).

[Maczuga]

@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!