search

mui / pigment-css

Pigment CSS is a zero-runtime CSS-in-JS library that extracts the colocated styles to their own CSS files at build time.
MIT License
698 stars 36 forks source link

Unable to import Node builtins #239

Open joshwcomeau opened 2 weeks ago

joshwcomeau commented 2 weeks ago

Steps to reproduce

Repro URL: https://github.com/joshwcomeau/pigmentcss-fs-issue

  1. Run npm run dev
  2. Note the issue in the terminal:

EvalError: Unable to import "fs/promises". Importing Node builtins is not supported in the sandbox.

Context

In my project, I'm using the fs/promises module to load MDX content. This obviously wouldn't work in-browser, but I'm doing this specifically inside a Server Component, within the next.js App Router. So none of this code is included in the client-side bundles.

It seems as though Pigment is unable to load any Node built-ins, but I don't think it has to; I don't think any of this stuff affects the generated CSS.

I also realize that this is likely an issue with @wyw-in-js, rather than Pigment CSS itself, but I wanted to highlight it here since that repo doesn't seem active.

Your environment

npx @mui/envinfo ``` System: OS: macOS 14.5 Binaries: Node: 20.16.0 - ~/.nvm/versions/node/v20.16.0/bin/node npm: 10.8.1 - ~/.nvm/versions/node/v20.16.0/bin/npm pnpm: 9.1.4 - ~/Library/pnpm/pnpm Browsers: Chrome: 128.0.6613.138 Edge: Not Found Safari: 17.5 ```

Search keywords: import, Node, fs, sandbox

brijeshb42 commented 1 week ago

Thanks for the report. I'll check this out. Ideally, if something is imported and not used in the css directly, wyw-in-js should tree-shake it before evalutating the code for css.

brijeshb42 commented 3 days ago

@joshwcomeau Could you share a relevant code snippet that shows how you are using the fs or any other node built-ins ? I think we might have to stub it but depends in the use-case.