的WebPack渲染： “没有定义窗口”

我使用MERN - https://github.com/Hashnode/mern-starter（反应，终极版，的WebPack，的NodeJS表达）和组分反应声 - https://github.com/leoasis/react-sound 的WebPack渲染： “没有定义窗口”

当我包括组分

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

我对前面的渲染（之后的WebPack）ReferenceError: Sound is not defined错误。

UPDATE：

如果我尝试（var，不const）

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

我对前面的渲染TypeError: Cannot read property 'status' of undefined错误。

来源

2017-04-25 Luntegg

限定内部的常量声音如果块限制了范围，以该块的内部。将var Sound = null;在if之外，然后在if中设置值。 – scrappedcola

似乎你不能在浏览器环境之外使用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> 
) 
}

来源

2017-04-25 14:00:22 dgrijuela

不可违反：元素类型无效：期望一个字符串（对于内置组件）或类/函数（对于复合组件），但得到：object。检查渲染方法... – Luntegg

尝试const Sound = require（'react-sound'）。默认或导入来自'react-sound'的声音（查看答案已更新） – dgrijuela

再次出现同样的错误。 – Luntegg

的WebPack渲染： “没有定义窗口”

回答

相关问题