[webpack ERROR] $RefreshSig$ is not defined

 

npm run dev 명령을 실행하고 터미널에는 successfully 라고 뜨고 브라우저에 아래와 같은 

$RefreshSig$ is not defined ERROR 가 나왔다 

 

My guess is that you've included the react-refresh/babel plugin to process node_modules. This will break because some code (as used by Webpack and WDS) will inevitably run before the plugin

출처 :https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/92

 

이유가 node_modules를 처리하기위해 react-refresh/babel을 사용했는데 일부 코드는 불가피하게 plugin 보다 먼저 실행되기 때문에 요게 안된다(?) 라고 한다. 

 

해결한 분의 코드 

Indeed. What a great guess! The cause was missing exclude: /node_modules/ in js/ts loaders with babel-loader.

Thanks a lot, I was stuck on this for so long 🙏

 

어떻게 node_modules를 제외하는지 잘 모르겠지만 위에서 본대로 webpack.config.js의 아래 코드 추가였는데 요건 안되었다.

{
  test: /\.js$/,
  exclude: /node_modules\/(?!(MY-MODULE|ANOTHER-ONE)\/).*/,
},

 

 

배포용 환경설정에는 아래 코드들이 들어가면 안된다고 한 내용을 아까봐서 refresh 사용되는 부분을 주석처리 해주니 해결되었다. 

ReactRefreshWebpackPlugin
React-refresh/babel 

 

 

 

해결책 => react-refresh/babel을 사용하지 않기 ! 주석처리 or 제거하기 ! 

 

 

const path = require('path')
//const RefreshwebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack')
// const mode = 'production'
// const devtool = 'hidden-source-map'
const mode = 'development'
const devtool = 'eval'
const isDevelopment = mode === 'production';
const refresh = isDevelopment ? [] : ['react-refresh/babel']

module.exports = {
    name:'ingoo',
    mode:mode,
    devtool:devtool,

    resolve:{
        extensions:['.js', '.jsx']
    },

    entry:{
        app:['./index.jsx']
    },
    module:{
        rules:[
            {
                test:/\.jsx?$/,
                loader:'babel-loader',
                options:{
                    presets:[
                        ['@babel/preset-env',{
                            targets:{browsers:['last 2 chrome versions']}
                        }],
                        '@babel/preset-react'
                    ],
                    //plugins:refresh   주석처리 
                },
            },
            {
                test:/\.css$/,
                use:[MiniCssExtractPlugin.loader,'css-loader'],
                //exclude: /node_modules\/(?!(MY-MODULE|ANOTHER-ONE)\/).*/,
            }
        ],
    },

    plugins:[
        //new RefreshwebpackPlugin(),
        new webpack.LoaderOptionsPlugin({debug:true}),
        new MiniCssExtractPlugin({ filename: 'app.css' })
    ],
    output:{
        path:path.join(__dirname,'dist'),
        filename:'app.js',
        publicPath:'/dist',
    },

    devServer:{
        publicPath:'/dist',
        hot:true,
        proxy: {
            '/api': 'http://localhost:3000',
        },
        host: '0.0.0.0',
    }
}