SWC: using custom config in a root directory

[zetoke]

Describe the feature you'd like to request

It would be cool if Next.js can pickup a custom .swcrc config file in a project root directory.
For example, I have decorators in project's codebase and I have .swcrc file

{
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": true,
      "dynamicImport": true,
      "decorators": true
    },
    "target": "es2021"
  },
  "module": {
    "type": "es6"
  }
}

So I turned on decorators support and tests are running just fine for the last weeks.
But Next.js struggle to compile it.

Error: error: Unexpected token `@`. Expected this, import, async, function, [ for array literal, { for object literal, @ for decorator, function, class, null, true, false, number, bigint, string, regexp, ` for template literal, (, or an identifier

Describe the solution you'd like

It would be cool if Next.js can pickup a custom .swcrc config file in a project root directory.

Describe alternatives you've considered

Next.js having all those things turned on by default may be?

[justinoboyle]

this has also been the only hurdle for us switching to swc: decorator support

similar config here in .swcrc:

{
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": true,
      "decorators": true
    }
  }
}

congrats on the launch, by the way!

[salembaira]

Crossing fingers and waiting for this!

[timneutkens]

Loading .swcrc has been disabled in 12.0.1 as it was unintentionally enabled and causes issues like these where customizations don't work correctly yet. Please post your custom Babel configuration #30174 as it helps with prioritization.

[egoist]

For decorators maybe Next could check tsconfig.json and toggle it automatically?

[madeleineostoja]

Feel like we should be able to customise SWC parsing going forward, like we can atm with Babel, rather than keeping that in Next core config

[madeleineostoja]

FWIW I have similar requirements — decorators, typescript decorator metadata, and custom JSX importSource for emotion's css prop, all of which can be handled with existing SWC config

[sannajammeh]

Agreed. SWC should be customizable.

[salembaira]

I'm currently using a next patch to enable decorators but waiting for a more permenanent solution.

[robertveloso]

please, could you share how you manage that

[salembaira]

by using https://github.com/ds300/patch-package. You can download below my patch for 12.0.2 which adds support for decorators and removes console.log in production build. Extract it and put it in the patches folder in the root directory then hit "yarn" or "npm install".

next+12.0.2.zip

[CryogenicPlanet]

Can you share the patch as a gist instead of a zip @baira it would be easier for people to copy and use

[salembaira]

Ok here is the gist :

https://gist.github.com/Baira/bd17433ff7bb0ad27122db8ffb896e81

Make sure you have an empty new line at the end of the file when saving

[karibertils]

I need to modify .swcrc for supporting @emotion

{
	"jsc": {
		"parser": {
			"syntax": "typescript",
			"tsx": true
		},
		"transform": {
			"react": {
				"runtime": "automatic",
				"refresh": true,
				"importSource": "@emotion/react"
			}
		}
	}
}

I need to add /** @jsxImportSource @emotion/react */ to every single .tsx file as a workaround...

[timneutkens]

You can set importSource already: https://nextjs.org/docs/advanced-features/compiler#importsource

[harisraharjo]

please add support for drop console too

[timneutkens]

That's already supported. Please refer to the same docs page linked above. https://nextjs.org/docs/advanced-features/compiler#remove-console

[sbward]

Hi, I need to use an SWC plugin (WASM) but this requires editing .swcrc. Is there a workaround?

[erosenberg]

Is it possible to enable "privateMethod": false anywhere? I'm trying to use class private methods and can't figure out how to get Next 12.2.2 to compile with SWC. If we can't use .swcrc, where can we actually configure these options?

[jviall]

Even if .swcrc is not supported yet, is changing the default type/module/target possible?

[TechQuery]

Fallback to Babel for now:

module.exports = {
  presets: [
    // https://babeljs.io/docs/babel-preset-typescript
    [
      '@babel/preset-typescript',
      {
        allowDeclareFields: true,
        allowNamespaces: true,
        allExtensions: true,
        isTSX: true,
      },
    ],
    // https://babeljs.io/docs/babel-preset-react
    [
      '@babel/preset-react',
      {
        runtime: 'automatic',
        development: process.env.BABEL_ENV === 'development',
      },
    ],
  ],
  // https://babeljs.io/docs/babel-plugin-proposal-decorators#note-compatibility-with-babelplugin-transform-class-properties
  plugins: [['@babel/plugin-proposal-decorators', { version: '2023-05' }]],
};

Full example is in idea2app/Next-Bootstrap-ts#38 .

[JoelBonetR]

Top level await support is what we're craving for

[wojtekmaj]

I might need it to fix #33914

[shockbs]

bump