Closed ignacio-dev closed 2 weeks ago
https://codedamn.com/news/javascript/fix-require-is-not-defined
This is related to the new changes type: 'module'
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';
You are not, but material is, like @mantine/notifications, because they are using the old system cjs.
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.
@mantine/notifications was also using proptypes.
Try:
export default defineConfig({
ssr: {
optimizeDeps: {
include: ['dep-name']
}
}
})
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)`.
Try:
export default defineConfig({ ssr: { optimizeDeps: { include: ['dep-name'] } } })
This resolved the issue for me - thanks! 🙌
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
npm create @shopify/hydrogen@latest
npm install @mui/material @emotion/react @emotion/styled
&npm install @fontsource/roboto
import { CssBaseline } from '@mui/material';
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