React Remix Project Vimeo Error: Sorry, the Vimeo Player API is not available in this browser.

[cgatherer]

I'm currently working on a react front end using remix and wp-graphql. I'm creating a video banner using react-vimeo, and I'm receiving the error below. Also I've provided Hero Component, am I miss a dependency or did I code something in error? Thanks in advance.

 Error: Sorry, the Vimeo Player API is not available in this browser.
[1]     at /private/Users/ufgcorp/Desktop/Localhost/integrated-upstream-wpsn/unionsq/functions/[[path]].js:32172:9
[1]     at SourceTextModule.evaluate (node:internal/vm/module:226:23)
[1]     at VMScriptRunner.runAsModule (/Users/ufgcorp/Desktop/Localhost/integrated-upstream-wpsn/unionsq/node_modules/@miniflare/runner-vm/src/index.ts:38:18)
[1]     at VMScriptRunner.run (/Users/ufgcorp/Desktop/Localhost/integrated-upstream-wpsn/unionsq/node_modules/@miniflare/runner-vm/src/index.ts:82:17)
[1]     at Miniflare.#reload (/Users/ufgcorp/Desktop/Localhost/integrated-upstream-wpsn/unionsq/node_modules/@miniflare/core/src/index.ts:775:13)
[1]     at Miniflare.getPlugins (/Users/ufgcorp/Desktop/Localhost/integrated-upstream-wpsn/unionsq/node_modules/@miniflare/core/src/index.ts:1017:5)
[1]     at createServer (/Users/ufgcorp/Desktop/Localhost/integrated-upstream-wpsn/unionsq/node_modules/@miniflare/http-server/src/index.ts:369:19)
[1]     at startServer (/Users/ufgcorp/Desktop/Localhost/integrated-upstream-wpsn/unionsq/node_modules/@miniflare/http-server/src/index.ts:476:18)
[1]     at main (file:///Users/ufgcorp/Desktop/Localhost/integrated-upstream-wpsn/unionsq/node_modules/wrangler/miniflare-dist/index.mjs:6221:22)

[1] ✘ [ERROR] Miniflare process exited with code 1

import * as React from 'react';
import clsx from 'clsx';
import {Paragraph} from '../typography';
import {ImageProps} from '~/interfaces';
import Player from '@vimeo/player';
import Vimeo from '@u-wave/react-vimeo';

interface HeroProps {
  title: string
  text: string
  color: string
  headline: string  
  background?: boolean
  fullvh?:boolean
  video?:string
  image?: ImageProps
}

function Hero({
  title,
  text,
  color,
  headline,
  background,
  fullvh,
  video,
  image,
}: HeroProps) {
  color = ''

  let confetti = <></>;
  if (background || video || image) {
    confetti = <div className={`mx-auto mt-6 mb-4 w-2 h-2 rotate-[60deg] ${color ? 'bg-['+color+']' : 'bg-white'}`}></div>
  }

    return (
      <div className={clsx('relative w-full flex flex-col justify-center',  {
          'h-screen': fullvh,
          'min-h-[70vh]': !fullvh,
          'bg-charcoal': background
        })}>
        
        {/*{ image &&*/}
        {/*  <img src={image.url} alt={image.alt} title={image.title} className='object-cover h-full w-full' />*/}
        {/*}*/}

        { background && video ? (
            <Vimeo
                className={'vimeo-background'}
                video={video}
                autoplay={true}
                muted={true}
                loop={true}
                responsive={true}
                background={true}
                />
        ) : (
            <img src={image.url} alt={image.alt} title={image.title} className='object-cover h-full w-full' />
        ) }

        <div className='relative container mx-auto w-full pt-10 md:pt-20'>
          {confetti}
          <div className='text-white text-center cms-hero drop-shadow font-["Magnat"] text-2xl leading-4' dangerouslySetInnerHTML={{__html:text}}></div>
          {confetti}
          { title != 'Home' &&
          <Paragraph className="text-white text-center drop-shadow" dangerouslySetInnerHTML={{__html:title}}></Paragraph>
          }
        </div>

      </div>
  )
}


export {Hero}

[goto-bus-stop]

this component doesn't support server-side rendering currently.

[cgatherer]

Thanks @goto-bus-stop could you suggest an alternative method for rending the Vimeo videos?

[goto-bus-stop]

if remix has some way to detect if you're in a server-side context, you can use that to conditionally render the component. i'm not familiar with remix at all so i don't think i can offer anything more :'

[truthseekers]

@cgatherer What did you do about this? I'm still learning Server-side rendering so I don't know how to respond to @goto-bus-stop 's suggestion to conditionally render the component.

The docs here: https://remix.run/docs/en/v1/guides/constraints Say "Remix renders on the server so your modules can't have module side effects or first-rendering logic that call browser-only APIs" So... does that mean I just can't use this package?

[courdek]

Take a look into the ClientOnly component in remix-utils. This should solve it