Question

我为我的应用程序安装了“ react-speech”包，以构建文本到语音的功能。但是，在导入软件包时，出现以下错误。我做了足够的谷歌搜索来解决此问题，但无法解决。非常感谢您的帮助。

错误：

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 && webpack --mode production --progress --profile --color && 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”。但是发生了同样的错误。

Answer 1

此库与SSR（服务器端渲染）不兼容。我想您正在尝试使用webpack来做到这一点。

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

我想这可能不会引发任何错误，请记住，在导入库之前必须先声明这一点。

Answer 2

添加此行window = window || global.window 这会在未定义窗口时提供窗口global.window的值

Answer 3

我对 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(...)

由于您正在尝试使用由其他人维护的库，您可以尝试自己构建它，也可以向包维护者提出问题。

ReferenceError：在React中未定义窗口

3 个答案: