I’m using Shopify’s hydrogen framework which use’s Remix. I’m trying to add video to the site in the component below.
<code>import VimeoPlayer from 'react-player/vimeo';
export default function HeroVideo() {
return <VimeoPlayer />;
}
</code>
<code>import VimeoPlayer from 'react-player/vimeo';
export default function HeroVideo() {
return <VimeoPlayer />;
}
</code>
import VimeoPlayer from 'react-player/vimeo';
export default function HeroVideo() {
return <VimeoPlayer />;
}
I’m getting this error in the browser:
Oops
500
ReferenceError: require is not defined
How can I stop this from happening?
I’ve tried react-player as well as @u-wave/react-vimeo however I’m still getting the same error so I believe the error Remix related and can be recreated by creating a new hydrogen app with typescript
<code>npm create @shopify/hydrogen@latest
</code>
<code>npm create @shopify/hydrogen@latest
</code>
npm create @shopify/hydrogen@latest
and using one of the two libraries mentioned.