[Babel/Webpack] Webpack 3 -> Webpack 4 와 Babel 6 -> Babel 7에서의 주의사항

일단 기본적으로 에러가 겁나 많이 난다.

그래도 당황하지 않고 하나 둘 해나가다 보면 언젠간 에러는 잡히는 듯..

.babelrc의 preset확인

Module build failed (from ./node_modules/babel-loader/lib/index.js): TypeError: Cannot read property ‘bindings’ of null 에러

우선 .babelrc 의 preset부터 체크. babel 7부터는 preset-es2015머시기.. 이런거 없다. 전부 @babel/preset-env로 통일

리엑트까지 쓴다면

위와 같이 쓰면됨.

패키지는 내 기준

이정도… 참고로 저 rest-spread도 beta더라도 안해주면 ReferenceError: unknown node of type “SpreadProperty” with constructor “Node” 에러난다.

클래스 내에서 state선언 -> Constructor로 빼기

이건 확실한지는 모르겠지만

클래스 내에서 state선언하는, 예컨데

이런거 없어져서 전부 constructor에다가 넣어줘야한다. (확실하진 않다. 나는 이거때문에 에러 발생)

ExtractTextPlugin

얘가 좀 골때리는데, 기존에 new ExtractTextPlugin이런 방식으로 하면 Deprecated에러가 난다.

나는

이런식으로 처리함.

Module parse failed: Unexpected token m in JSON at position 0 while parsing near ‘module.exports = “{\…’
You may need an appropriate loader to handle this file type.

기존에 json파일 로딩에 잘 쓰던 json-loader 도 위와 같은 에러가 난다.

이 경우, 그냥 webpack.config.js 에서 json-loader관련 부분을 삭제해주면 된다.

 

Translate »