How does next 15, which uses SWC, use babel-plugin-react-compiler?
Answered
Sinhala Hound posted this in #help-forum
Sinhala HoundOP
I'd also like to know if there is a way to get it to use other babel plugins, like @graphql-codegen/client-preset, since it's an absolute nightmare to configure and use SWC plugins (I've never been able to get @graphql-codegen/client-preset-swc-plugin to work).
I'm assuming it's using SWC with babel-plugin-react-compiler because that is required for the experimental reactCompiler setting, even though it's not configured anywhere explicitly. It also doesn't print any warning about falling back to babel.js like it does if you use .babelrc - and most importantly, it still seems to support things that are not supported by bable, like next/font imports - so it must somehow be using swc, while also using that babel plugin. My specific question is - how is that achieved?
I'm assuming it's using SWC with babel-plugin-react-compiler because that is required for the experimental reactCompiler setting, even though it's not configured anywhere explicitly. It also doesn't print any warning about falling back to babel.js like it does if you use .babelrc - and most importantly, it still seems to support things that are not supported by bable, like next/font imports - so it must somehow be using swc, while also using that babel plugin. My specific question is - how is that achieved?
Answered by joulev
As you see, it’s a lot of work to bring support for a babel plugin to an swc app. So yeah if you want to use babel plugin X, you likely have to use babel over swc.
28 Replies
@Sinhala Hound I'd also like to know if there is a way to get it to use other babel plugins, like @graphql-codegen/client-preset, since it's an absolute nightmare to configure and use SWC plugins (I've never been able to get @graphql-codegen/client-preset-swc-plugin to work).
I'm assuming it's using SWC with babel-plugin-react-compiler because that is required for the experimental reactCompiler setting, even though it's not configured anywhere explicitly. It also doesn't print any warning about falling back to babel.js like it does if you use .babelrc - and most importantly, it still seems to support things that are not supported by bable, like next/font imports - so it must somehow be using swc, while also using that babel plugin. My specific question is - how is that achieved?
The details on current react compiler support in swc-based nextjs 15 applications can be found here https://github.com/vercel/next.js/pull/65804.
As you see, it’s a lot of work to bring support for a babel plugin to an swc app. So yeah if you want to use babel plugin X, you likely have to use babel over swc.
Answer
@joulev As you see, it’s a lot of work to bring support for a babel plugin to an swc app. So yeah if you want to use babel plugin X, you likely have to use babel over swc.
Sinhala HoundOP
The problem is - I can't. Core parts of next.js's app router don't work with babel. It'd be better if that special pathway could be somehow exposed, so that additional babel plugins could be added to the mix, without a wholesale jump to babel.
@Sinhala Hound The problem is - I can't. Core parts of next.js's app router don't work with babel. It'd be better if that special pathway could be somehow exposed, so that additional babel plugins could be added to the mix, without a wholesale jump to babel.
Unfortunately that’s not possible for now. You can request it as a feature, but it is not here right now, can’t do anything about it.
next/font is the only thing requiring swc that I can immediately think of. You can simply manually host your font instead, it is possible to host fonts without next/font
next/font is the only thing requiring swc that I can immediately think of. You can simply manually host your font instead, it is possible to host fonts without next/font
@joulev Unfortunately that’s not possible for now. You can request it as a feature, but it is not here right now, can’t do anything about it.
next/font is the only thing requiring swc that I can immediately think of. You can simply manually host your font instead, it is possible to host fonts without next/font
Sinhala HoundOP
I suppose that's an option
@joulev Unfortunately that’s not possible for now. You can request it as a feature, but it is not here right now, can’t do anything about it.
next/font is the only thing requiring swc that I can immediately think of. You can simply manually host your font instead, it is possible to host fonts without next/font
Sinhala HoundOP
Alternatively, some stable (or better documented) way to use SWC plugins could be nice - that's really the core of the issue here.
@Sinhala Hound Alternatively, some stable (or better documented) way to use SWC plugins could be nice - that's really the core of the issue here.
You have to wait for the PR that fixes this (https://github.com/dotansimha/graphql-code-generator/pull/9489) to be merged, which doesn’t look like it’s gonna happen any time soon. The graphql-codegen swc plugin is currently incompatible with nextjs, that’s another thing you can’t do much about.
If you want a way to use swc plugins, the readme of those plugins should have the details. The graphql-codegen plugin is just… not working, can’t have a magical .swcrc that makes it work, it’s impossible.
Sinhala HoundOP
Yeah, I actually rebuilt that PR - the problem is you have to keep track of and have knowledge of underlying SWC and rust versions to make a plugin work. It could work, but there's not enough documented information about it
OR - we could use the special code paths to use the babel plugin? 😅
It's easier to maintaing babel/JS based plugins
@Sinhala Hound OR - we could use the special code paths to use the babel plugin? 😅
If you are willing to understand all of the nextjs PR above and then make a nextjs fork containing the changes needed to make graphql-codegen work, then yes
Sinhala HoundOP
sounds like a lot lol - I get that it's not easy
You are at a tough spot here. Unless you are really knowledgeable about Rust and the how-to of swc plugins, I would just self-host fonts manually and ditch next/font if I was you. That’s the easiest path, and my lazy self prefers easy paths.
Sinhala HoundOP
I'll definitely give that a shot - I just tried this before, and hit a number of snags.
Build speed is actually not important for me in production - I really don't care about saving a minute or 2 in that stage
(It'd be nice if I could retain SWC and/or turbo for dev mode though - I don't need code splitting from this plugin at that stage)
Will post again if I run in to issues!
Thanks!
Sinhala HoundOP
Does
next/babel come with @babel/preset-typescript or do I have to add that myself?Not sure, sorry. Has been a couple years since I last used babel
Sinhala HoundOP
Yeah, I don't even use babel outside of next.js either - I use SWC directly or bun if I can get away with it - everything is easier in those
Oh hey it worked! That wasn't as hard as I remembered
Sinhala HoundOP
babel makes larger chunks - may not be worth it
Sinhala HoundOP
I actually figured out a simple way to solve the GraphQL codegen problem without the use of plugins at all. Not sure why this is even an issue. https://github.com/dotansimha/graphql-code-generator/issues/9988
Sinhala HoundOP
I just realized, this doesn't do exactly the same thing, hmmm
Sinhala HoundOP
fixed it