[ReactJS] React에서 npm 실행시 loader omit 오류 해결

ReactJS에서 생긴 오류에 대해서 하나씩 기억하기 위해 포스팅하려고 한다.

문제

React를 Webpack을 통해서 컴파일 할 때 다음과 같은 오류가 뜬적이 있는데

ERROR in multi (webpack)-dev-server/client?http://0.0.0.0:7777 webpack/hot/dev-server ./src/index.js

Module not found: Error: Can't resolve 'babel' in '/Users/taewoo/Documents/ReactJS projects/react-tutorial'

BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.

“It’s no longer allowed to omit the ‘-loader’ suffix when using loaders.”를 봐서 더 이상 “-loader”를 생략하면 안된다라는 의미같다.

해결

구글링을 통해 보니 아래와 같이 webpack.config.js에서 ‘babel’을 ‘babel-loader’로 고쳐주면된다.

• loader: 'babel' -> loader: 'babel-loader'

webpack.config.js

module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    cacheDirectory: true,
                    presets: ['es2015', 'react']
                }
            }
        ]
    }

참고자료

• https://github.com/tcoopman/image-webpack-loader/issues/59