Build error trying to import Tailwind CSS from root.tsx with serverModuleFormat: "cjs"

[brettdh]

I'm using serverModuleFormat: "cjs" in my Remix config (and not setting "type": "module" in my package.json) to work around this issue: #7467

but now when I run either remix build or remix dev, I get this error:

(node:82422) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
✘ [ERROR] Unexpected token 'export' [plugin css-file]

    app/root.tsx:23:34:
      23 │ import tailwindStylesheetUrl from "./tailwind.css";
         ╵                                   ~~~~~~~~~~~~~~~~

  This error came from the "onLoad" callback registered here:

    node_modules/@remix-run/dev/dist/compiler/plugins/cssImports.js:77:12:
      77 │       build.onLoad({
         ╵             ~~~~~~

    at setup (/path/to/project/node_modules/@remix-run/dev/dist/compiler/plugins/cssImports.js:77:13)
    at handlePlugins (/path/to/project/node_modules/@remix-run/dev/node_modules/esbuild/lib/main.js:1279:21)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

It seems like this ought to be possible, but I'm not sure if there is some config required that I'm not aware of, or if this is just a bug, particularly since it mentions an export that I'm guessing is in the generated result that the css-file plugin produces.

I'm currently trying to create a failing integration test for this but haven't repro'd it there yet. I've also verified that the issue still appears in my project using Remix 2.1.0, though. I've also been unable to repro the bug in a new project starting from the Indie Stack, which is strange, because the (proprietary) project I'm working on (where I can reliably repro the issue) is very new and not very complicated yet. Basically I started with the Grunge Stack on Remix 1.14.0, added a small amount of initial PoC code (including shadcn/ui), then migrated to Remix v2.

I've been stepping through the relevant code but I haven't yet found anything that meaningfully differs between my project and the minimal-repro projects (other than the presence/absence of the build error). I'd thought perhaps esbuild was being run with format="esm" in one project and format="cjs" in the other - i.e. perhaps Remix v2 was assuming esm for the css-file plugin specifically - but so far I'm seeing the same esbuild settings between the passing and failing builds.

The project where the error occurs has serverDependenciesToBuild: "all", but I've been unable to repro the issue in the minimal project or integration test even with this setting set. So I don't think it's related to issues like this one, despite the similar error message.

An equally satisfying outcome here would be a workaround for #7467 that would let me make this project a "type": "module" again. 🙂

[brettdh]

An equally satisfying outcome here would be a workaround for #7467 that would let me make this project a "type": "module" again. 🙂

Update: my workaround for now is to apply the diff from #7779 using patch-package. Hoping for some responses there to determine if it's the right longer-term fix or not.

[SteveSuv]

try this:

1. remove tailwind and postcss config in remix.config.js
2. delete postcss.config.js file
3. in root.tsx, import tailwind.css, and add it to export const links
4. restart server

[saurabhsri108]

This is still an issue in 2024, January 19th. The solution by @SteveSuv didn't work as that's how the default config is now.

[Fiattarone]

I was having the same issue, but then realized I was doing a export default config from my tailwind.config.ts, not using module.exports. @SteveSuv's solution worked after that.

[jordanful]

I also ran into this same error message, but fixed it by changing the export on postcss.config.js from module.exports to export default.

[eavonius]

This is still an issue in 2024, January 19th. The solution by @SteveSuv didn't work as that's how the default config is now.

Just got hit by this. Oof. No workaround in v2 yet? Seems postcss plugins can't be used beyond what's out of the box atm.

[glenmiracle18]

The solution proposed by @SteveSuv didn't work for me too.

[tnishikata]

sirs, someone have a solution?