SSR Example with HMR

[davidfloegel]

Hello again,

I'm wondering if it's possible to get a working example for @loadable/component with SSR and HMR? (For example update the existing example)
We've been trying for days now but nothing seems to work...

That would be amazing. Thanks a lot!

[kennethlmartin]

Not sure if this is of help to you but this is what I have been doing to implement SSR with HMR in v4.
https://github.com/kennethlmartin/react-archetype

I attempted to upgrade to the latest v5 but ran into an issue #153. Until that's resolved I'll be sticking with v4.
https://github.com/kennethlmartin/react-archetype/tree/loadable-v5

[davidfloegel]

@kennethlmartin thanks dude I'll have a look at it :)

[valorloff]

Please, reopen issue, let's discuss,
I tried it like this:

webpack.config.babel.js:

entry: development ? [
            'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000',
                    path.resolve(__dirname,`src/client/main-${target}.js`),] :
              path.resolve(__dirname,`src/client/main-${target}.js`),
        devServer: {
            contentBase: path.join(__dirname, 'public/dist'),
            compress: true,
            port: 9000,
            hot: true,
        },

        output:
            {
                path: path.join(DIST_PATH, target),
                filename: production ? '[name]-bundle-[chunkhash:8].js' : '[name].js',
                // publicPath: `/dist/${target}/`,
                publicPath: development ? `http://localhost:9292/scripts/${target}/` : `/dist/${target}/`,
                libraryTarget:
                    target === 'node' ? 'commonjs2' : undefined,
            },

        plugins: [
            new LoadablePlugin(),
            new webpack.HotModuleReplacementPlugin(),
            new MiniCssExtractPlugin(),
            .........
        ],

/server/main.js

    app.use(
        webpackDevMiddleware(compiler, {
            // logLevel: 'silent',
            publicPath: 'http://localhost:9292/scripts/web',
            // publicPath: '/dist/web',
            writeToDisk(filePath) { // ???
                return /dist\/node\//.test(filePath) || /loadable-stats/.test(filePath)  // ???
            },
        }),
    );
     app.use(webpackHotMiddleware(compiler, {
         log: console.log
     }));
     nodeStats = 'http://localhost:9292/scripts/node/loadable-stats.json';
     webStats = 'http://localhost:9292/scripts/web/loadable-stats.json';

but I'm not sure if this is right direction, especially about writeToDisk(filePath), what can be replaced this?
Any ideas, hint ?

[zeppelinen]

If anyone googling for HMR/SSR example will come across this page, here's my example:

loadableStats.js

const axios = require('axios');
const fs = require('fs');
const path = require('path');
const assetsPath = '/assets/loadable-stats.json';

// eslint-disable-next-line consistent-return
async function loadableStats(origin) {
  if (!module.hot) {
    try {
      fs.readFile(
        path.resolve(`./build/public/assets/loadable-stats.json`),
        'utf-8',
        (err, data) => {
          if (err) throw err;
          return JSON.parse(data);
        }
      );
    } catch ({ err }) {
      throw new Error(err);
    }
  } else {
    try {
      console.debug(`Using loadable-assets.json from: ${origin}${assetsPath}`);
      const { data } = await axios.get(`${origin}${assetsPath}`);
      return data;
    } catch ({ err }) {
      throw new Error(err);
    }
  }
}

export default loadableStats;

whatever.js

import loadableStats from './loadableStats';

const origin = 'http://localhost:3000';      // adapt to your dev environment
const extractor = new ChunkExtractor({
      stats: await loadableStats(origin),
      entrypoints: ['client'],
    });