configuration resolve has an unknown property 'root' path 해결 방법

만약

webpack.config.js 파일에서

경로 작성시 불편함을 해소 하기 위해

resolve: {
    root: path.resolve('./src')
},

위와 같은 코드를 사용후

configuration resolve has an unknown property 'root' path 

라는 메세지가 나오며 build할대 에러가 난다면

https://webpack.js.org/guides/migrating/

이곳을 참고 하자

resolve: {
    alias: {
        Components: path.resolve(__dirname, 'src/components/'),
        Containers: path.resolve(__dirname, 'src/containers/')
    }
},

이런식으로 alias를 추가해주고 추가한 별칭으로 경로를 사용하면 해결이 된다.

resolve문제인지 모르고 오전내내 삽질하다가

프로젝트를 처음부터 싹 밀어버리고 다시 하나씩 추가해가면서 빌드를 하던중

resolve 문제인걸 알고 한참동안 찾았다.

문서는 항상 진즉에 읽어보도록 하자

webpack1 에서 webpack2로 마이그레이션 되면서

바뀐 부분이 정말 너무 많다;;; 

지금 보고 있는 강좌가 webpack1 일때 작성되었던 강좌라 

설정방법들이 조금씩 다르다.

따로 가르쳐주는 사람이 없으니 정말 맨땅에 헤딩하면서 공부 하는데 

재밌긴 한데 어렵기도 하다.

module not found error cannot resolve 'babel' in 에러와 the node api for babel has been moved to babel-core  해결 방법

드디어 리액트에 입문!

아직 뭐가 뭔지도 잘 모르고

바벨이라는 녀석이 ES6문법으로 바꿔주고 웹팩이라는 녀석이 번들js로 

관리해준다는 대략적인 정보만 알고 난 상태에서

https://velopert.com/814

이분의 강좌를 보면서 공부를 하기로 시작 했는데 시작과 동시에 에러가 날 반겨준다.

1. the node api for babel has been moved to babel-core  해결 방법

<으아악 불길한 붉은 텍스트라니>

the node api for babel has been moved to babel-core

이 에러는 뭐 대충 설치 할때 경로 문제나 디펜던시 설정 문제 인듯 하다

pakage.json 파일의 디펜던시를 아래와 같이 바꿔주면 해결이 된다.

아마 위의 에러가 나는 것은 딘펜던시와 덴펜던시스 둘다 바벨이 들어가 있는 경우이며

글로벌로 babel과 webpack를 설치 한 후

또 종속성으로 --save 명령어로 설치하는 경우에 나타나는 에러 인듯 하다.

디펜던시 목록을 위와같이 수정해주면 사라지며

그래도 계속 나타날 경우엔 어차피 튜토리얼 단계니까 

폴더 지우고 다시 순서대로 받아주면 해결 된다.

2.module not found error cannot resolve 'babel' in 에러 해결 방법

이 에러는 webpack.config.js 파일을 수정해 주어야 한다.

이 파일은 webpack의 설정파일인데

ECMAScript6를 컴파일 해주고 개발서버를 열어주는 webpack의 설정 파일인데

모듈 로더 부분이

이런식으로 loader:'babel'

로 되어있는 경우 발생한다

바벨을 참조하지 못해서 생기는 오류인듯 한데

loader:'babel' -> loader:'babel-loader' 이렇게 바꿔주면 간단히 해결이 된다.

이제 npm start 명령어를 실행하면 complied successfully 라는 반가운 문구를 볼 수가 있게 된다.