-
-
Notifications
You must be signed in to change notification settings - Fork 8.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[V2] | Build Fails on Server build | (undefined) API is not available in this browser. #2212
Comments
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 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. |
@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! |
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 |
Closing this as it's not a Docusaurus bug. |
@davodey could you please tell me how you solved the issue with Vimeo player? |
This is pretty late, but for anyone hitting this, I stopped using the 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 |
🐛 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:)
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.)The text was updated successfully, but these errors were encountered: