[Next] Is Turbopack supported?

[sannajammeh]

Turbopack is slowly becoming the default, at least for dev. Does this plugin support Turbopack?

[derekjwilliams]

I will give it a try tomorrow and see what happens

[derekjwilliams]

Turbopack is slowly becoming the default, at least for dev. Does this plugin support Turbopack?

No happiness, getting a webpack error when attempting to run with turbopack, e.g.

"dev": "next dev --turbopack",

Here is the error on the browser:

And in the console:

Error: 'stylex.defineVars' should never be called at runtime. It should be compiled away by '@stylexjs/babel-plugin'
    at [project]/src/app/page.tsx [app-rsc] (ecmascript) (src/app/page.tsx:4:0)
    at [project]/src/app/page.tsx [app-rsc] (ecmascript, Next.js server component) (.next/server/chunks/ssr/_9921d5._.js:782:32)
    at Object.<anonymous> (.next/server/app/page.js:15:26)
  2 | import stylex from '@stylexjs/stylex';
  3 | import styles from "./page.module.css";
> 4 | import { sizes } from '@stylexjs/open-props/lib/sizes.stylex';

Also get the warning when running:

Starting...
 ✓ Ready in 1039ms
 ⚠ Webpack is configured while Turbopack is not, which may cause problems.

---

I created a fresh Next project, then added the stylexswc packages. It works with "dev": "next dev", but "next dev --turbopack" causes the error

[Dwlad90]

At the moment, the plugin does not support turbopack, since it is completely dependent on webpack.

The last time I looked at turbopack documentation, it did not support extracting third-party CSS styles, which is necessary for the plugin to work correctly. Perhaps something has changed now and it is possible to write NextJS plugin with turbopack and css extracting support.

[derekjwilliams]

Makes complete sense, you've made using stylex much more enjoyable by improving the speed.

[Dwlad90]

Hi @sannajammeh, @derekjwilliams,

Great news! Starting from version 0.13.0-rc.1, the Next.js plugin now supports Turbopack!

The plugin now includes Turbopack configuration with CSS extraction using the PostCSS plugin.

Quick Start

For Next.js with Turbopack, use the /turbopack export:

import withStylexTurbopack from '@stylexswc/nextjs-plugin/turbopack';

export default withStylexTurbopack({
  rsOptions: {
    dev: process.env.NODE_ENV === 'development',
  },
})({
  experimental: {
    turbopack: {
      // Additional Turbopack configuration if needed
    },
  },
});

Important: You must also configure the PostCSS plugin for CSS extraction:

// postcss.config.js
module.exports = {
  plugins: {
    '@stylexswc/postcss-plugin': {
      rsOptions: {
        dev: process.env.NODE_ENV === 'development',
      },
    },
    autoprefixer: {},
  },
};

Documentation

• Next.js Plugin - Turbopack Configuration
• Turbopack Plugin Documentation

Feel free to try it out and report any issues!