ReferenceError: window is not defined in React

This library is not compatible with SSR (Server Side Rendering). I guess you are trying to do that with, webpack.

if (typeof window === 'undefined') {
  global.window = {}
}

I guess this might not throw any error, remember you have to declared this before you import the library.

I don't know anything about the react-speech package. But I encountered something similar while trying to bundle one of my modules for browser using webpack (bundle process runs on node and window is undefined in that context). This is what I used:

let win
try {
  win = window
} catch (error) {
  // suppress the Reference error and assign an empty object to win
  // this should not be reachable in actual browser as window 
  // will be defined in that context.

  win = {} 
} 

We are doing this just so that webpack builds the module without throwing.

... 
// replace window with win

// window.fetch(...)
win.fetch(...)

Since you are trying to use a library maintained by someone else, you could either try to build it on your own, or you could raise an issue for the package maintainers.

I would like to highlight that encountering this problem in docusaurus is quite common after you've built the application. To address this issue, you can resolve it by enclosing your code with the condition if (typeof window !== "undefined") within the <Root> component. This component is rendered at the top of the React tree, ensuring that when you use window in any of the child components, you won't encounter any issues.

If the Root component does not exist in your app just create it under src/theme

src/theme/Root.js

import React from "react";
export default function Root({ children }) {
  if (typeof window !== "undefined") {
    return (
      <>
        {children}
      </>
    );
  }
  return null;
}