[V2] | Build Fails on Server build | (undefined) API is not available in this browser.

[ramakrishnan3]

🐛 Bug Report

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

This works well in the dev mode but the build throws an error.

Have you read the Contributing Guidelines on issues?Yes

I am trying to import and use a React component in the .mdx files in the docs folder.

abc.mdx
import Vimeo from '@u-wave/react-vimeo';

To Reproduce

(Write your steps here:)

1. Scaffold a v2 docusaurus project
2. Install @u-wave/react-vimeo from npm and import it in docs/doc2.mdx file
3. npm start -> starts the build and video is displayed in the component
4. Try to build the project npm run build -> errors out

Expected behavior

The build version should be successful and should behave like the dev version.

(Write what you thought would happen.)

Actual Behavior

The prod build error out

(Write what happened. Add screenshots, if applicable.)

Reproducible Demo

https://github.com/ramakrishnan3/ducusaurus-bug-report

-> clone the repo
-> npm i
-> npm start - successful
-> npm run build - errors out
(Paste the link to an example repo, including a siteConfig.js, and exact instructions to reproduce the issue.)

[yangshun]

Probably the video component is non-compatible with server-side rendering because it uses browser-specific APIs (e.g. window), which isn't available on the server. This is not specific to Docusaurus. You could try to only render the component in a browser environment by doing

{typeof window !== 'undefined' && }

[ramakrishnan3]

@yangshun Agreed. But I am using what you have suggested already in my code https://github.com/ramakrishnan3/ducusaurus-bug-report/blob/master/docs/doc2.mdx but it does not work.

[davodey]

Probably the video component is non-compatible with server-side rendering because it uses browser-specific APIs (e.g. window), which isn't available on the server. This is not specific to Docusaurus. You could try to only render the component in a browser environment by doing

{typeof window !== 'undefined' && }

@yangshun I've been hacking away at v2 and ran into something similar, and after several days I came across this thread. This fixed the issue I had, and now I can go out for a beer :) cheers!

[yangshun]

But I am using what you have suggested already in my code https://github.com/ramakrishnan3/ducusaurus-bug-report/blob/master/docs/doc2.mdx but it does not work.

That's not syntactically valid code... I meant for you to render something behind the &&.

{typeof window !== 'undefined' && <div>{...}</div>}

By the way when #2296 lands there will be a convenient API to check the execution environment and you no longer have to write typeof window !== 'undefined'

[yangshun]

Closing this as it's not a Docusaurus bug.

[lex111]

@davodey could you please tell me how you solved the issue with Vimeo player?

[taylorreece]

This is pretty late, but for anyone hitting this, I stopped using the @u-wave/react-vimeo package, and instead added my own component to my Docusaurus project in src/components/vimeo.jsx:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  root: {
    paddingTop: "56.25%",
    position: "relative",
  },
  vimeoIframe: {
    position: "absolute",
    top: 0,
    left: 0,
    width: "100%",
    height: "100%",
  },
}));

const Vimeo = ({ video, title }) => {
  const classes = useStyles();
  const vimeoSource = `https://player.vimeo.com/video/${video}`;

  return (
    <div className={classes.root}>
      <iframe
        src={vimeoSource}
        className={classes.vimeoIframe}
        title={title}
        frameBorder="0"
        allow="autoplay; fullscreen; picture-in-picture"
        data-ready="true"
      />
    </div>
  );
};

export default Vimeo;

Then, I can just do this in any markdown docs file:

import Vimeo from "@site/src/components/vimeo";

## Some Header

Here's an explainer video:

<Vimeo video="12345678" title="An explainer video" />

Here's some other stuff

It doesn't give you all the hooks that @u-wave/react-vimeo does, but it at least embeds a vimeo video into your documentation that resizes reactively, lets you do fullscreen, etc.