웹팩 렌더링 :

Question

내가 사용 "창이 정의되지 않은"MERN - https://github.com/Hashnode/mern-starter (반응 REDUX, 웹팩, nodejs, 표현) 및 구성 요소 반응 사운드 - 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'); 
} 

을 시도하고에 내가 (웹팩 후) 전면 렌더링 ReferenceError: Sound is not defined 오류가

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

렌더링합니다.

UPDATE :

나는 전면 렌더링 TypeError: Cannot read property 'status' of undefined 오류가 (var하지 const)

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

시도하십시오.

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