Блог

Я установил пакет «react-speech» для своего приложения для преобразования текста в речь. Но при импорте пакета я получаю следующую ошибку. Я сделал достаточно поиска в Google, чтобы решить эту проблему, но не смог этого сделать. Любая помощь приветствуется.

Ошибка:

 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! lm-suite-react@0.1.0 start: `rimraf build amp;amp; webpack --mode production --progress --profile --color amp;amp; node index.js`

npm ERR! Exit status 1

npm ERR!

npm ERR! Failed at the lm-suite-react@0.1.0 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 `
  

Примечание: я тоже пытался использовать разные пакеты вместо «react-speech». Но возникает та же ошибка.

Эта библиотека несовместима с SSR (рендеринг на стороне сервера). Я предполагаю, что вы пытаетесь сделать это с помощью webpack.

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

Я думаю, это может не вызвать никакой ошибки, помните, что вы должны объявить это перед импортом библиотеки.

Я ничего не знаю о react-speech пакете. Но я столкнулся с чем-то подобным, пытаясь связать один из моих модулей для браузера с помощью webpack (процесс связки выполняется node и window в этом не определен context ). Это то, что я использовал:

 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 = {} 
} 
  

Мы делаем это только для того, чтобы webpack собирал модуль без выбрасывания.

 ... 
// replace window with win

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

Поскольку вы пытаетесь использовать библиотеку, поддерживаемую кем-то другим, вы можете либо попытаться создать ее самостоятельно, либо вы можете вызвать проблему у сопровождающих пакета.