WHM 적용시 client에서 re-rendering이 되지 않던 이슈

[SoYoung210]

Desc

server에서 <div> Loading </div> (일종의 로더) 형태로 내린 후, CSR에서 store fetch가 안되는 상황이 발생했다.

  useEffect(() => {
   console.log('@@ useEffect call? @@')
    if (typeof window !== `undefined`) {
      dispatch(orgGitHub.fetch({
        targetName: 'facebook',
        userType: SEARCH_TYPE.ORG
      }));
    }
  }, [])

client쪽 파일에서 useEffect 의 로그도 찍히지 않았다.

Solve

webpack-hot-middleware가 문제였다. (원인은 조사중.)
webpack.client.js에서 WHM을 걷어내니 정상 작동.

[SoYoung210]

Research

github issue 를 찾을 수 있었고, package.json에서 mode=development 주입 시 WHM과 함께 정상작동 하였다.

development에서만 정상작동 하는 것이 아니라, mode문법에 맞게 주입해주어야 한다.

• --mode=production
• --mode=development

[astroplex]

결국
HMR + loadable-components를 같이 사용하려면 --mode를 명시해 주어야 한다는거죠?
HMR 독립 사용은 warning은 뜨지만 돌아는 가구요?

gregberge/loadable-components#282 (comment)

[SoYoung210]

네 맞습니다. 정확한 원인은 조금 더 리서치 해봐야 할 것 같습니다.

[SoYoung210]

Result

package.json 에서 cli로 webpack --mode development / webpack --mode=development 모두 잘 동작하지 않았습니다.

production모드 옵션은 동작.

cli에서 하는것이 부정확하다고 느껴, webpack config에서 직접 수정해주었습니다.