Emotion doesn't work with Remix Oxygen and other serverless platform

[guoyunhe]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

The most popular Remix use case is Shopify Hydrogen. It by default supports Oxygen, Shopify's serverless platform. However, when I try material-ui's SSR setup with Oxygen, it thorws errors. Same with Netlify's Edge serverless platform.

Link to live example: https://github.com/guoyunhe/material-ui/tree/remix-oxygen

Steps:

git clone git@github.com:guoyunhe/material-ui.git
cd material-ui/examples/material-ui-remix-ts
git checkout remix-oxygen
cp .env.example .env
npm install
npm run dev

Current behavior 😯

Failed to start dev server:

 info  building...
✘ [ERROR] Could not resolve "stream"

    node_modules/.pnpm/multipipe@1.0.2/node_modules/multipipe/index.js:7:26:
      7 │ var PassThrough = require('stream').PassThrough;
        ╵                           ~~~~~~~~

  The package "stream" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.


✘ [ERROR] Could not resolve "events"

    node_modules/.pnpm/readable-stream@1.0.34/node_modules/readable-stream/lib/_stream_readable.js:35:17:
      35 │ var EE = require('events').EventEmitter;
         ╵                  ~~~~~~~~

  The package "events" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.


✘ [ERROR] Could not resolve "stream"

    node_modules/.pnpm/readable-stream@1.0.34/node_modules/readable-stream/lib/_stream_readable.js:43:21:
      43 │ var Stream = require('stream');
         ╵                      ~~~~~~~~

  The package "stream" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.


✘ [ERROR] Could not resolve "stream"

    node_modules/.pnpm/readable-stream@1.0.34/node_modules/readable-stream/lib/_stream_writable.js:40:21:
      40 │ var Stream = require('stream');
         ╵                      ~~~~~~~~

  The package "stream" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error

Expected behavior 🤔

Server should start without issues.

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

  System:
    OS: Linux 6.6 openSUSE Tumbleweed 20231115
  Binaries:
    Node: 20.8.1 - /usr/bin/node
    Yarn: 1.22.19 - ~/.local/share/pnpm/yarn
    npm: 10.1.0 - /usr/bin/npm
  Browsers:
    Chrome: Not Found
  npmPackages:
    @emotion/react: latest => 11.11.1 
    @emotion/styled: latest => 11.11.0 
    @mui/material: latest => 5.14.18 
    @types/react: latest => 18.2.37 
    react: latest => 18.2.0 
    react-dom: latest => 18.2.0 
    typescript: latest => 5.2.2

See also emotion-js/emotion#3126

[brijeshb42]

This issue is not related to material-ui at all. It is complaining about stream package which is not available in the default runtime of whatever oxygen uses or has.
Changing serverPlatform to node in the remix.config.js file and then building works as expected.
The underlying issue lies in @emotion/server package which uses html-tokenize, through and multipipe all of which depend of stream module that is available in nodejs. So the actual fix will have to be done in @emotion/server.

[guoyunhe]

@brijeshb42 your suggestion serverPlatform: 'node' only works with npm run build, but not npm run dev. It throws error:

Error: Dynamic require of "stream" is not supported
    at file:///home/guo/git/material-ui/examples/material-ui-remix-ts/dist/worker/index.js?t=1700662329530.0657:11:9
    at node_modules/.pnpm/through@2.3.8/node_modules/through/index.js (file:///home/guo/git/material-ui/examples/material-ui-remix-ts/dist/worker/index.js?t=1700662329530.0657:30080:18)
    at file:///home/guo/git/material-ui/examples/material-ui-remix-ts/dist/worker/index.js?t=1700662329530.0657:17:50
    at node_modules/.pnpm/@emotion+server@11.11.0/node_modules/@emotion/server/create-instance/dist/emotion-server-create-instance.cjs.dev.js (file:///home/guo/git/material-ui/examples/material-ui-remix-ts/dist/worker/index.js?t=1700662329530.0657:32189:19)
    at file:///home/guo/git/material-ui/examples/material-ui-remix-ts/dist/worker/index.js?t=1700662329530.0657:17:50
    at node_modules/.pnpm/@emotion+server@11.11.0/node_modules/@emotion/server/create-instance/dist/emotion-server-create-instance.cjs.js (file:///home/guo/git/material-ui/examples/material-ui-remix-ts/dist/worker/index.js?t=1700662329530.0657:32293:22)
    at file:///home/guo/git/material-ui/examples/material-ui-remix-ts/dist/worker/index.js?t=1700662329530.0657:17:50
    at file:///home/guo/git/material-ui/examples/material-ui-remix-ts/dist/worker/index.js?t=1700662329530.0657:36725:57
    at ModuleJob.run (node:internal/modules/esm/module_job:217:25)
    at ModuleLoader.import (node:internal/modules/esm/loader:316:24)

[brijeshb42]

Like I pointed out, the runtime issue lies with @emotion/server using some packages that depend on nodejs runtime. As for your npm run dev issue, you'd have to ask on remix/oxygen's forums to find out how to start the server in dev mode with nodejs runtime.