“Module Build Failed” – Webpack, React, Babel
만약 React, Flux, Webpack, Babel을 사용하다가 “Module Build Failed” 오류를 만나게 되면, 당신은 혼자가 아닙니다. 이 블로그 포스트에서는 이 문제를 해결하기 위한 단계별 솔루션을 제공하고, 이 문제를 해결하는 방법을 알려드리겠습니다.
오류
이 오류 메시지는 파일을 다시 빌드하려고 할 때 보통 나타나며, 다음과 같은 메시지가 표시됩니다:
Module build failed: Error: Couldn't find preset "env" relative to directory문제 조사
이 오류 메시지는 무엇이 문제의 원인일 수 있는지에 대한 힌트를 제공합니다 – 프리셋이 없습니다. 필요한 의존성이 제대로 설치되어 있고 구성되어 있는지 확인하는 것이 중요합니다.
해결책
“Module Build Failed” 오류를 해결하기 위해 다음 단계를 따르세요:
단계 1: 프리셋 설치
먼저 터미널에서 다음 명령을 실행하여 필요한 프리셋을 설치해야 합니다:
npm install --save babel-preset-env babel-preset-react단계 2: 웹팩 구성 업데이트
그다음, webpack.config.js 파일을 열고 로더 섹션을 업데이트해야 합니다. 쿼리에 프리셋을 포함시켜야 합니다:
// webpack.config.js
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['env', 'react']
}
}
]
}
단계 3: 다시 빌드
이제 알맞은 npm 스크립트나 명령을 실행하여 파일을 다시 빌드해 보세요.
대안적인 해결책
위 단계들로 문제가 해결되지 않는다면, 웹팩 4를 사용하고 있는 경우일 수도 있습니다. 그렇다면, 구성을 이에 맞게 업데이트해야 합니다.
Webpack 4를 사용하여 React 앱을 처음부터 설정하는 방법에 대한 안내는 다음 블로그 포스트를 참조하세요: Medium 블로그 포스트.
반드시 node_modules 디렉토리에 react 폴더가 있는지 확인하세요. 없다면, 다음 명령을 실행하여 설치할 수 있습니다:
npm install react react-dom결론
Webpack에서 발생하는 “Module Build Failed” 오류는 좀 답답할 수 있지만, 이 블로그 포스트에 나열된 단계를 따라 오류를 해결하고 React, Flux, Webpack, Firebase를 사용하여 실시간 앱을 계속 개발할 수 있을 것입니다.
