Opted out of SWC feedback #30174
Replies: 797 comments 343 replies
-
|
Hey! Here's the babel config we are using: const getPresets = (options = {}) => ({
presets: options.presets || ['next/babel'],
plugins: [['styled-components', { ssr: true }], ...(options.plugins || [])],
})
module.exports = {
env: {
production: getPresets({
plugins: [
['react-remove-properties', { properties: ['data-test-id'] }],
'transform-remove-console',
],
}),
development: getPresets({
presets: [
[
'next/babel',
{
'preset-react': {
importSource: '@welldone-software/why-did-you-render',
},
},
],
],
}),
test: getPresets({
plugins: [
'transform-react-remove-prop-types',
'transform-dynamic-import',
'require-context-hook',
],
presets: [['next/babel']],
}),
},
plugins: [
[
'@babel/plugin-proposal-decorators',
{
legacy: true,
},
],
],
} |
Beta Was this translation helpful? Give feedback.
-
|
We also use |
Beta Was this translation helpful? Give feedback.
-
|
We use transform-react-remove-prop-types as well! Would love to see it ported to SWC 🙏 |
Beta Was this translation helpful? Give feedback.
-
|
I've got Babel configured to optionally add code coverage if an environment variable is enabled: // babel.config.js
module.exports = function (api) {
api.cache(true);
const plugins = [];
if (process.env.INSTRUMENT_COVERAGE === 'true') {
console.log('Instrumenting Next client for code coverage...');
plugins.push('babel-plugin-istanbul');
}
return {
presets: ['next/babel'],
plugins
};
}; |
Beta Was this translation helpful? Give feedback.
-
|
Made a feature request for SWC support, not sure if this is the right place to make it though. swc-project/swc#4114 |
Beta Was this translation helpful? Give feedback.
-
|
Temporary solution till there's official support: #30174 (reply in thread) |
Beta Was this translation helpful? Give feedback.
-
|
Hacky solution here https://stackoverflow.com/questions/71564063/can-i-get-next-js-to-exclude-babelrc-during-build |
Beta Was this translation helpful? Give feedback.
-
|
See https://github.com/kwonoj/swc-coverage-instrument |
Beta Was this translation helpful? Give feedback.
-
|
One huge issue with swc-coverage-instrument is an inability to pair it with technology like Code coverage is the last thing that has me clinging to Babel. |
Beta Was this translation helpful? Give feedback.
-
|
Here's ours:
module.exports = {
presets: ["next/babel"],
plugins: [
[
"babel-plugin-module-resolver",
{
root: ["."],
alias: {
"@app": "./app",
},
},
],
"babel-plugin-macros",
"superjson-next",
["@babel/plugin-proposal-decorators", { legacy: true }],
],
}; |
Beta Was this translation helpful? Give feedback.
-
|
Here also using |
Beta Was this translation helpful? Give feedback.
-
|
I ported superjson-next to an swc plugin but it's not possible to add to nextjs as a custom plugin? |
Beta Was this translation helpful? Give feedback.
-
|
Module alias and Decorator should be added. |
Beta Was this translation helpful? Give feedback.
-
|
babel-plugin-macros please. I'm using it for TailwindCSS |
Beta Was this translation helpful? Give feedback.
-
|
🚀 next-superjson-plugin is released! Please check README.md and follow the instructions to apply the plugin. |
Beta Was this translation helpful? Give feedback.
-
|
Do I need the canary version to opt into SWC? I can't find any documentation on this. I currently use the |
Beta Was this translation helpful? Give feedback.
-
|
Will there also be a next-swc loader that can replace babel-node / ts-node (or equivalents?). Beyond Jest, I also need to run scripts to generate an RSS feed and Sitemap. |
Beta Was this translation helpful? Give feedback.
-
|
If you only need Here's a link to Babel docs: https://babeljs.io/docs/en/config-files package.json: ...
"babel": {
"presets": ["next/babel"]
} |
Beta Was this translation helpful? Give feedback.
-
|
Moving the babel config into I was able to fix this by renaming the file to something that won't be picked up automatically, e.g., transform: {
"^.+\\.jsx?$": ["babel-jest", { configFile: "./babel.jest.config.js" }],
}, |
Beta Was this translation helpful? Give feedback.
-
|
I've posted an update on Jest support on the initial post! #30174 (comment) |
Beta Was this translation helpful? Give feedback.
-
|
Jest support is now available: #30174 (comment) |
Beta Was this translation helpful? Give feedback.
-
|
Another very important plugin for me is |
Beta Was this translation helpful? Give feedback.
-
|
Maybe additionally: I only use |
Beta Was this translation helpful? Give feedback.
-
|
I made a next plugin that runs the superjson babel transform only on the |
Beta Was this translation helpful? Give feedback.
-
|
🚀 next-superjson-plugin is released! Please check README.md and follow the instructions to apply the plugin. |
Beta Was this translation helpful? Give feedback.
-
|
We are using the following configuration in the Dutch corona dashboard front-end application: // babel.config.js
module.exports = function (api) {
return {
presets: ['next/babel'],
plugins: [
'lodash',
'date-fns',
[
'babel-plugin-styled-components',
{
ssr: true,
pure: true,
displayName: api.env('development'),
},
],
],
};
}; |
Beta Was this translation helpful? Give feedback.
-
|
Any updates on styled-components support on SWC yet? |
Beta Was this translation helpful? Give feedback.
-
|
Styled-component is available to try now: #30174 (comment) |
Beta Was this translation helpful? Give feedback.
-
Could you please let me know is this ssr enabled. Do I need to do any configuration for this? |
Beta Was this translation helpful? Give feedback.
-
|
@timneutkens do we still need the canary version and the experimental flag? I'm not to keen on using experimental stuff in production for a large project 😄 |
Beta Was this translation helpful? Give feedback.
-
|
Lodash and Date-fns are also part of our |
Beta Was this translation helpful? Give feedback.
-
|
This is my babel config, one of the most important plugins I would like to see ported is babel-plugin-macros which I use for tailwind class macros. {
"presets": [
"next/babel"
],
"plugins": [
"babel-plugin-macros",
"babel-plugin-polished",
"@vanilla-extract/babel-plugin"
]
} |
Beta Was this translation helpful? Give feedback.
-
|
Macros here |
Beta Was this translation helpful? Give feedback.
-
|
+1 for |
Beta Was this translation helpful? Give feedback.
-
|
+1 for |
Beta Was this translation helpful? Give feedback.
-
|
already 1 year later, was hoping i'd find a resolution here 😢 |
Beta Was this translation helpful? Give feedback.
-
|
+1 This is a hard blocker for us. |
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
-
|
Styled-component is available now: #30174 (comment) |
Beta Was this translation helpful? Give feedback.
-
module.exports = api => {
api.cache(true);
return {
presets: [
[
'next/babel',
{
'preset-react': {
runtime: 'automatic',
importSource: '@emotion/react'
}
}
]
],
env: {
production: {
plugins: [
[
'@emotion',
{
sourceMap: true,
autoLabel: 'never',
labelFormat: true,
cssPropOptimization: true
}
]
]
},
development: {
plugins: [
[
'@emotion',
{
sourceMap: true,
autoLabel: 'always',
labelFormat: '[local]--[filename]',
cssPropOptimization: false
}
]
]
}
}
};
}; |
Beta Was this translation helpful? Give feedback.
-
|
This is ours: {
"presets": [
[
"next/babel",
{
"preset-react": {
"runtime": "automatic",
"importSource": "@emotion/react"
}
}
]
],
"plugins": [
["./libs/governance/getFileClaimBabelPlugin.js", {}],
["@emotion/babel-plugin", {}],
"lodash"
],
"env": {
"test": {
"presets": [
[
"next/babel",
{
"preset-react": {
"runtime": "automatic"
}
}
]
]
}
}
}Would be great if we also have custom plugin support going forward! |
Beta Was this translation helpful? Give feedback.
-
|
Any update on custom plugin support? |
Beta Was this translation helpful? Give feedback.
-
|
there are two prs to enable it - one has only 15 lines of code: we tried it in a minimal next setup and it worked very well with https://www.npmjs.com/package/css-variable the other one which is slightly older is from one of the SWC maintainers themself: so with some luck and support from vercel we might get blazing fast SWC WASM Rust plugins with one of the next feature releases :) |
Beta Was this translation helpful? Give feedback.
-
|
🤞🏻 |
Beta Was this translation helpful? Give feedback.
-
|
vercel merged #36790 and released it as npm canary version 12.1.7-canary.27 here is an example how you can now use experimental swc wasm plugins: beside some minor bugs (#37409) it works very well so far 👍 |
Beta Was this translation helpful? Give feedback.
-
|
This is ours: module.exports = {
presets: [
[
'next/babel',
{
'preset-react': {
runtime: 'automatic',
importSource: '@emotion/react',
},
},
],
],
plugins: ['@emotion/babel-plugin'],
}; |
Beta Was this translation helpful? Give feedback.
-
|
Pretty similar to ours, just need that babel macro as well: |
Beta Was this translation helpful? Give feedback.
-
|
Mine is the exact same. Is there a way to use SWC with this config yet? |
Beta Was this translation helpful? Give feedback.
-
// .babelrc
{
"presets": ["next/babel"],
"plugins": [
[
"formatjs",
{
"ast": true,
"idInterpolationPattern": "[sha512:contenthash:base64:6]"
}
]
]
} |
Beta Was this translation helpful? Give feedback.
-
|
+1 for FormatJS |
Beta Was this translation helpful? Give feedback.
-
|
+1 for FormatJS |
Beta Was this translation helpful? Give feedback.
-
|
+1 for FormatJS |
Beta Was this translation helpful? Give feedback.
-
|
+1 for FormatJS |
Beta Was this translation helpful? Give feedback.
-
|
+1 for FormatJS |
Beta Was this translation helpful? Give feedback.
-
|
The main thing that we use babel for is using {
"presets": [
[
"next/babel",
{
"preset-env": {
"targets": "> 0.25%, not dead"
},
"styled-jsx": {
"plugins": ["@styled-jsx/plugin-sass"]
}
}
]
],
"plugins": [
"@babel/plugin-proposal-logical-assignment-operators",
[
"module-resolver",
{
"alias": {
"@icons": "./icons",
"@components": "./components",
"@utils": "./utils",
"@config": "./config"
}
}
]
]
}
|
Beta Was this translation helpful? Give feedback.
-
|
Oh also the only thing we really use SASS for is nested selectors which will hopefully be a thing in CSS soon... |
Beta Was this translation helpful? Give feedback.
-
|
@vpontis I just published this library styled-jsx-in-place to help to remove styled-jsx plugins from our codebase to be able to upgrade to next 12 |
Beta Was this translation helpful? Give feedback.
-
|
Styled components for us, willing to drop istanbul ;) /cc @mejackreed |
Beta Was this translation helpful? Give feedback.
-
|
Same question here, using Istanbul for Cypress code coverage. |
Beta Was this translation helpful? Give feedback.
-
|
Has anyone managed to get something running with Istanbul? thats really just the last (large) piece I feel is missing to have a solid setup. |
Beta Was this translation helpful? Give feedback.
-
|
Since we don't have an official plugin or support for istanbul, I've managed to get it working by stacking babel-loader on top of swc-loader. It increases the overall build time but since we run it only on CI, it doesn't matter that much. Sample webpack config: process.env.FRONTEND_COVERAGE && {
test: /\.(js|jsx)$/,
include: [path.join(__dirname, 'assets')],
exclude: /node_modules/,
loader: 'babel-loader',
options: {
cacheDirectory: true,
plugins: ['istanbul'],
presets: [
[
'@babel/preset-env',
{
targets: {
// Keep the babel target as modern as possible.
// We're using babel-loader only for the istanbul plugin and not for any transformation.
// Transformations are handled by swc-loader
browsers: ['last 2 versions'],
},
},
],
],
},
},
{
test: /\.(js|jsx)$/,
loader: 'swc-loader',
options: {
jsc: {
transform: {
react: {
development: true,
refresh: true,
},
},
},
parseMap: Boolean(process.env.FRONTEND_COVERAGE),
},
include: [path.join(__dirname, 'assets')],
exclude: /node_modules/,
} |
Beta Was this translation helpful? Give feedback.
-
|
Also hacky solution here https://stackoverflow.com/questions/71564063/can-i-get-next-js-to-exclude-babelrc-during-build |
Beta Was this translation helpful? Give feedback.
-
|
@sidx1024 can you somehow explain on how to integrate your hack into a custom nextjs 13 app folder enabled app? the code for the module.exports = {
webpack: (
config,
{ buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
) => {
// Important: return the modified config
return config
},
}i am fairly new to webpack. do i have to add it in my const path = require('path')
module.exports = {
experimental: {
appDir: true,
},
output: 'standalone',
webpack: (
config,
{ buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
) => {
// console.log('------------------------------------------------------------');
// console.log('config', JSON.stringify(config.module.rules, null, 2))
// console.log('------------------------------------------------------------');
process.env.INSTRUMENT_CODE && console.log('enabled');
process.env.INSTRUMENT_CODE && config.module.rules.push({
test: /\.(ts|tsx)$/,
include: [path.join(__dirname, 'assets')],
exclude: /node_modules/,
loader: 'babel-loader',
options: {
cacheDirectory: true,
plugins: ['istanbul'],
presets: [
[
'@babel/preset-env',
{
targets: {
// Keep the babel target as modern as possible.
// We're using babel-loader only for the istanbul plugin and not for any transformation.
// Transformations are handled by swc-loader
browsers: ['last 2 versions'],
},
},
],
],
},
})
config.module.rules.push({
test: /\.(ts|tsx)$/,
loader: 'swc-loader',
options: {
jsc: {
transform: {
react: {
development: true,
refresh: true,
},
},
},
parseMap: Boolean(process.env.INSTRUMENT_CODE),
},
include: [path.join(__dirname, 'assets')],
exclude: /node_modules/,
})
return config
},
}i defined the dev script like this do i have to somehow adapt this for a typescript nextjs project. thats what i use. thx for posting your hack! i hope, i can somehow get it running! |
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
-
Came here to post the same config 😄 |
Beta Was this translation helpful? Give feedback.
-
|
@Entkenntnis @elbotho I just published this library styled-jsx-in-place to help to remove styled-jsx plugins from our codebase to ease the upgrade to next 12 |
Beta Was this translation helpful? Give feedback.
-
|
I use the same babel config. Any idea if/when postcss and its plugins would be supported with styled-jsx and swc? |
Beta Was this translation helpful? Give feedback.
-
|
Looking for a plugin supporting something like this: It would be helpful to have something like this:
This makes react errors show up better |
Beta Was this translation helpful? Give feedback.
-
|
Here is our babelrc, coming from .next Version 11 { |
Beta Was this translation helpful? Give feedback.
-
|
SWC loader currently doesn't play well with transforming private properties and methods, I've whipped up a quick webpack config snippet to show how we can integrate this. config.module.rules.push({
test: /\.(?:js|ts)$/,
use: [
{
loader: "babel-loader",
options: {
presets: ["next/babel"],
plugins: [
"@babel/plugin-transform-private-property-in-object",
"@babel/plugin-transform-private-methods",
],
},
},
],
});If SWC supports |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
Any updates on this? I'm having the exact same issue |
Beta Was this translation helpful? Give feedback.
-
|
It's already fixed. You can use canary |
Beta Was this translation helpful? Give feedback.
-
|
Would it be possible to get the commit that ultimately fixed this applied for a 14.2.4 release? |
Beta Was this translation helpful? Give feedback.
-
|
I still encounter this problem in |
Beta Was this translation helpful? Give feedback.
-
It uses a subset of Emotion's features so that it is a zero-runtime CSS-in-JS solution. If you're working on Emotion and Styled-Components already, it makes sense to support this too, particularly since it fits the mold of being performance-first. |
Beta Was this translation helpful? Give feedback.
-
|
we are currently working on https://github.com/jantimon/next-yak which is a zero runtime css-in-js similar to compiled but different tradeoffs - it can be used together with SWC |
Beta Was this translation helpful? Give feedback.
-
|
Does it support css props as well? I think this is important to really doing it correctly. CSS and HTML should be close together. |
Beta Was this translation helpful? Give feedback.
-
|
the official react compiler (which tries to replace useMemo) is written in babel only: @kdy1 do you know if any plans to port react compiler to swc too? |
Beta Was this translation helpful? Give feedback.
-
|
could we please have plugins to transpile code for older browsers? namely things like react-query which now uses private fields. well, NextJS could still give support to target ES6 but that's another story... |
Beta Was this translation helpful? Give feedback.
-
|
Is it solved? I have the same problem |
Beta Was this translation helpful? Give feedback.
-
|
We are using flow type in our codebase and babel provides a plugin for it - "@babel/plugin-transform-flow-strip-types". We did a POC to switch to SWC as it will have significant improvement on performance. But SWC doesn't support flow type, hence we are not able to migrate to SWC. I found an issue which was raised by someone in SWC repo(swc-project/swc#256), but it has been closed. Can we expect support for ignoring flow types similar to what "@babel/plugin-transform-flow-strip-types" does? Here's the .babelrc {
"presets": ["next/babel"],
"plugins": [
[
"babel-plugin-styled-components",
{
"ssr": true,
"displayName": false
}
],
[
"module-resolver",
{
"root": ["./"],
"alias": {
"components": "./app/components",
"lib": "./app/lib",
"constants": "./app/constants",
"utils": "./app/utils",
"global": "./app/global"
}
}
],
"@babel/plugin-transform-flow-strip-types"
]
}Looking forward for a reply. Thanks. |
Beta Was this translation helpful? Give feedback.
-
|
could you try this loader? |
Beta Was this translation helpful? Give feedback.
-
|
@w01fgang Thanks, I tried this out it doesn't work. We have both functional and class components. I am getting following error- |
Beta Was this translation helpful? Give feedback.
-
|
This error means that |
Beta Was this translation helpful? Give feedback.
-
|
Hey, yes. I was just checking the flow-remove-types package and tried running following code- The output I am getting is - Not sure if I am doing something wrong but in output I can see What should be used from the above output during the build process( Also, here's my updated remove-flow-types.js - |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
You don't need to use babel to customize SWC minifier, and using babel won't disable SWC minifier. |
Beta Was this translation helpful? Give feedback.
-
|
.babelrc {
"presets": ["next/babel"],
"plugins": [
["@babel/plugin-proposal-decorators", { "version": "2023-05" }],
]
}We use MobX 6 as the global state manager. |
Beta Was this translation helpful? Give feedback.
-
|
Hey here is the babel config we are using module.exports = {
presets: ['next/babel'],
plugins: [
'@babel/plugin-proposal-export-namespace-from',
'@babel/plugin-proposal-export-default-from',
'@babel/plugin-transform-named-capturing-groups-regex',
'@babel/plugin-transform-class-properties',
'@babel/plugin-proposal-private-methods',
[
'styled-components',
{
ssr: true,
displayName: process.env.NODE_ENV === 'development',
preprocess: false,
},
],
],
}; |
Beta Was this translation helpful? Give feedback.
-
|
hey folks, here is our .babelrc We use Mobx 4 and these are (except last one) specifically for that. https://mobx.js.org/installation.html#use-spec-compliant-transpilation-for-class-properties |
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
-
|
I'm using StyleX which happens to also not work very well with Next 15 due to swc I suspect: const path = require('path');
module.exports = {
presets: ['next/babel'],
plugins: [
[
'@stylexjs/babel-plugin',
{
dev: process.env.NODE_ENV !== 'production',
runtimeInjection: false,
genConditionalClasses: true,
treeshakeCompensation: true,
aliases: {
'@styles/*': [path.join(__dirname, 'styles/*')],
'@components/*': [path.join(__dirname, 'components/*')],
},
useCSSLayers: false,
unstable_moduleResolution: {
type: 'commonJS',
rootDir: __dirname,
},
},
],
],
}; |
Beta Was this translation helpful? Give feedback.
-
|
Stylex has a swc community plugin, you should give it a try https://x.com/stylexjs/status/1846367697464164698?s=46 |
Beta Was this translation helpful? Give feedback.
-
|
I forgot to say thanks for this. Seems promising, but there's still quite a few big issues with it which hopefully get fixed overtime. It has issues with some statement parsing and not sure if they will shift over to the stylex postcss implementation that is much better for my use case. |
Beta Was this translation helpful? Give feedback.
-
|
Can we also support Stylus? I am working on an old project and having a hard time dealing with Stylus CSS integration |
Beta Was this translation helpful? Give feedback.
and others
-
This is a feedback thread for when your application opted out from usage of SWC because there is a
.babelrc. The main goal of this thread is to collect what transformations people are adding that we might want to port to Rust/SWC.What you can expect in the near future:
Note: this list will expand based on feedback collected.
The implemented transforms documentation has been moved to the Next.js documentation: https://nextjs.org/docs/advanced-features/compiler
Comments
When posting on this thread please make sure you include your
.babelrccontents.Beta Was this translation helpful? Give feedback.
All reactions