Issues with next.js 14, server actions, dev & production build

[kirkas]

The problem Next.js server action is broken when you used a .babelrc file, see https://github.com/vercel/next.js/issues/57966

How to reproduce Steps to reproduce:

1. Add NextJS (14.0.4)
2. Add a async server action / mutation
3. npm build will fail, npm dev will intermittently failed

Expected behavior I was expecting stylex to work out of the box with next.js app router, but adding it to an existing project was basically impossible.

Note Ideally adding stylex to next.js would not require a babelrc file, as the frameworks now uses swc as its default compiler, and adding a babelrc file will default to previous compiler and lead to inconsistent result

From an engineer experience, it would be nice to just add @stylexjs/nextjs-plugin, export my next.config with stylexPlugin and have dev / production build working out of the box.

I understand the project is in its infancy, appreciate the great work y'all been doing 🚀

[nmn]

This is a known issue.

Please refer to #297 for information about this and feel free to comment on that issue with any additional details that may help.

• Server actions are buggy with Babel in NextJS itself.
• We can't maintain an SWC implementation at the moment.

[kirkas]

Alright makes sense, thanks for the quick reply.

I think that's worth mentioning in the documentation since that's a pretty major integration gap between stylex & next.js, and the Vercel team seems committed (for the better or worse) on moving towards their SWC compiler, server actions, SSR, etc.. (and they account for roughly 10% of the react projects out there).

[nmn]

@kirkas I'm in touch with the folks at Vercel. I'm going to be trying to use the CSS imports technique for better integration with Next specifically.

I expect we'll find a better solution over time. There are many possible paths forward:

1. They might maintain a SWC port
2. SWC adds a way to use JavaScript to write plugins.
3. It might become possible to use a single Babel transform in an otherwise SWC project. Specially since it can be cached very well.

[pksorensen]

@nmn Sounds awesome with the dialog towatch vercel and if a swc port can be done - keep us updated :)

[nmn]

I have an issue up describing a new approach to generate styles within Webpack and Babel that will be more reliable.

[besSejrani]

any news about this @nmn ?

[nmn]

#491 is in progress to solve this problem.