Webpack-hot-middleware: Requesting hot json update 404 returns

[carlitux]

::1 - GET /76bddcf583e3c548cb73.hot-update.json HTTP/1.1 404 49 - 0.746 ms

[glenjamin]

This is usually because your paths are not consistent between dev-middleware on server, hot-middleware on the server and hot-middleware/client.

Can you share your webpack config and express mounting code please?

[carlitux]

I am using this just for server the files, also there is creating a lot of js and json update files now.

Webpack

const path = require('path');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const hrm = 'webpack-hot-middleware/client?path=http://localhost:4000/__webpack_hmr&timeout=20000';

module.exports = [{
  name: 'react',
  devtool: 'inline-source-map',
  entry: [
    hrm,
    './frontend/javascript/index.jsx'
  ],
  output: {
    path: path.join(__dirname, 'osys/static/javascript'),
    filename: 'app.js',
    publicPath: '/'
  },
  resolve: {
    extensions: ['', '.jsx', '.scss', '.js', '.json'],
    modulesDirectories: [
      'node_modules',
      path.resolve(__dirname, './node_modules')
    ]
  },
  module: {
    loaders: [
      {
        test: /(\.js|\.jsx)$/,
        exclude: /(node_modules)/,
        loader: 'babel',
        query: {
          presets:['es2015','react','react-hmre'],
          plugins: ["transform-class-properties", "transform-decorators-legacy"]
        }
      }, {
        test: /(\.scss|\.css)$/,
        loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap!toolbox')
      }
    ]
  },
  sassLoader: {
    includePaths: [path.resolve(__dirname, './node_modules/compass-mixins/lib')]
  },
  toolbox: {
    theme: path.join(__dirname, 'frontend/scss/theme.scss')
  },
  postcss: [autoprefixer],
  plugins: [
    new ExtractTextPlugin('../styles/app.css', { allChunks: true }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ]
}, {
  name: 'materialize',
  context: __dirname,
  devtool: 'inline-source-map',
  entry: [
    hrm,
    './frontend/javascript/main.js'
  ],
  output: {
    path: path.join(__dirname, 'osys/static/javascript'),
    filename: 'main.js',
    publicPath: '/'
  },
  resolve: {
    extensions: ['', '.scss', '.js', '.json'],
    modulesDirectories: [
      'node_modules',
      path.resolve(__dirname, './node_modules')
    ]
  },
  module: {
    loaders: [
      {
        test: /(\.js|\.jsx)$/,
        exclude: /(node_modules)/,
        loader: 'babel',
        query: {
          presets:['es2015'],
          plugins: ["transform-class-properties", "transform-decorators-legacy"]
        }
      }, {
        test: /(\.scss|\.css)$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader")
      }, {
        test   : /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
        loader : 'file-loader?name=../../static/fonts/[name].[ext]'
      }
    ]
  },
  sassLoader: {
    includePaths: [path.resolve(__dirname, './node_modules/materialize-css')]
  },
  postcss: [autoprefixer],
  plugins: [
    new ExtractTextPlugin('../styles/site.css', { allChunks: true }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ]
}];

Server

var http = require('http');

var express = require('express');

var app = express();

app.use(require('morgan')('short'));

// ************************************
// This is the real meat of the example
// ************************************
(function() {

  // Step 1: Create & configure a webpack compiler
  var webpack = require('webpack');
  var webpackConfig = require(process.env.WEBPACK_CONFIG ? process.env.WEBPACK_CONFIG : './webpack.config');
  var compiler = webpack(webpackConfig);

  // Step 2: Attach the dev middleware to the compiler & the server
  app.use(require("webpack-dev-middleware")(compiler));

  // Step 3: Attach the hot middleware to the compiler & the server
  app.use(require("webpack-hot-middleware")(compiler, {
    log: console.log, path: '/__webpack_hmr', heartbeat: 10 * 1000
  }));
})();


if (require.main === module) {
  var server = http.createServer(app);
  server.listen(process.env.PORT || 4000, function() {
    console.log("Listening on %j", server.address());
  });
}

[glenjamin]

The problem is you're missing the publicPath config option for dev-middleware - this line from the example: https://github.com/glenjamin/webpack-hot-middleware/blob/master/example/server.js#L21

That should fix things up.

[SystemParadox]

I should also point out that you MUST set the output.publicPath in the webpack config. It is not sufficient to just set publicPath for webpack-dev-middleware.

[kvn1351]

@glenjamin I have the same issue. I've been searching a solution for 4 hours without any luck.

app.js
webpack.config.js
------src
---------index.js
---------index.html
------dist
---------main.js
---------index.html

app.use(express.static(__dirname + '/dist'));

(()=>{
    const webpack = require('webpack');
    const webpackConfig = require('./webpack.config');
    const compiler = webpack(webpackConfig);

    app.use(require("webpack-dev-middleware")(compiler, {
      logLevel: 'warn', 
      publicPath: webpackConfig.output.publicPath,
    }));

    app.use(require("webpack-hot-middleware")(compiler, {
      log: console.log, 
      path: '/__webpack_hmr', 
      //heartbeat: 10 * 1000,
    }));
  })();

const webpack = require('webpack');
const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin')
// const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  entry: [
    './src/index.js',
    'webpack-hot-middleware/client?path=http://localhost:3000/__webpack_hmr&timeout=20000',
  ],
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
  },
  module: {
    rules: [
      {
        test: /\.(scss|css)$/,

        use: [{
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'sass-loader'
          }
        ]
      }
    ]
  },
  mode: 'development',
  devtool: '#source-map',
  plugins: [
    //new UglifyJSPlugin()
    new HtmlWebpackPlugin({ // Also generate a test.html
      filename: 'index.html',
      template: 'src/index.html'
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  ]
};

json "webpack": "^4.0.1", "webpack-dev-middleware": "^3.0.0", "webpack-hot-middleware": "^2.21.1"

[glenjamin]

Try putting the static serve of dist after the middleware section

[kvn1351]

@glenjamin

Try putting the static serve of dist after the middleware section

The problem remains - unfortunately.

Request URL:http://localhost:3000/abc8e16f038ff105b576.hot-update.json
Request Method:GET
Status Code:404 Not Found
Remote Address:[::1]:3000
Referrer `Policy:no-referrer-when-downgrade

client.js?4500:87 [HMR] connected
process-update.js:41 [HMR] Checking for updates on the server...
bootstrap:32 GET http://localhost:3000/abc8e16f038ff105b576.hot-update.json 404 (Not Found)
(anonymous) @ bootstrap:32
hotDownloadManifest @ bootstrap:24
hotCheck @ bootstrap:230
check @ process-update.js:78
./node_modules/webpack-hot-middleware/process-update.js.module.exports @ process-update.js:42
processMessage @ client.js?4500:251
handleMessage @ client.js?4500:131
handleMessage @ client.js?4500:94
process-update.js:51 [HMR] Cannot find update (Full reload needed)
cb @ process-update.js:51
(anonymous) @ process-update.js:82
Promise.then (async)
check @ process-update.js:81
./node_modules/webpack-hot-middleware/process-update.js.module.exports @ process-update.js:42
processMessage @ client.js?4500:251
handleMessage @ client.js?4500:131
handleMessage @ client.js?4500:94
process-update.js:52 [HMR] (Probably because of restarting the server)
cb @ process-update.js:52
(anonymous) @ process-update.js:82
Promise.then (async)
check @ process-update.js:81
./node_modules/webpack-hot-middleware/process-update.js.module.exports @ process-update.js:42
processMessage @ client.js?4500:251
handleMessage @ client.js?4500:131
handleMessage @ client.js?4500:94 

Edit: I've also tested without http://localhost:3000/ in the path variable, but that doesn't change anything.

[glenjamin]

The rest looks right to me, those files are actually served by webpack-dev-middleware so the issue is around the config there.

If you manually add /dist to the URL is the file there instead? The other option is to add some code to dump the MemoryFS instance that contains the build artefacts to see what’s what

[kvn1351]

@glenjamin Thanks a lot. After attaching the write-file-webpack-plugin it works perfectly. So the issue is that app.use('/', express.static(__dirname + '/dist')); doesn't look in memory.

Any way to fix this?

app.js
webpack.config.js
------src
---------index.js
---------index.html
------dist
---------main.js
---------main.js.map
---------index.html
---------4877a4f4a2e5641008df.hot-update.json
---------0df88c6d3136a8c172fc.hot-update.json

Request URL:http://localhost:3000/0df88c6d3136a8c172fc.hot-update.json
Request Method:GET
Status Code:200 OK
Remote Address:[::1]:3000
Referrer Policy:no-referrer-when-downgrade

[glenjamin]

webpack-dev-middleware is supposed to serve up the in-memory files in the memory-fs instance that the compiler is generating.

[kvn1351]

@glenjamin So is webpack-dev-middleware supposed to serve the static directory I've set with express? That's namely the issue here: express.static() doesn't look in memory.

[glenjamin]

The dev-mode compiler generates files in-memory, which webpack-dev-middleware serves up.

The internal fs instance is exposed so might help you debug: https://github.com/webpack/webpack-dev-middleware/blob/master/index.js#L77

[kvn1351]

@glenjamin I don't have the time to get to the bottom of this unfortunately. It will have to wait until next week. I'll have to use the write-file-webpack-plugin for the time being.

It's a pity that these tools always have to present some sort of hassle.

Thanks a lot for your help. I'll report back asap.

[matthewmueller]

Commenting on this for my future self and anyone else:

I've run into this a couple times while using the multicompiler. The trick there is to make sure you specify a name. Something like this:

bundle.push(
  'webpack-hot-middleware/client?path=/__webpack_hmr&name=' + target
)

Multicompiler requires you to give your config a name, it's that name that webpack-hot-middleware is looking for. This will make the 404 go away, but if you get the name wrong, hot reload will silently fail. If you're hitting that, you should log out what name it's expecting here:

https://github.com/webpack-contrib/webpack-hot-middleware/blob/6133e210b8c04d199df4c9a071d41559ab83b9e6/client.js#L244-L246

[DmitryVolkovTulaco]

@glenjamin another problem with this issue.
Now webpack-hot-middleware doesnt create *.hot-update.json file on first build, only when I change something and it reloads.

My source files:

const path = require('path');
const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');
const ManifestPlugin = require('webpack-manifest-plugin');

module.exports = [{
    name: 'client',
    mode: 'development',
    target: 'web',
    entry: ['webpack-hot-middleware/client?path=http://localhost:3000/__webpack_hmr', './app/index.js'],
    output: {
        path: path.join(__dirname, '../build'),
        filename: 'client.js',
        publicPath: '/build/',
    },
    plugins: [
        new ManifestPlugin({
          writeToFileEmit: true,
        }),
        new webpack.HotModuleReplacementPlugin(),
    ],
    module: {
        rules: [
            {
                test: /\.js?$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /\.(png|jpg|gif|ico|jpeg)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                        }
                    }
                ]
            }
        ],
    },
},
{
    name: 'server',
    mode: 'development',
    target: 'node',
    entry: './server/server.js',
    externals: [nodeExternals()],
    output: {
        path: path.join(__dirname, '../build'),
        filename: 'server.js',
        libraryTarget: 'commonjs2',
        publicPath: '/build/',
    },
    module: {
        rules: [
            {
                test: /\.js?$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'sass-loader'
                    }
                ]
            },
            {
                test: /\.(png|jpg|gif|ico|jpeg)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            emitFile: false
                        }
                    }
                ]
            }
        ]
    }
}];

require('ignore-styles').default(undefined, (module, filename) => {
  if ((['.png', '.jpg'].some(ext => filename.endsWith(ext)) )) {
    module.exports = '/build/' + path.basename(filename);
  }
});
require('babel-register')({
    ignore: [ /(node_modules)/ ],
    presets: ["env", "stage-0", "react"],
    plugins: [
        'dynamic-import-node',
        'syntax-dynamic-import',
        'react-loadable/babel'
    ]
});

const express = require('express');
const path = require('path');
const webpack = require('webpack');
const Loadable = require('react-loadable');
const webpackDevMiddleware = require('webpack-dev-middleware');
const serverRenderer = require('./server').default;

const config = require('../configs/webpack.common.js');
const compiler = webpack(config);

const app = express();
app.use(webpackDevMiddleware(compiler, { serverSideRender: true, publicPath: '/build/', writeToDisk: true, logLevel: 'trace' }));
app.use(require("webpack-hot-middleware")(compiler, {
  log: console.log,
  path: '/__webpack_hmr',
}));
app.use(serverRenderer());

Loadable.preloadAll().then(() => {
    app.listen(3000, () => console.log('Development server is running on port 3000'));
}).catch(err => {
    console.log(err);
});

webpack-dev-server output:

➤ ｢wdm｣: Asset written to disk: build/anotherPage.server.js
➤ ｢wdm｣: Asset written to disk: build/homePage.server.js
➤ ｢wdm｣: Asset written to disk: build/server.js
➤ ｢wdm｣: Asset written to disk: build/808671C0-6E75-46E2-B74B-FD4CB9D93E52.jpg
➤ ｢wdm｣: Asset written to disk: build/anotherPage.client.js
➤ ｢wdm｣: Asset written to disk: build/homePage.client.js
➤ ｢wdm｣: Asset written to disk: build/client.js
➤ ｢wdm｣: Asset written to disk: build/manifest.json
webpack built client 4609c44db52640206abf in 1421ms
webpack built server ebe11be328b378ffaaf0 in 1210ms

As you see, webpack-hot-middleware doesn't generate *.hot-update.json files. But after change and rebuild I can the following:

webpack building...
webpack building...
➤ ｢wdm｣: Asset written to disk: build/anotherPage.server.js
➤ ｢wdm｣: Asset written to disk: build/homePage.server.js
➤ ｢wdm｣: Asset written to disk: build/server.js
➤ ｢wdm｣: Asset written to disk: build/808671C0-6E75-46E2-B74B-FD4CB9D93E52.jpg
➤ ｢wdm｣: Asset written to disk: build/anotherPage.client.js
➤ ｢wdm｣: Asset written to disk: build/homePage.client.js
➤ ｢wdm｣: Asset written to disk: build/client.js
➤ ｢wdm｣: Asset written to disk: build/homePage.4609c44db52640206abf.hot-update.js
➤ ｢wdm｣: Asset written to disk: build/4609c44db52640206abf.hot-update.json
➤ ｢wdm｣: Asset written to disk: build/manifest.json
webpack built client f5e1b5695c7c43cb78e2 in 125ms
webpack built server b6ffa0edfb1c4022d591 in 114ms

Here you see that hashes are not equal (4609c44db52640206abf.hot-update.json and f5e1b5695c7c43cb78e2)