Opted out of SWC feedback #30174
Replies: 795 comments 340 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.
-
|
Our .babelrc looks like this: |
Beta Was this translation helpful? Give feedback.
-
|
this is the babel file content we are using { |
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.
-
|
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.
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