Buffer is not defined

[matrixersp]

Current behavior:

I get the following error when I run a Remix app with MUI and Cloudflare, and the issue is likely related to @emotion/server/create-instance

service core:user:worker: Uncaught ReferenceError: Buffer is not defined
  at regd1tya9jj.js:21735:58 in node_modules/html-tokenize/node_modules/buffer-from/index.js
  at regd1tya9jj.js:82:50
  at regd1tya9jj.js:23774:22 in node_modules/html-tokenize/index.js
  at regd1tya9jj.js:25708:49 in node_modules/@emotion/server/create-instance/dist/emotion-server-create-instance.cjs.dev.js
  at regd1tya9jj.js:82:50
  at regd1tya9jj.js:25810:22 in node_modules/@emotion/server/create-instance/dist/emotion-server-create-instance.cjs.js

  at regd1tya9jj.js:82:50

✘ [ERROR] MiniflareCoreError [ERR_RUNTIME_FAILURE]: The Workers runtime failed to start. There is likely additional logging output above.

To reproduce:

1. Create a new Remix project using npx create-remix@latest
2. Add the necessary MUI and Cloudflare dependencies and configurations
3. run the app npm run dev

Expected behavior:

It should run the the app successfully

Environment information:

"@emotion/react": "^11.11.1",
"@emotion/server": "^11.11.0",
"@emotion/styled": "^11.11.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"

[Andarist]

Seeing the full setup would be really helpful.

The fix would be to add "worker" to those conditions here but then we'd also have to differentiate code paths somehow between the environments and have the bundler to resolve files specific to certain envs.

This happens because we have the renderStylesToNodeStream API that you are pulling into your project. Are you trying to use it? Or is it just pulled in implicitly? Which API are you trying to use from the @emotion/server pkg?

[matrixersp]

Forgot to include the link to a minimal reproduction: https://github.com/matrixersp/remix-with-mui

The issue is coming form app/entry.server.tsx file, if I remove the code related to createEmotionServer which is imported from @emotion/server/create-instance, the error goes away.

[thompsongl]

This happens because we have the renderStylesToNodeStream API that you are pulling into your project.

Any workaround here? I'm just using extractCriticalToChunks and constructStyleTagsFromChunks but running into the same issue. Happy to work on a PR if you have ideas for resolution.

[thompsongl]

I think just being able to import the individual functions without going through createEmotionServer would be enough (e.g., import createConstructStyleTagsFromChunks from '@emotion/server/create-instance/construct-style-tags-from-chunks')