[nextjs] Support Turbopack

[bestickley]

Summary

When using next dev --turbo, I get the error: Error: @pigment-css/react: You were trying to call "css" function without configuring your bundler. because withPigment from @pigment-css/nextjs-plugin works by adding a webpack plugin which is not supported yet by Turbopack as stated in their docs: Will we be able to use webpack plugins?.

Examples

N/A

Motivation

I want to benefit from dev server performance improvements of Turbopack while using @pigment-css/react

Search keywords: pigment, turbopack

[bestickley]

One possible way forward today would be to implement the current webpack plugin via a loader as those are supported in turbopack. However, I'm guessing the APIs that are needed for @pigment-css/nextjs-plugin to do it's transformations are beyond the scope of a loader but I hope I'm wrong.

[joshwcomeau]

++ — I believe the issue is that there's a downstream dependency, wyw-in-js, which needs to be updated. It's tracked here: Anber/wyw-in-js#53

But 100% agree, turbopack support would likely be a big perf / DX win.

[brijeshb42]

I believe the issue is that there's a downstream dependency, wyw-in-js, which needs to be updated

That's actually not the case for the bundler plugins. Our Next and Vite implementations are independent of WyW (though Vite is mostly same). So we have more control over the changes. The issue is that Turbopack integration in Next does not support loaders that return CSS which is essential for Pigment to function.

[brijeshb42]

Closing as duplicate of mui/material-ui#41416

[oliviertassinari]

@brijeshb42 I'm reversing the duplicates. While this one is more recent, it has already more engagement.