Cannot find package 'react-refesh' 이런 에러 뜨시는 분들 보세요.

한시간 헤매다 다행히 해결책 찾았습니다.

기존 강좌와 @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