Problems with astroturf in nextjs

[Mitsunee]

I am currently working on redoing my personal website as a nextjs app and decided to try astroturf but I keep getting this error:

I don't quite know what is causing this to happen, but the workaround I found is to go into the index.js in my IDE and resave it. After that the error usually doesn't re-appear again until I restart the dev server. Obviously this will become problematic as I begin to style components.

For reference I played around with both stylesheet and the css prop.

Here's my nextjs config:

// next.config.js
module.exports = () => ({
  webpack: config => {
    config.module.rules.push({
      test: /\.js$/,
      use: ["astroturf/loader"]
    });

    return config;
  },
  trailingSlash: true,
  reactStrictMode: true,
  poweredByHeader: false,
  future: { webpack5: true }
});

[lostfictions]

I'm hitting the same error randomly but so far haven't been able to isolate a minimal reproduction case that makes it trigger consistently (sometimes I'll restart the dev server and it's fine, sometimes it'll explode like in your case).

I think, as noted in #681, that Astroturf isn't really compatible with Webpack 5 unless you set options: { useAltLoader: true } in the loader configuration. What's confusing is that it seems to sometimes work without this setting. It might be better if Astroturf simply threw an error (or defaulted to useAltLoader) if it detected it was running under Webpack 5?

[Mitsunee]

I will try the altLoader and see if that works for me (I'm intending to mostly just use a single stylesheet per component and postcss plugins instead of inserting any variables, so I might be able to just get away with it for now), if not I'll just have to use css modules for now and port everything to astroturf in the future.

[jquense]

astroturf should work without the altLoader but only if the persistent cache is off.

[Mitsunee]

I'm assuming persistent cache is turned on in nextjs by default? I haven't changed anything other than the config I included above, not sure what nextjs' defaults are like (and why) as this is my first time using it.

Here's my updated next config for reference:

// next.config.js
module.exports = () => ({
  webpack: config => {
    config.module.rules.push({
      test: /\.js$/,
      use: [
        {
          loader: "astroturf/loader",
          options: {
            useAltLoader: true
          }
        }
      ]
    });

    return config;
  },
  trailingSlash: true,
  reactStrictMode: true,
  poweredByHeader: false,
  future: { webpack5: true }
});

I tried starting the dev server a few times (incl. deleting the ./.next folder inbetween) and have not gotten the error message again, so assuming I don't run into new issues with the altLoader my problem is fixed for now :)

[rvetere]

Why is there no official next.js example in the atstroturf docs? There is a link but it is broken...

Update: I've managed to get a working example with next13, astroturf and next-astroturf.. Only downside right now, it only works with Node < 17

https://github.com/rvetere/next-astroturf

[lostfictions]

Personally I stopped using Astroturf back in 2021... there were too many tooling issues that weren't getting fixed. The death knell for me was when Next removed their Astroturf example from the Next repo due to lack of support, even though they maintain hundreds of other tool and library examples. It just wasn't worth it to try to wrestle with something that was becoming a more and more marginal and unsupported solution.

For what it's worth I've been having a very good time with Tailwind, which to me offers a very similar experience of writing isolated styles colocated with your code. As of Tailwind 3 it supports completely arbitrary properties, which means there's almost never a need to reach for external CSS. If you need reusable styles, you can just assign a string of Tailwind classnames to a variable, export it, and use it as any React component's className (or interpolate it into a template literal), exactly like you'd do with Astroturf. It's got really excellent support across frameworks and great tooling (including a super good VS Code plugin).

Hope that helps!

[jquense]

Hey folks, originally Next was just webpack and css-loader so there weren't any specific Next specific details to using astroturf, you configure the loader like any other webpack loader and it should Just Work. Over the years tho it seems that next vendored and somewhat forked css-loader which makes it really hard to keep up with, especially since I don't ever use Next.

Ultimately it should generally just work using the loader, but because I'm not an active user of Next it's hard to say what might be broken or missing. Webpack as a tool is absurdly complex now, and Next (and any other framework) add whole new levels of abstraction on top of them, that makes it very hard for me to keep up to date, not to mention needing to support Vite, rollup, parcel, etc.

I am always happy to update docs tho if folks with experience want to contribute, but i also realize that diving deep into webpack and Next internals isn't fun (heck that's partly why I haven't, webpack alone is enough). And if bundler specific plugin isn't working the simplest thing to do (if you want to use astroturf) is just to use the babel plugin directly.

[rvetere]

@lostfictions & @jquense - thanks for your insights! At our company we're doing a discovery week for "CSS-in-JS" solutions and so we stumbled upon astroturf... that's whay i tried to get it working with next.js. But yeah, i totally understand how hard it must be to keep up with the developments from next/css-loader and webpack. We generally think that astroturf is doing an extremely great job internally, by not using any runtime (that's what we're seeking for regarding the new streaming of react 18 - like everyone is fighting right now who has a styled-component stack as we do)

But unfortunately, it seems like astroturf never gained a lot of traction in the market - right now we're sticking with styled-components and hopefully they get their problems fixed with v6

Personally, i love tailwind and i'm also using it for all my new projects :)

[jquense]

I will add that I've use/used astroturf in a number of high stakes production apps, and can attest that it's a solid choice, even if it's not a fan favorite. If you want another compile time styling alternative there is linaria and vanilla extract which are both good if not philosophically distinct from astroturf

(I also use and like tailwind, I think it's more of a complementary tech than replacement tho)

[Mitsunee]

Closing this as I'm no longer using Next and it seemingly either was never supported properly or just works now. The section in the docs just says "see example" with a broken link to the same page.