react-hot-loader doesn't work with multiple entries

[mulmulovich]

i'm using the typescript demo react-hot-ts
but my project set up little bit different:

webpack.config with multiple entries (am i doing it right?..)

        entry: {
            lib: [
                'react',
                'react-dom',
                'react-router',
                'redux',
                'react-redux',
                'react-intl',
                'axios',
                'react-bootstrap'
            ],
            app: ['react-hot-loader/patch', 'webpack-hot-middleware/client', './app/main.tsx']
        },

 module: {
            rules: [{
                    test: /\.tsx?$/,
                    use: [
                        { loader: 'react-hot-loader/webpack' },
                        {
                            loader: 'ts-loader',
                            options: { compilerOptions: tsCompilerOptions }
                        }
                    ],
...



md5-b201b0bdc3dcc6cb64667154156afa64



const webpack = require('webpack')
    const webpackMiddleware = require('webpack-dev-middleware')
    const webpackConfig = require(process.cwd() + '/build/webpack.config')(false)
    let webpackMiddlewareConfig = {
        publicPath: '/',
        stats: {
            chunks: false,
            chunkModules: false,
            colors: true
        }
    }
    webpackConfig.output.path = '/'
    let webpackCompiler = webpack(webpackConfig)
    let webpackHotMiddleware = require('webpack-hot-middleware')
    app.use(webpackMiddleware(webpackCompiler, webpackMiddlewareConfig))
    app.use(webpackHotMiddleware(webpackCompiler))
    app.use('/', function (req, res, next) {
        webpackCompiler.outputFileSystem.readFile('/index.html', function (err, result) {
            if (err) {
                return next(err)
            }
            res.set('content-type', 'text/html')
            res.send(result)
            res.end()
        })
    })

i couldn't make it work using above setup. can you please advise?

BR,

Muli

[theKashey]

So what exactly does not work - HRM or RHL or only the case with multiple entries?

[gregberge]

@mulmulovich it looks like your problem has been solved. I close the issue, feel free to reopen it if you experienced some issues with React Hot Loader v4.

[Slapbox]

All my entry points say they're listening, but only one responds to changes. I've been digging for two days to get this close to working, any ideas would be greatly appreciated!

[theKashey]

How this connected with loadable-components?

[Slapbox]

Thanks for your response @theKashey, Currently I'm just wrapping the exported components with hot(). It looks like getting a message that it was listening was a one time lucky break for me or something, and actually what I see is only [HMR] Waiting for update signal from WDS...

But now it never gets to [WDS] Hot Module Replacement enabled. in my second and third entry points.

I'm using the RHL Babel plugin in conjunction with Webpack and Babel-Loader (but not with the RHL Webpack plugin.) Can you advise on what the best course forward might be?

I've used this as a rough guide and it didn't seem there was any more to do to get multi-entry working, but I guess I'm mistaken.

[theKashey]

As long as you are wrapping exports with hot - this is RHL issue and not related to loadable components. However, let me be honest - I know nothing about Electon, except people complain from time to time that it does not play well with Electron.
However, could you have a look at RHL+Electron example, which supposed to work - might be you will notice some difference between setups.

[Slapbox]

I'm pretty sure it's not an Electron specific issue, but I know what you mean. Frankly I'm often hesitant to even mention I'm using Electron because people who might be able to help run at the sound of "I use Electron," and I don't really blame them.

Is there any issue with using RHL with Webpack's dll plugin?

Ignoring the Electron aspect, do you have any general advice for debugging multiple entry points? I've tried re-ordering entry points in my Webpack config, and also tried loading the code for each entry point in different orders in my own code, but it's always the same entry point that works and the same two that don't, which is what really baffles me.

[theKashey]

Please check, well :) other Electron related issues, like this - https://github.com/gaearon/react-hot-loader/issues/1333#issuecomment-533422757

Look like "hot-reloadability" depends on where RHL is defined, and how it's bundled. DLL plugin might also affect it much, however it usually affects only stuff bundled into the DLL.