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 명령어로 설치하는 경우에 나타나는 에러 인듯 하다.
1 2 3 4 5 6 7 8 9 10 11 12 | "dependencies": { "react": "^15.4.2", "react-dom": "^15.4.2" }, "devDependencies": { "babel-core": "^6.23.1", "babel-loader": "^6.3.2", "babel-preset-es2015": "^6.22.0", "babel-preset-react": "^6.23.0", "webpack": "^2.2.1", "webpack-dev-server": "^2.4.1" } | cs |
디펜던시 목록을 위와같이 수정해주면 사라지며
그래도 계속 나타날 경우엔 어차피 튜토리얼 단계니까
폴더 지우고 다시 순서대로 받아주면 해결 된다.
2.module not found error cannot resolve 'babel' in 에러 해결 방법
이 에러는 webpack.config.js 파일을 수정해 주어야 한다.
이 파일은 webpack의 설정파일인데
ECMAScript6를 컴파일 해주고 개발서버를 열어주는 webpack의 설정 파일인데
모듈 로더 부분이
1 2 3 4 5 6 7 8 9 10 11 12 13 | module: { loaders: [ { test: /\.js$/, loader: 'babel', exclude: /node_modules/, query: { cacheDirectory: true, presets: ['es2015', 'react'] } } ] } | cs |
이런식으로 loader:'babel'
로 되어있는 경우 발생한다
바벨을 참조하지 못해서 생기는 오류인듯 한데
loader:'babel' -> loader:'babel-loader' 이렇게 바꿔주면 간단히 해결이 된다.
1 2 3 4 5 6 7 8 9 10 11 12 13 | module: { loaders: [ { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/, query: { cacheDirectory: true, presets: ['es2015', 'react'] } } ] } | cs |
이제 npm start 명령어를 실행하면 complied successfully 라는 반가운 문구를 볼 수가 있게 된다.
'Yame Programmer > react.js' 카테고리의 다른 글
[react.js] react-router v4 browserHistory.push 오류 해결 방법 (0) | 2017.04.19 |
---|---|
[react.js] 함수형 컴포넌트 (0) | 2017.02.27 |
[react.js] react Component Life Cycle API (0) | 2017.02.27 |
[react.js] 변경된 값만 렌더링 되도록 하기 shouldComponentUpdate() (0) | 2017.02.27 |
[react.js] react.js 에서 Jquery 사용 하는 방법(unused import $ from jquery ) (1) | 2017.02.22 |