glook / webpack-typescript-react

Webpack 5 boilerplate with support of most common loaders and modules (see tags and description)
MIT License
217 stars 54 forks source link

React refresh and null module to Hash.update #12

Closed charlessolar closed 2 years ago

charlessolar commented 3 years ago

Toying around with a webpack 5 upgrade and just finished figuring out a small error message I was receiving when doing

yarn start

with this project.

Heres the error:

yarn run v1.22.5
$ webpack --env mode=dev --env isDevServer --env NODE_ENV=local serve --config webpack.config.babel.js
    at Hash.update (internal/crypto/hash.js:84:11)
    at BulkUpdateDecorator.update (FrontEnd.New\node_modules\webpack\lib\util\createHash.js:51:14)
    at NormalModule.updateHash (FrontEnd.New\node_modules\webpack\lib\NormalModule.js:1129:8)
    at Compilation._createModuleHash (FrontEnd.New\node_modules\webpack\lib\Compilation.js:3092:10)
    at Compilation.createModuleHashes (FrontEnd.New\node_modules\webpack\lib\Compilation.js:3064:10)
    at FrontEnd.New\node_modules\webpack\lib\Compilation.js:2341:11
    at Hook.eval [as callAsync] (eval at create (FrontEnd.New\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (FrontEnd.New\node_modules\webpack\node_modules\tapable\lib\Hook.js:18:14)
    at FrontEnd.New\node_modules\webpack\lib\Compilation.js:2301:36
    at eval (eval at create (node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:11:1)

Traced the issue to react-refresh-webpack-plugin https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/289

To fix simply add the webpack.HotModuleReplacementPlugin to the list of plugins in dev.js as the dev suggests. I assume in a future version this won't be an issue any longer.

/**
 * Created by: Andrey Polyakov (andrey@polyakov.im)
 */
import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';

import { HotModuleReplacementPlugin } from 'webpack';

import {devServerConfig} from './config';

export default {
    devtool: 'cheap-module-source-map',
    plugins: [new HotModuleReplacementPlugin(), new ReactRefreshWebpackPlugin()],
    devServer: devServerConfig,
};

Cheers