ReferenceError: window is not defined in React

Question

I installed "react-speech" package for my application to build text to speech functionality. But while importing the package I'm getting the following error. I did enough googling to resolve this issue but unable to do so. Any help is much appreciated.

Error:

ReferenceError: window is not defined

    at new SpeakTTS (/Users/moharja/Project/React-master/node_modules/speak-tts/lib/speak-tts.js:22:48)

    at Object.<anonymous> (/Users/moharja/Project/React-master/src/components/Judgement/Landing/RightBar/Top/top.component.jsx:24:16)

    at Module._compile (internal/modules/cjs/loader.js:1201:30)

    at Module._compile (/Users/moharja/Project/React-master/node_modules/pirates/lib/index.js:99:24)

    at Module._extensions..js (internal/modules/cjs/loader.js:1221:10)

    at Object.newLoader [as .jsx] (/Users/moharja/Project/React-master/node_modules/pirates/lib/index.js:104:7)

    at Module.load (internal/modules/cjs/loader.js:1050:32)

    at Function.Module._load (internal/modules/cjs/loader.js:938:14)

    at Module.require (internal/modules/cjs/loader.js:1090:19)

    at require (internal/modules/cjs/helpers.js:75:18)

npm ERR! code ELIFECYCLE

npm ERR! errno 1

npm ERR! [email protected] start: `rimraf build && webpack --mode production --progress --profile --color && node index.js`

npm ERR! Exit status 1

npm ERR!

npm ERR! Failed at the [email protected] start script.

npm ERR! This is probably not a problem with npm. There is likely additional logging output above.



npm ERR! A complete log of this run can be found in:

npm ERR!     /Users/moharja/.npm/_logs/2020-10-19T17_30_09_085Z-debug.log `

Note: I tried to use different packages too instead of "react-speech". But the same error is occurring.

Gilmour

If your running this in node, yes there is no window object in node.js.. I assume SpeakTTS is a Browser component, so it won't run in node.js. – Sprite

what is your start script? – Equipotential

Answer 1

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.

Kristin

Throws the following error: "Attempt to assign to const or readonly variable" – Vday

Answer 2

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.

Tripletail

Answer 3

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;
}

Palmate