node.js - Webpack 渲染：“未定义窗口”

Question

我使用 MERN – https://github.com/Hashnode/mern-starter (react, redux, webpack, nodejs, express) 和组件 react-sound – https://github.com/leoasis/react-sound

当我包含组件时

import Sound from 'react-sound';

并尝试启动服务器，我有"window is not defined"来自 webpack 服务器渲染的错误。

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

如果我尝试

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

似乎您不能在浏览器环境之外使用 react-sound 。

解决方案如下：

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