Question

我使用MERN - https://github.com/Hashnode/mern-starter（react，redux，webpack，nodejs，express）和组件反应 - 声音 - https://github.com/leoasis/react-sound

当我包含组件

时

import Sound from 'react-sound';

并尝试启动服务器，我在webpack服务器渲染时出现"window is not defined"错误。

但如果我评论这一行并启动服务器，一切都会好的。之后，我可以取消注释这一行，组件将起作用，因为当服务器运行时，更改不会触发服务器渲染（仅前端渲染）。

如果我尝试

if (typeof window !== 'undefined') {
    const Sound = require('react-sound');
}

并在渲染中

render() {
    return (
        <div>
            <Sound playStatus={Sound.status.STOPPED} url="" />
        </div>
    );
}

我在前端渲染时遇到ReferenceError: Sound is not defined错误（在webpack之后）。

更新

如果我尝试（var，而不是const）

if (typeof window !== 'undefined') {
    var Sound = require('react-sound');
}

我在前台渲染时出现TypeError: Cannot read property 'status' of undefined错误。

Answer 1

似乎您无法在浏览器环境之外使用反应声音。

解决方案如下：

let SoundEl;
if (typeof window !== 'undefined') {
  import Sound from 'react-sound';
  SoundEl = <Sound playStatus={Sound.status.STOPPED} url="" />
} else {
  SoundEl = <div></div>
}

...

render() {
  return (
    <div>
      {SoundEl}
    </div>
  )
}

Webpack渲染：“窗口未定义”

1 个答案: