Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ReferenceError: window is not defined in React

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.

like image 825
mohangraj Avatar asked Nov 06 '22 04:11

mohangraj


1 Answers

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.

like image 159
iraycd Avatar answered Nov 12 '22 17:11

iraycd