import causes a require is not defined

[ignacio-dev]

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?

2024.4.1

What version of Remix are you using?

No response

Steps to Reproduce

1. Run npm create @shopify/hydrogen@latest
2. Install MUI npm install @mui/material @emotion/react @emotion/styled & npm install @fontsource/roboto
3. Import the CSS baseline: import { CssBaseline } from '@mui/material';
4. Run npm run dev

Expected Behavior

Should import the CssBseline component.

Actual Behavior

Breaks and shows this error:
During SSR HMR: ReferenceError: require is not defined

[jamalsoueidan]

https://codedamn.com/news/javascript/fix-require-is-not-defined

This is related to the new changes type: 'module'

[ignacio-dev]

Thank you for the article. I have read it, but I am not using require anywhere on my code. This is a freshly installed Hydrogen app, and the error gets thrown when I do import { CssBaseline } from '@mui/material';

[jamalsoueidan]

You are not, but material is, like @mantine/notifications, because they are using the old system cjs.

mui/material-ui#35233

[kellynyoung]

I'm getting the same ReferenceError: require is not defined error when using downshift. The error occurs in its dependency, prop-types. From what I can tell Vite is supposed to automatically convert these to ESM during pre-bundling. When I set up a new vite+react project and use downshift, I don't get this error, so it seems like the automatic conversion should work in this case.

So, I'm wondering if there's something about the hydrogen/vite setup that's causing this automatic CJS -> ESM conversion to not work for dependencies? And if so, I'm not sure if there's a vite config option that could fix it, or if something might need to change in the hydrogen/oxygen plugins. None of the config changes I've seen suggested (such as those found here) have worked for me, however.

[jamalsoueidan]

@mantine/notifications was also using proptypes.

[frandiox]

Try:

export default defineConfig({
  ssr: {
    optimizeDeps: {
      include: ['dep-name']
    }
  }
})

[ignacio-dev]

The optimizeDeps solution gets rid of the require is not defined error.

However, MUI elements appear completely unstyled (the classNames are there, but not taking any effect).

After trying to render a <Button>Click me</Button> I see this in the browser's console:

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `ForwardRef(TouchRipple2)`.

[kellynyoung]

Try:

export default defineConfig({
  ssr: {
    optimizeDeps: {
      include: ['dep-name']
    }
  }
})

This resolved the issue for me - thanks! 🙌