lightningcss icon indicating copy to clipboard operation
lightningcss copied to clipboard

Using lightning with bun results in incorrect architecture selection

Open FoxtrotPerry opened this issue 7 months ago • 4 comments

Issue synopsis

I have a project running Next.js that is using tailwindcss v4 which includes lightningcss. When attempting to run my app, I'm given the following error:

 ⨯ ./src/styles/globals.css
Error evaluating Node.js code
Error: Cannot find module '../lightningcss.darwin-x64.node'
Require stack:
- /Users/foxtrotperry/Dev/todays-photo/node_modules/lightningcss/node/index.js
- /Users/foxtrotperry/Dev/todays-photo/node_modules/@tailwindcss/node/dist/index.js
- /Users/foxtrotperry/Dev/todays-photo/node_modules/@tailwindcss/postcss/dist/index.js
- /Users/foxtrotperry/Dev/todays-photo/.next/build/chunks/[turbopack]_runtime.js
- /Users/foxtrotperry/Dev/todays-photo/.next/transform.js
    [at Module._resolveFilename (node:internal/modules/cjs/loader:1219:15)]
    [at Module._load (node:internal/modules/cjs/loader:1045:27)]
    [at TracingChannel.traceSync (node:diagnostics_channel:315:14)]
    [at wrapModuleLoad (node:internal/modules/cjs/loader:215:24)]
    [at Module.require (node:internal/modules/cjs/loader:1304:12)]
    [at require (node:internal/modules/helpers:123:16)]
    [at Object.<anonymous> (/Users/foxtrotperry/Dev/todays-photo/node_modules/lightningcss/node/index.js:24:22)]
    [at Module._compile (node:internal/modules/cjs/loader:1504:14)]
    [at Module._extensions..js (node:internal/modules/cjs/loader:1588:10)]
    [at Module.load (node:internal/modules/cjs/loader:1282:32)]

In my node modules, I'm seeing both expected packages for my system (arm64 macbook): lightningcss, and lightningcss-darwin-arm64. However, the error shows that on import, lightning attempted to load in lightningcss-darwin-x64 instead.

Investigation so far

A cursory check led me to this file where it seems that process.arch is somehow being set to x64. I'm not really sure how that's possible but that is indeed what is happening.

As a sanity check, I tried running the next js app with and without turbopack but that didn't change the error. I also tried bun -e "console.log(process.arch)" and as expected, it returned arm64.

Beyond this, I'm not really sure what to try and will likely be reverting to tailwindcss v3 until I have more time to investigate the issue further. However, let me know if there are any more details that would be helpful and I'll happily provide!

FoxtrotPerry avatar Jun 03 '25 05:06 FoxtrotPerry

Still not quite sure what the root cause is, but I found that running my project with bun --bun run dev instead of bun run dev resulted in the correct node file being searched for. Works like a charm with the --bun flag!

FoxtrotPerry avatar Jun 11 '25 03:06 FoxtrotPerry

I'll keep this issue open incase this thread wants to be pulled on some more, but I'm satisfied with using --bun as a workaround and am fine with this ticket being closed if there's no appetite to hun this particular issue down!

FoxtrotPerry avatar Jun 11 '25 03:06 FoxtrotPerry

I have same issue using NextJS 15 and tailwind v4, and I barely can run build with bun --bun run dev. Thank you for sharing that awesome trick. 😭

But I wonder why this trick works, and why just bun run dev does not work?!?

aborile avatar Jun 23 '25 07:06 aborile

i have similar problem with a M4 MAX.

✗ npm i -D lightningcss-darwin-arm64@latest
npm error code EBADPLATFORM
npm error notsup Unsupported platform for [email protected]: wanted {"os":"darwin","cpu":"arm64"} (current: {"os":"darwin","cpu":"x64"})
npm error notsup Valid os:   darwin
npm error notsup Actual os:  darwin
npm error notsup Valid cpu:  arm64
npm error notsup Actual cpu: x64

Any advise how to fix?

mskoric avatar Aug 11 '25 09:08 mskoric