v4 alpha does not work on Stackblitz

[jcbhmr]

What version of Tailwind CSS are you using?

4.0.0-alpha.6

What build tool (or framework if it abstracts the build tool) are you using?

Vite 5.1.5

What version of Node.js are you using?

v18.18.0

What browser are you using?

Chrome

What operating system are you using?

StackBlitz

Reproduction URL

https://stackblitz.com/edit/vitejs-vite-bhcbjy?file=vite.config.js&terminal=dev

A Tailwind Play link or public GitHub repo that includes a minimal reproduction of the bug. Please do not link to your actual project, what we need instead is a minimal reproduction in a fresh project without any unnecessary code. This means it doesn't matter if your real project is private/confidential, since we want a link to a separate, isolated reproduction anyways.

A reproduction is required when filing an issue — any issue opened without a reproduction will be closed and you'll be asked to create a new issue that includes a reproduction. We're a small team and we can't keep up with the volume of issues we receive if we need to reproduce each issue from scratch ourselves.

Describe your issue

~/projects/vitejs-vite-bhcbjy 3s
❯ npm run dev

> [email protected] dev
> vite

failed to load config from /home/projects/vitejs-vite-bhcbjy/vite.config.js
error when starting dev server:
Error: Cannot load native addon because loading addons is disabled: /home/projects/vitejs-vite-bhcbjy/node_modules/@tailwindcss/oxide-linux-x64-musl/tailwindcss-oxide.linux-x64-musl.node
    at process.dlopen (https://vitejsvitebhcbjy-emlm.w-credentialless-staticblitz.com/blitz.8e1c3ef8.js:352:49789)
    at Module._extensions..node (https://vitejsvitebhcbjy-emlm.w-credentialless-staticblitz.com/blitz.8e1c3ef8.js:54:15934)
    at Module.load (https://vitejsvitebhcbjy-emlm.w-credentialless-staticblitz.com/blitz.8e1c3ef8.js:54:13457)
    at Module._load (https://vitejsvitebhcbjy-emlm.w-credentialless-staticblitz.com/blitz.8e1c3ef8.js:54:10535)
    at Module.require (https://vitejsvitebhcbjy-emlm.w-credentialless-staticblitz.com/blitz.8e1c3ef8.js:54:13775)
    at i (https://vitejsvitebhcbjy-emlm.w-credentialless-staticblitz.com/blitz.8e1c3ef8.js:98:2198)
    at _0x271448 (https://vitejsvitebhcbjy-emlm.w-credentialless-staticblitz.com/blitz.8e1c3ef8.js:352:193624)
    at Object.eval (file:///home/projects/vitejs-vite-bhcbjy/node_modules/@tailwindcss/oxide/index.js:177:31)
    at Object.function (https://vitejsvitebhcbjy-emlm.w-credentialless-staticblitz.com/blitz.8e1c3ef8.js:352:194402)
    at Module._compile (https://vitejsvitebhcbjy-emlm.w-credentialless-staticblitz.com/blitz.8e1c3ef8.js:54:14871)

[adamwathan]

Just a note for future us, looks like this is because StackBlitz doesn't support loading native modules:

https://developer.stackblitz.com/platform/webcontainers/troubleshooting-webcontainers#cannot-load-native-addon

Not sure if there's anything we can do to make this work, maybe we can compile a WASM version and somehow have that get installed in these environments? Will leave this open to investigate for a bit but might ultimately not be something we can solve.

[devongovett]

For lightning css we have a separate WASM package (lightningcss-wasm), which shims the exact API of the node package. I worked with @d3lm from the stackblitz team to get this automatically aliased in their environment so whenever someone installs lightningcss it actually installs lightningcss-wasm inside stackblitz. In order to reuse the napi code in WASM, I wrote napi-wasm, which shims the napi API in browsers. Here's the source for the wasm package in lightningcss in case it helps.

[d3lm]

Hey 👋 Thanks for pinging me @devongovett 🙏

@adamwathan Indeed, you cannot load native addons in WebContainer because arbitrary native binaries cannot be executed in the browser. Therefore, for this to work it requires a Wasm package. Here's a good example for a setup that I'd suggest: https://github.com/Brooooooklyn/Image/blob/95c248a04fa0b748a280be0d9936be18d744221f/packages/binding/index.js#L338-L355.

Essentially, you need to define another platform-specific dependency that targets wasm32. For that package you have to set the cpu to wasm32 (see this example). This means that if you run npm install locally, it would just install the dependency that matches your local architecture and in WebContainer it would download and install the Wasm package because we are going to roll out a change to WebContainer's architecture and flip it from x64 to wasm32. This is the most ideal setup and something I'd also like to change for lightningcss and parcel-watcher (cc @devongovett).

What we have done for lightningcss is to use a Wasm package that is registered as a "polyfill" on our side which means that when you install lightningcss it will auto-magically install the Wasm package. You can try that out on StackBlitz and inspect node_modules. However, given that we are about to change the architecture for WebContainer, like I said, I'd recommend the former approach now. For the polyfill route to work, it really has to be an exact drop-in replacement and any additional dependencies have to become bundledDependencies as those won't be seen by the package manager.

I'd recommend taking a look at napi-rs or napi-wasm.

Let me know if I can help any further. Happy to collaborate if you need more input or direction. It's important to us to ensure that tailwindcss continues to work in WebContainer.