인프런 커뮤니티 질문&답변
작성한 질문수
Cannot find package 'react-refesh' 이런 에러 뜨시는 분들 보세요.
작성
·
96
·
수정됨
0
한시간 헤매다 다행히 해결책 찾았습니다.
기존 강좌와 @pmmmwh/react-refresh-webpack-plugin 해당 플러그인 버전 차이 때문에 발생한 에러 같습니다.
webpack.config.js 파일을 아래와 같이 전체적으로 수정해주세요.
const path = require('path');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const webpack = require('webpack');
const isDevelopment = process.env.NODE_ENV !== 'production';
module.exports = {
name: 'word-relay-dev',
mode: 'development',
devtool: 'eval',
resolve: {
extensions: ['.js', '.jsx'],
},
entry: {
app: './client',
}, // 입력
mode: isDevelopment ? 'development' : 'production',
module: {
rules: [{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
{
loader: require.resolve('babel-loader'),
options: {
presets: [
['@babel/preset-env', {
targets: {
browsers: ['> 5% in KR'],
},
debug: true,
}],
'@babel/preset-react',
],
plugins: [
isDevelopment && require.resolve('@babel/plugin-proposal-class-properties'),
isDevelopment && require.resolve('react-refresh/babel'),
].filter(Boolean),
},
},
],
}],
},
plugins: [
isDevelopment && new webpack.HotModuleReplacementPlugin(),
isDevelopment && new ReactRefreshWebpackPlugin(),
].filter(Boolean),
output: {
path: path.join(__dirname, 'dist'),
filename: 'app.js',
publicPath: '/dist/',
}, // 출력
devServer: { // webpack 4버전 이상(5버전 포함)도 아래처럼 수정 필요
devMiddleware: { publicPath: '/dist' },
static: { directory: path.resolve(__dirname) },
hot: true,
},
};
공식문서는 아래 링크를 참고하세요.
https://www.npmjs.com/package/@pmmmwh/react-refresh-webpack-plugin/v/0.5.0-rc.4
답변 1
0
안녕하세요, 인프런 AI 인턴입니다.
해도디님이 “Cannot find package ‘react-refresh’” 오류를 해결하는 방법을 공유해주셨네요. 이 문제는 웹팩과 관련된 설정에서 발생하는 일반적인 문제로, 특히 @pmmmwh/react-refresh-webpack-plugin의 버전 불일치가 원인일 수 있습니다. 이 플러그인은 개발 환경에서 핫 리로딩을 지원하기 위해 사용되며, webpack의 설정 파일을 최신 상태로 업데이트하는 것이 중요합니다.
해결 방법은 webpack.config.js 파일을 수정하는 것입니다. 수정된 구성에서는 isDevelopment 플래그를 사용하여 환경에 따라 플러그인과 설정을 적절히 적용하고 있습니다.
또한, babel-loader와 관련된 설정에서 @babel/plugin-proposal-class-properties를 추가하고, 개발 환경에서만 react-refresh/babel 플러그인을 사용하도록 설정하였습니다. 이는 트랜스파일링 과정을 통해 React 컴포넌트의 핫 리로드가 가능하도록 합니다.
추가적으로 공식 문서를 참고하면, 특정 버전에 대한 더 많은 정보를 얻을 수 있습니다. @pmmmwh/react-refresh-webpack-plugin 공식 문서를 확인하시면 도움이 될 것입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.