CSS Modules not working when using HTMLBundle via Bun.serve()

[jackson-bean]

What version of Bun is running?

1.2.5+013fdddc6

What platform is your computer?

Darwin 24.1.0 arm64 arm

What steps can reproduce the bug?

• bun init with React template
• Create and attempt to import/use a .module.css file

What is the expected behavior?

CSS Modules should work out-of-the-box.

What do you see instead?

// src/App.tsx
import classes from "./App.module.css";

ReferenceError: import_App_module is not defined when attempting to access the page.

Additional information

No response

[bbar]

Just to color this in a little more.

Command	Outcome
bun --hot src/index.tsx	❌
bun src/index.tsx	❌
NODE_ENV=production bun src/index.tsx	✅

Tested on version 1.2.6-canary.87+6e1f1c4da.

[TomasHubelbauer]

Still seems to be an issue with 1.2.9.

[TheLonelyAdventurer]

I confirm it still happens in 1.2.17

Output:

[x2] Reloaded in 32ms: src/button.tsx
frontend ReferenceError: import_button_module is not defined
      at ["src/button.tsx"]< (C:\Users\***\Documents\proj\***\src\button.tsx:4:13)
    from browser tab http://127.0.0.1:3000/

button.tsx:

import buttonStyles from './style/button.module.css';

export default function Button() {
    return <button className={ buttonStyles.primary }>Button!</button>;
}

button.module.css:

.primary {
    all: unset;

    background-color: blue;
}

[strblr]

This is a blocker when migrating from vite to bun.

[Andres6936]

The problem persist in Bun 1.2.19

[jhaemin]

Not working

[let-value]

not working on v1.2.20 workaround:

bunfig.toml

[serve.static]
plugins = ["./lightningcss.ts"]

lightningcss.ts

import lightningcss from "bun-lightningcss";

//TODO: remove https://github.com/oven-sh/bun/issues/18258
export default lightningcss();

[danshryock]

This appears to only be an issue when HMR is enabled. It stops the JSON object for the css module from being emitted, which causes the ReferenceError.

When run in production mode, or development mode with HMR turned off, the JSON object is included and everything works as expected.

[GrigorTonikyan]

not working on v1.2.21

even more not efficient workaround

bun build --watch --hot --outdir dist index.html &
bun --cwd dist --watch --hot --port=1420 index.html

xD

[woxxo]

Same error with import of "*.module.css" on v.1.3.1.

PS E:\..........\mantine3> bun dev  
$ bun --hot src/index.ts
Bundled page in 109ms: src/index.html
frontend ReferenceError: import_HeaderSimple_module is not defined
      at ["src/App.tsx"]< (E:\...............\src\App.tsx:13:13)
    from browser tab http://localhost:3000/

bun start is working well.

[girldeath]

@woxxo What is your bun start script though? That comes from a framework (i.e. you used bun create ...)

Anyways, I can confirm that Bun ver. 1.2.13 in nixpkgs has this issue as well.

[girldeath]

Okay, after some spelunking, I think I understand what is wrong here. Bun is too heavy to build on my machine but this is about as close to a fix I think I can get without being able to debug myself.

Here, Bun assumes that .css files will never export any value:

https://github.com/oven-sh/bun/blob/afd125fc12ac6a9b3163f28d8f0f4e5d809eb820/src/bundler/linker_context/convertStmtsForChunkForDevServer.zig#L45-L48

True for most CSS files, not for CSS Modules.

I believe the fix should be as simple as checking that the import path does not end in .module.css before disabling it.

If a maintainer or someone with the ability to build Bun is able to try this out and PR, it would be amazing.

[woxxo]

@girldeath Start command is standard: "start": "NODE_ENV=production bun src/index.ts" As danshryock mentioned above, the HMR should be disabled. Then css modules are imported without error.

[ricsam]

Unless fixed it should be documented: https://github.com/oven-sh/bun/pull/25002

[lamo2k123]

not working on v1.3.4