Tailwind v4 based react app failing to run inside nodepod

[saadalimalik-unstuck]

While native css based react apps are running, tailwind v4 apps are failing with 504 (Gateway Timeout)

console logs for npm install and npm run dev:

 [Process output] �[2K
�[32m✔�[0m �[1madded 93 packages�[0m �[2min 50.4s�[0m

nodepod.ts:90 [Process exit] 0
nodepod.ts:89 [Process error] 
> todo-app@0.0.0 dev
> vite --host


nodepod.ts:18 Server ready on port: 5173, url: http://localhost:5173/__virtual__/podf7a610a1/5173
main.tsx:1  GET http://localhost:5173/node_modules/.vite/deps/react_jsx-dev-runtime.js?v=49c7452b net::ERR_ABORTED 504 (Gateway Timeout)Understand this error
main.tsx:2  GET http://localhost:5173/node_modules/.vite/deps/react.js?v=49c7452b net::ERR_ABORTED 504 (Gateway Timeout)Understand this error
main.tsx:3  GET http://localhost:5173/node_modules/.vite/deps/react-dom_client.js?v=568b4d7d net::ERR_ABORTED 504 (Gateway Timeout)Understand this error
main.tsx:4  GET http://localhost:5173/src/index.css net::ERR_ABORTED 504 (Gateway Timeout)Understand this error
main.tsx:5  GET http://localhost:5173/src/App.tsx net::ERR_ABORTED 504 (Gateway Timeout)

the logs also show error for resolving lightningcss-wasm32-wasi, I dont know if its related:

Uncaught (in promise) Error: Package "lightningcss-wasm32-wasi" does not exist in the registry

nodepod.ts

import { Nodepod, NodepodProcess } from "@scelar/nodepod";
// import { htmlFile, serverFile } from "../mocks/server-files";

export let pod: Nodepod | null = null;

export async function initNodepod(options?: {
  onServerReady: (url: string) => void;
}) {
  pod = await Nodepod.boot({
    watermark: false,
    workdir: "/app",
    /* files: {
      "/app/index.js": serverFile,
      "/app/index.html": htmlFile,
    }, */
    allowedFetchDomains: null,
    onServerReady: (port, url) => {
      console.log(`Server ready on port: ${port}, url: ${url}`);
      options?.onServerReady(url);
    },
  });

  return pod;
}

export async function runCommand(command: string, args: string[] = []) {
  if (!pod) throw new Error("No pod instance initialized!");

  const hasRootPath = args.some((arg) => arg.startsWith("/"));

  const proc = await pod.spawn(command, args, {
    cwd: hasRootPath ? "/" : pod.cwd,
  });
  logProcessData(proc);
  await proc.completion;
}

export async function mountFiles(files: Record<string, string>) {
  if (!pod) throw new Error("No pod instance initialized!");

  const writeFilesPromises: Promise<void>[] = [];

  for (const [path, content] of Object.entries(files)) {
    writeFilesPromises.push(pod.fs.writeFile(path, content));
  }

  await Promise.all(writeFilesPromises);

  // // Patch package.json as per requirements
  // if (await pod?.fs.exists("/app/package.json")) {
  //   const packageJsonRaw = await pod.fs.readFile("/app/package.json", 'utf-8');
  //   let packageJson: any;
  //   try {
  //     packageJson = JSON.parse(packageJsonRaw);
  //   } catch (err) {
  //     console.warn("Could not parse package.json, skipping override patch");
  //     return;
  //   }

  //   let modified = false;
  //   if (!packageJson.overrides) {
  //     // If overrides section does not exist, add it
  //     packageJson.overrides = { "lightningcss": "npm:lightningcss-wasm@latest" };
  //     modified = true;
  //   } else if (packageJson.overrides.lightningcss !== "npm:lightningcss-wasm@latest") {
  //     // If lightningcss line does not exist or differs, patch it
  //     packageJson.overrides.lightningcss = "npm:lightningcss-wasm@latest";
  //     modified = true;
  //   }

  //   if (modified) {
  //     // Minify the JSON when writing; avoid trailing newline for reliability
  //     await pod.fs.writeFile("/app/package.json", JSON.stringify(packageJson, null, 2));
  //   }
  // }

  // console.log(await pod.fs.readFile('/app/package.json', 'utf-8'));
}

export async function startDevServer() {
  if (!pod) throw new Error("No pod instance initialized!");

  await runCommand("npm", ["install"]);
  await runCommand("npm", ["run", "dev"]);
}

export function logProcessData(proc: NodepodProcess) {
  proc.on("output", (text) => console.log("[Process output]", text)); // stdout
  proc.on("error", (text) => console.log("[Process error]", text)); // stderr
  proc.on("exit", (code) => console.log("[Process exit]", code));
}

[R1ck404]

Hey thanks a lot for opening this and for the detailed logs, really helpful.

I've actually been digging into this for the past day or so. its a weird one and pretty tricky to debug because its related to how we load wasm under the hood. our wasm setup is fairly intricate and it works fine for most things but there's something going wrong specifically with tailwind v4 (its related to some deadlocking happening with the tailwind oxide engine). the lightningcss-wasm32-wasi error you saw is a separate noise btw, i dont think its the actual root cause
native css react apps work fine which is why this slipped through, but yeah tailwind v4 is broken right now and im actively working on a fix. ill update this issue once i have something working.

Appreciate the patience

[saadalimalik-unstuck]

thanks for the reply. really appreciate your work.
Waiting for the fix

[R1ck404]

okay so this is fixed now! it ended up being more involved than i initially thought, there were actually 4 separate bugs all stacked on top of each other that all needed to be fixed before tailwind v4 would work
quick rundown of what was wrong:

1. our path.dirname and path.basename polyfills were normalizing paths before slicing them, which broke glob-parent (used by tailwind and tons of other packages). this made tailwind look for files in the wrong directory and find nothing. fixing this alone made tailwind v3 work
2. url strings were sometimes getting passed to path.resolve and treated as relative paths, so things like http://localhost/app/tailwind.config.js were turning into /app/http://localhost/app/... which obviously fails
3. our MemoryVolume was returning ino: 0 for every file, which made the rust walkdir crate think every file was the same one and skip them as "already visited"
4. the big one for v4 specifically, tailwind v4 uses a rust scanner (oxide) compiled to wasm with rayon threading. the threading goes through web workers and they need to make fs calls back to the parent. but the parent process worker was blocked inside synchronous wasm during the scan, so it couldnt respond to its own workers fs requests, and everything deadlocked until timeouts fired. fixed this by routing the wasi workers fs calls directly to the browser tab via broadcastchannel instead of the blocked process worker

as a nice bonus the broadcastchannel fix also makes rolldowns wasi binding work, and any future rayon/tokio wasm packages should work too
ill push this out in the next release, thanks again for the patience on this one

[saadalimalik-unstuck]

great to hear

[saadalimalik-unstuck]

also on a follow up question, does vite hmr updates also work with this?

[R1ck404]

hey! just released v1.8.0 which has the tailwind fix in it, give it a try and lmk if you run into anything
and good question on hmr, it was working properly at some point but seems to have broken somewhere along the way, ill take a look and get it fixed soon. ill open a separate issue to track it

[saadalimalik-unstuck]

@R1ck404 its still not working for me. I am trying to run vite8 + react + typescript + tailwindv4 app
https://github.com/saadalimalik-unstuck/vite8-react-ts-tailwind.git

[Process output] �[2K
�[32m✔�[0m �[1madded 172 packages�[0m �[2min 35.9s�[0m

nodepod.ts:60 [Process exit] 0
nodepod.ts:59 [Process error] 
> react-ts-tailwind@0.0.0 dev
> vite

nodepod.ts:60 [Process exit] 0

these are the logs in browser

[R1ck404]

Apologies for closing this issue too early, ill look into that again.