MUI / Emotion not compatible with Oxygen worker runtime #1650

lorenzo-del-rosario · 2024-01-17T08:05:50Z

What is the location of your example repository?

No response

Which package or tool is having this issue?

Hydrogen

What version of that package or tool are you using?

2023.10.2

What version of Remix are you using?

2.1.0

Steps to Reproduce

I'm trying to implement MUI in an Hydrogen app.
The company uses a shared design system based on MUI.

MUI (like other UI libraries that generate dynamic classes) has to be implemented on the server to avoid the Prop className did not match issue.

This is the MUI SSR implementation:

import {renderToString} from 'react-dom/server';
import {CacheProvider} from '@emotion/react';
import createEmotionServer from '@emotion/server/create-instance';
import CssBaseline from '@mui/material/CssBaseline';
import {ThemeProvider} from '@mui/material/styles';
import {RemixServer, type RemixServerProps} from '@remix-run/react';
import {createContentSecurityPolicy} from '@shopify/hydrogen';
import {theme} from 'config/theme';

import {ServerStyleContext} from './components/providers/ServerStyleContext';
import {createEmotionCache} from './lib/utils';

export default async function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: RemixServerProps['context'],
) {
  const {header, NonceProvider} = createContentSecurityPolicy({
    connectSrc: [  ...  ],
  });
  
  const cache = createEmotionCache();
  const {extractCriticalToChunks} = createEmotionServer(cache);

  const html = renderToString(
    <ServerStyleContext.Provider value={null}>
      <CacheProvider value={cache}>
        <RemixServer context={remixContext} url={request.url} />
      </CacheProvider>
    </ServerStyleContext.Provider>,
  );

  const chunks = extractCriticalToChunks(html);

  const markup = renderToString(
    <NonceProvider>
      <ServerStyleContext.Provider value={chunks.styles}>
        <CacheProvider value={cache}>
          <ThemeProvider theme={theme}>
            <CssBaseline />
            <RemixServer context={remixContext} url={request.url} />
          </ThemeProvider>
        </CacheProvider>
      </ServerStyleContext.Provider>
    </NonceProvider>,
  );

  responseHeaders.set('Content-Type', 'text/html');
  responseHeaders.set('Content-Security-Policy', header);

  return new Response(`<!DOCTYPE html>${markup}`, {
    status: responseStatusCode,
    headers: responseHeaders,
  });
}

When implement the SSR cache I receive some errors saying Could not resolve "events" and Could not resolve "stream" :

I try to change serverPlatform to 'node' in remix.config.js and I receive a new error:

I then revert serverPlatform value to the default 'neutral' and try to address the missing node modules issue with polyfill by adding the missing modules in serverNodeBuiltinsPolyfill inside of remix.config.js

serverNodeBuiltinsPolyfill: {
    modules: {
      stream: true,
      events: true,
    },

Now I'm facing a new error, in the browser I see this:

I add Buffer to the polyfill:

serverNodeBuiltinsPolyfill: {
    modules: {
      stream: true,
      events: true,
    },

I see this error in the browser:

VMScriptRunnerError [ERR_MODULE_STRING_SCRIPT]: Unable to resolve "<script>" dependency "node:buffer": imports unsupported with string script
    at linker (/Users/lorenzo/projects/store/node_modules/.pnpm/@miniflare+runner-vm@2.14.1/node_modules/@miniflare/runner-vm/src/linker.ts:62:13)
    at ModuleWrap.<anonymous> (node:internal/vm/module:315:30)
    at SourceTextModule.<computed> (node:internal/vm/module:314:36)
    at SourceTextModule.link (node:internal/vm/module:199:22)
    at VMScriptRunner.runAsModule (/Users/lorenzo/projects/store/node_modules/.pnpm/@miniflare+runner-vm@2.14.1/node_modules/@miniflare/runner-vm/src/index.ts:39:18)
    at VMScriptRunner.run (/Users/lorenzo/projects/store/node_modules/.pnpm/@miniflare+runner-vm@2.14.1/node_modules/@miniflare/runner-vm/src/index.ts:86:28)
    at MiniOxygen.#reload (/Users/lorenzo/projects/store/node_modules/.pnpm/@miniflare+core@2.14.1/node_modules/@miniflare/core/src/index.ts:793:42)

I'm now stuck as I don't know how to solve this issue and I'm not sure if MUI can correctly be implemented on a Hydrogen app.

Expected Behavior

I'd expect to be able to implement Material UI as per standard SSR implementation.

Actual Behavior

ERR_MODULE_STRING_SCRIPT: : Unable to resolve "<script>" dependency "node:buffer": imports unsupported with string script
Seems like there are compatibility issues with MUI and @miniflare used by @shopify/mini-oxygen@2.2.4.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

MUI / Emotion not compatible with Oxygen worker runtime #1650

MUI / Emotion not compatible with Oxygen worker runtime #1650

lorenzo-del-rosario commented Jan 17, 2024 •

edited

frandiox commented Jan 23, 2024 •

edited

frandiox commented May 8, 2024

MUI / Emotion not compatible with Oxygen worker runtime #1650

MUI / Emotion not compatible with Oxygen worker runtime #1650

Comments

lorenzo-del-rosario commented Jan 17, 2024 • edited

What is the location of your example repository?

Which package or tool is having this issue?

What version of that package or tool are you using?

What version of Remix are you using?

Steps to Reproduce

Expected Behavior

Actual Behavior

See also mui/material-ui#39929

frandiox commented Jan 23, 2024 • edited

frandiox commented May 8, 2024

lorenzo-del-rosario commented Jan 17, 2024 •

edited

frandiox commented Jan 23, 2024 •

edited