mirror of
https://github.com/oven-sh/bun
synced 2026-02-15 13:22:07 +00:00
2.9 KiB
2.9 KiB
Fixing CSS modules in Bun's dev server
Look inside the reproduction folder: /Users/zackradisic/Code/bun-repro-18258/
When importing a CSS module, it is not being resolved correctly and the following error is thrown:
frontend ReferenceError: import_Ooga_module is not defined
at App (/Users/zackradisic/Code/bun-repro-18258/src/App.tsx:5:21)
at react-stack-bottom-frame (/Users/zackradisic/Code/bun-repro-18258/node_modules/react-dom/cjs/react-dom-client.development.js:23863:20)
at renderWithHooks (/Users/zackradisic/Code/bun-repro-18258/node_modules/react-dom/cjs/react-dom-client.development.js:5529:22)
at updateFunctionComponent (/Users/zackradisic/Code/bun-repro-18258/node_modules/react-dom/cjs/react-dom-client.development.js:8897:19)
at beginWork (/Users/zackradisic/Code/bun-repro-18258/node_modules/react-dom/cjs/react-dom-client.development.js:10522:18)
at runWithFiberInDEV (/Users/zackradisic/Code/bun-repro-18258/node_modules/react-dom/cjs/react-dom-client.development.js:1519:30)
at performUnitOfWork (/Users/zackradisic/Code/bun-repro-18258/node_modules/react-dom/cjs/react-dom-client.development.js:15132:22)
at workLoopSync (/Users/zackradisic/Code/bun-repro-18258/node_modules/react-dom/cjs/react-dom-client.development.js:14956:41)
at renderRootSync (/Users/zackradisic/Code/bun-repro-18258/node_modules/react-dom/cjs/react-dom-client.development.js:14936:11)
at performWorkOnRoot (/Users/zackradisic/Code/bun-repro-18258/node_modules/react-dom/cjs/react-dom-client.development.js:14462:44)
Some notes on how CSS modules work:
- We generate a JS object where the keys are the class names and the values are the class names made unique. This starts on line 226 in
generateCodeForLazyExport.zig. We do this usingE.NameOfSymbolwhich uses aRefbecause we don't know the final generated name until after all CSS modules are parsed. - The
mangleLocalCss(insideLinkerContext.zig) is called after all CSS modules are parsed. It is used to mangle the class names in the CSS modules so that they are unique.
Some notes about how Bun's dev server is different and is what likely causing the issue:
- The dev server skips stuff and doesn't call all the same linker functions
- This is causing
generateCodeForLazyExportto not be called and thus the JS object is not generated for importing CSS modules - We will have to create our own routine which will do this
- One key place to look at is
finalizeBundle(...)inDevServer.zig, that's when the bundle is finalized.
You instructions:
- Split out the existing code in
generateCodeForLazyExportwhich handles CSS into a new function which can be called separately - Call this new function in
finalizeBundle(...)inDevServer.zig
IMPORTANT: If you need ANY help from me (for example running bun or something), please ask me by executing the command say bun2 help.