공통 이슈: React에서 extract-text-webpack-plugin을 사용할 때 “window not defined” 오류
React 컴포넌트를 빌드하기 위해 webpack을 사용하고 있는데, extract-text-webpack-plugin을 사용하여 CSS를 생성된 JS 파일로부터 분리하려고 할 때 “window not defined” 오류가 발생한다면, 혼자가 아닙니다. 이 오류는 상당히 귀찮을 수 있지만, 해결책이 있습니다.
가능한 원인
“window not defined” 오류는 보통 extract-text-webpack-plugin이 CSS를 출력하는 로더를 기대하지만, 대신에 style-loader와 같은 자바스크립트 코드를 웹페이지에 주입하기 위한 로더를 받기 때문에 발생합니다. 이 로더는 빌드 과정에서 사용할 수 없는 window 객체에 접근하려고 합니다.
가능한 해결책
다음은 몇 가지 시도해 볼 수 있는 해결책입니다:
해결책 1: 로더 설정 조정하기
하나의 가능한 해결책은 webpack.config.js 파일에서 로더 설정을 조정하는 것입니다. 이 해결책은 sass-loader를 예로 들었다고 가정합니다:
module: {
loaders: [{
test: /\.sass$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract('style-loader', 'css!sass?indentedSyntax=true&sourceMap=true')
}]
}
extract 메소드를 사용하여 loader를 style-loader!css-loader!sass-loader로 지정함으로써 CSS만 추출되도록 하여 window와 관련된 오류를 피할 수 있습니다.
해결책 2: Webpack 2 설정에 맞게 변경하기
Webpack 2를 사용한다면, extract 메소드가 변경되었다는 점에 주의하세요. 다음과 같이 설정 파일을 업데이트하세요:
rules: [{
test: /\.css$/,
exclude: '/node_modules/',
use: ExtractTextPlugin.extract({
fallback: [{
loader: 'style-loader',
}],
use: [{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[name]__[local]--[hash:base64:5]',
},
}, {
loader: 'postcss-loader',
}],
}),
}]
호환성 문제를 피하기 위해 버전 간의 변경 사항에 대해 항상 공식 webpack 설명서를 참고하세요.
결론
extract-text-webpack-plugin의 “window not defined” 오류는 로더 설정을 조정하거나 사용하는 webpack의 특정 버전에 적응함으로써 해결할 수 있습니다. 위에서 설명한 해결책을 따라 CSS를 생성된 JS 파일로부터 성공적으로 분리할 수 있고, 이 오류를 겪지 않을 수 있습니다.
필요한 경우 다른 설정을 실험하고 문서를 참고하세요. webpack은 독특한 도전을 제시할 수 있지만, 끈기를 가지고 이를 극복하여 효율적으로 작업 흐름을 최적화할 수 있습니다.
참고 자료 :
같은 카테고리의 다른 글 보기 :
