#CSS imports fail in Github actions (but not locally)

1 messages · Page 1 of 1 (latest)

hidden acorn
#

I've been upgrading to Remix v2 from v1 (Blues Stack) and encountering an issue where the Cypress job fails in the Deploy github action despite npm run build working fine locally. I'm really puzzled and could use some help.

Output from local ✅

➜ npm run build                                          

> build
> run-s build:*


> build:remix
> remix build

 info  building... (NODE_ENV=production)
 info  built (632ms)

> build:server
> esbuild --platform=node --format=cjs ./server.ts --outdir=build --bundle --external:fsevents

Output from the Github action ❌

Run npm run build
  
> build
> run-s build:*
> build:remix
> remix build
 info  building... (NODE_ENV=production)
✘ [ERROR] Build failed with 1 error:
app/root.tsx:21:34: ERROR: Could not resolve "~/styles/tailwind.css" [plugin css-bundle-plugin]
    app/root.tsx:1:30:
      1 │ import { cssBundleHref } from "@remix-run/css-bundle";
        ╵                               ~~~~~~~~~~~~~~~~~~~~~~~
  This error came from the "onLoad" callback registered here:
    node_modules/@remix-run/dev/dist/compiler/plugins/cssBundlePlugin.js:35:12:
      35 │       build.onLoad({
         ╵             ~~~~~~
    at setup (/home/runner/work/eb-blues-stack/eb-blues-stack/node_modules/@remix-run/dev/dist/compiler/plugins/cssBundlePlugin.js:35:13)
    at handlePlugins (/home/runner/work/eb-blues-stack/eb-blues-stack/node_modules/@remix-run/dev/node_modules/esbuild/lib/main.js:1279:21)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
✘ [ERROR] Could not resolve "~/styles/tailwind.css"
    app/root.tsx:21:34:
      21 │ import tailwindStylesheetUrl from "~/styles/tailwind.css";
         ╵                                   ~~~~~~~~~~~~~~~~~~~~~~~
  You can mark the path "~/styles/tailwind.css" as external to exclude it from the bundle, which will remove this error.
ERROR: "build:remix" exited with 1.
Error: Process completed with exit code 1.

Greatly appreciate any ideas you have

hidden acorn
#

This is failing in the Deploy job of the Deploy action as well 😦 so it's not something cypress-specific.

hidden acorn
#

I think I figured it out! My remix v1 blues stack had a compiled tailwind file at app/styles/tailwind.css, but newer Blues Stack has a not-compiled tailwind file at app/tailwind.css with the contents:

@tailwind base;
@tailwind components;
@tailwind utilities;

and then my app/root.tsx file needed to have its css import update to point at app/tailwind.css (NOT ❌app/styles/tailwind.css❌)