WebpackError: ReferenceError: window is not defined

[Betanya]

We are trying to make the embedded video responsive, but this is the error that is happening when we try to deploy: "window" is not available during server side rendering.

Here is the relevant code:

const VideoWelcome: React.FunctionComponent = () => {
const scale = 0.5;
const minWidth = 800;
const [width, setWidth] = useState(calculateWidth(window.innerWidth));
const height = (9 / 16) * width;

useEffect(() => {
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);

function calculateWidth(width: number): number {
if (width < minWidth) return width;
return width * scale;
}

function handleResize(e: any) {
const height = e.target.innerHeight;
const width = e.target.innerWidth;
setWidth(calculateWidth(width));
console.log(height, width);
}

[clayrisser]

Can you put the full error here?

[Betanya]

[clayrisser]

@Betanya that is happening because it is running that function during the build, which won't work because the build happens outside of a browser. The window object is only available in a browser. You can work around this by first checking if window is undefined before using it in the useState function.

For example . . .

const [width, setWidth] = useState(calculateWidth(typeof window === 'undefined' ? 0 : window.innerWidth));