Browsersync - Githubissues

Hey everyone, I am trying to use hjs-webpack for dev mode in an isomorphic React app, and I was wondering how I would use something like Browsersync with it. Here is my current dev setup:

const getConfig = require('hjs-webpack');
const webpack = require('webpack');
const browserSync = require('browser-sync');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');

const config = getConfig({
  in: 'src/app.js',
  out: 'bin/public',
  clearBeforeBuild: true,
  port: 8080,
  isDev: true,
  html: function (context) {
    return {
      'index.html': context.defaultTemplate({
        html: (
        `<!DOCTYPE html>
        <html lang="en">
          <head>
            <meta charSet="utf-8">
            <meta httpEquiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="shortcut icon" href="((link to ext. hosted favicon))">
          </head>
          <body>
            <div id="root"></div>
          </body>
        </html>`
        ),
      }),
    };
  },
});
let bundle = webpack(config);
console.log(bundle)
browserSync({
  server: {
    baseDir: 'src',
    middleware: [
      webpackDevMiddleware(bundle, {
        publicPath: config.output.publicPath,
        stats: { colors: true },
      }),
      webpackHotMiddleware(bundle),
    ],
  },

  files: [
    'src/css/*.css',
    'src/*.html',
  ],
});

module.exports = config;

I am using https://github.com/BrowserSync/recipes (specifically https://github.com/Browsersync/recipes/tree/master/recipes/webpack.react-hot-loader).

Currently, I am getting callback is not a function in __project_root__/node_modules/hjs-webpack/node_modules/webpack/lib/NullFactory.js with this configuration

Thanks in advance! This project has saved me many painful webpack-filled hours 👍

HenrikJoreteg / hjs-webpack

Browsersync #273