Webpack-hot-middleware: Update check failed: Error: Manifest request to

Created on 8 Dec 2016  路  16Comments  路  Source: webpack-contrib/webpack-hot-middleware

When the while is changed its not updating the page. I get this error in console.

Update check failed: Error: Manifest request to /js/07681e28c4f19d102b51.hot-update.json timed out.

screen shot 2016-12-08 at 8 53 36 am

When i change the the file content

[HMR] bundle rebuilding bundle.js:55 [HMR] bundle rebuilt in 3700ms

Most helpful comment

Ok, I figured out what the problems were

  • There wasn't a non-production start task, I assume you were running the server some other way - but I added one anyway
  • The entry option in webpack config didn't include your actual application
  • The debug conditional for the plugins setting was set up in a way that didn't include any plugins in dev mode, I've hanged this to now use all of the same plugins except for uglify

After making those changes, HMR started working for me

Here's the diff of the changes I made

~~~diff
diff --git a/package.json b/package.json
index 43f1691..1faccd8 100644
--- a/package.json
+++ b/package.json
@@ -3,8 +3,9 @@
"version": "1.0.0",
"main": "src/server.js",
"scripts": {

  • "start": "NODE_ENV=production node_modules/.bin/babel-node --presets 'react,es2015' src/server.js",
  • "build": "NODE_ENV=production node_modules/.bin/webpack -p"
  • "dev": "babel-node --presets 'react,es2015' src/server.js",
  • "start": "NODE_ENV=production babel-node --presets 'react,es2015' src/server.js",
  • "build": "NODE_ENV=production webpack -p"
    },
    "author": "John Francis",
    "license": "MIT",
    diff --git a/webpack.config.js b/webpack.config.js
    index 9261462..1492186 100644
    --- a/webpack.config.js
    +++ b/webpack.config.js
    @@ -5,7 +5,10 @@ const path = require('path');

module.exports = {
devtool: debug ? 'inline-sourcemap' : null,
- entry: 'webpack-hot-middleware/client',
+ entry: [
+ 'webpack-hot-middleware/client',
+ './src/app-client'
+ ],
output: {
path: path.join(__dirname, 'src', 'static', 'js'),
publicPath: "/js/",
@@ -21,7 +24,7 @@ module.exports = {
}
}]
},
- plugins: debug ? [] : [
+ plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}),
@@ -29,12 +32,13 @@ module.exports = {
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.NoErrorsPlugin(),
+ ].concat(debug ? [] : [
new webpack.optimize.UglifyJsPlugin({
compress: { warnings: false },
mangle: true,
sourcemap: false,
beautify: false,
dead_code: true
- }),
- ]
+ })
+ ])
};
~~~

All 16 comments

I'm going to need more info than that to help.

Is the code on github? If not I'd need to see the webpack config & server setup.

You need to remove the hot section from webpack config, the inline option there is injecting a client for the webpack-dev-server, which you're not using if you use this middleware instead.

i have removed the hot and online from webpack devserver , now the page is not loading at all.
webpack.config.js

screen shot 2016-12-08 at 3 59 08 pm

Sorry, I should have said to remove the whole devServer section. Are you accessing this on port 3333 or 3001 ?

Are there some lines missing from server.js where you call server.listen() ?

I have removed the devserver object from webpackconfig.js
i am listening on 3001 here is my updated server.js

// start the server const port = process.env.PORT || 3001; const env = process.env.NODE_ENV || 'production'; server.listen(port, err => { if (err) { return console.error(err); } console.info(Server running on http://localhost:${port} [${env}]); });

Hrm, that all looks about right now. Can you try moving the middleware up the chain to before the express.static call?

If that doesn't work can you try making a small demo app that can be fully shared that reproduces the issue? I can't see why you should get a timeout from the hot-update request.

i moved serving static content after middleware.

I get this error

screen shot 2016-12-08 at 8 34 44 pm

i am starting the server like this

node_modules/.bin/babel-node --presets 'react,es2015' src/server.js

my project structure is like this

|-node_modules
|-src
     |- [server.js]
     |- components
     |- containers
     |-static
          |-js
               |-bundle.js
          |-index-static.html
     |- routes.js
|-package.json
|-webpack.config.js

server.js
package.json
webpack.config.js

Looks like that last screenshot upload failed. I'm not sure what else I can suggest unless I have a sample I can reproduce issues on locally.

@glenjamin i am really struggling with this. It eats my development time. And it is irritating to start server for even small change. It would be a great help.

Looking at the latest config, one thing that jumps out as odd is that the webpack config's entry field only contains the hot middleware client, when it should also contain your application entry point.

i.e What it would contain if you weren't using hot reloading.

This system works by adding some extra code into your usual bundle which connects to the middleware, and applies updates when the middleware tells it something has changed.

If you can make a copy of your code without the private bits and put it into a github repo, I'll see if I can see what's up.

will do that soon and send you a github repo. thanks for your help. seriously thanks man..

Here is the repo. i have remove all the components and kept only one component. Now there is no error in console. but webpack does not recognise the file change

https://github.com/john1jan/react-hot-reloading-with-ssr

Ok, I figured out what the problems were

  • There wasn't a non-production start task, I assume you were running the server some other way - but I added one anyway
  • The entry option in webpack config didn't include your actual application
  • The debug conditional for the plugins setting was set up in a way that didn't include any plugins in dev mode, I've hanged this to now use all of the same plugins except for uglify

After making those changes, HMR started working for me

Here's the diff of the changes I made

~~~diff
diff --git a/package.json b/package.json
index 43f1691..1faccd8 100644
--- a/package.json
+++ b/package.json
@@ -3,8 +3,9 @@
"version": "1.0.0",
"main": "src/server.js",
"scripts": {

  • "start": "NODE_ENV=production node_modules/.bin/babel-node --presets 'react,es2015' src/server.js",
  • "build": "NODE_ENV=production node_modules/.bin/webpack -p"
  • "dev": "babel-node --presets 'react,es2015' src/server.js",
  • "start": "NODE_ENV=production babel-node --presets 'react,es2015' src/server.js",
  • "build": "NODE_ENV=production webpack -p"
    },
    "author": "John Francis",
    "license": "MIT",
    diff --git a/webpack.config.js b/webpack.config.js
    index 9261462..1492186 100644
    --- a/webpack.config.js
    +++ b/webpack.config.js
    @@ -5,7 +5,10 @@ const path = require('path');

module.exports = {
devtool: debug ? 'inline-sourcemap' : null,
- entry: 'webpack-hot-middleware/client',
+ entry: [
+ 'webpack-hot-middleware/client',
+ './src/app-client'
+ ],
output: {
path: path.join(__dirname, 'src', 'static', 'js'),
publicPath: "/js/",
@@ -21,7 +24,7 @@ module.exports = {
}
}]
},
- plugins: debug ? [] : [
+ plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}),
@@ -29,12 +32,13 @@ module.exports = {
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.NoErrorsPlugin(),
+ ].concat(debug ? [] : [
new webpack.optimize.UglifyJsPlugin({
compress: { warnings: false },
mangle: true,
sourcemap: false,
beautify: false,
dead_code: true
- }),
- ]
+ })
+ ])
};
~~~

Great.. thanks @glenjamin . it works awesome. thanks for your massive help. I think problem is in the entry of the webpack.config.js

hi @glenjamin . i am also experiencing the same issue. can you please look into my repo and suggest how to fix it. Thanks.
https://github.com/snehansh/Patient-Check-In

Was this page helpful?
0 / 5 - 0 ratings

Related issues

DmitryVolkovTulaco picture DmitryVolkovTulaco  路  4Comments

sarincasm picture sarincasm  路  6Comments

drewwyatt picture drewwyatt  路  8Comments

moshie picture moshie  路  3Comments

shunxing picture shunxing  路  12Comments