{"id":3183,"date":"2016-02-23T03:42:49","date_gmt":"2016-02-23T03:42:49","guid":{"rendered":"http:\/\/www.garysieling.com\/blog\/?p=3183"},"modified":"2016-02-23T03:42:49","modified_gmt":"2016-02-23T03:42:49","slug":"3183-2","status":"publish","type":"post","link":"https:\/\/www.garysieling.com\/blog\/3183-2\/","title":{"rendered":"Fixing “The following modules couldn’t be hot updated”, “Full reload needed”"},"content":{"rendered":"

I wrote a small React application to test hot loading components using webpack-hotmiddleware<\/a>, and received the following error:<\/p>\n

\n[HMR] The following modules couldn't be hot updated: \n(Full reload needed)\n\nThis is usually because the modules which have changed \n(and their parents) do not know how to hot reload themselves. \nSee http:\/\/webpack.github.io\/docs\/hot-module-replacement-with-webpack.html \nfor more details.\n\nprocess-update.js:69 [HMR]  - .\/src\/CommentBox.jsx\n<\/pre>\n
There are details here<\/a> but it took me a bit to figure out the answer – the solution was to add “module.hot.accept();” to the top level file that initialized the application (note that this file also doesn’t export anything).<\/p>\n
See this:
\nclient.js:<\/b><\/p>\n
\nvar React = require('react');\nvar ReactDOM = require('react-dom');\nvar CommentBox = require('.\/CommentBox.jsx');\n\nReactDOM.render(\n  React.createElement(CommentBox, null), \n  document.getElementById('container')\n);\n\nmodule.hot.accept();\n<\/pre>\n
And CommentBox.jsx:<\/b><\/p>\n
\nvar React = require('react');\n    \nvar CommentBox = React.createClass({\n  render: function() {\n    return (\n      
\n        
test<\/div>\n      <\/div>\n    );\n  }\n});\n\nmodule.exports = CommentBox;\n<\/pre>\n
And my webpack config:<\/p>\n
\nvar path = require('path');\nvar webpack = require('webpack');\n\nmodule.exports = {\n  entry: [\n    'webpack-hot-middleware\/client?path=\/__webpack_hmr&timeout=20000',\n    '.\/src\/client'\n  ],\n  output: {\n    path: __dirname,\n    publicPath: '\/',\n    filename: 'bundle.js'\n  },\n  devtool: '#source-map',\n  plugins: [\n    new webpack.optimize.OccurenceOrderPlugin(),\n    new webpack.HotModuleReplacementPlugin(),\n    new webpack.NoErrorsPlugin()\n  ],\n  module: {\n    loaders: [{\n      test: \/\\.jsx$\/,\n      loaders: ['babel'],\n      include: path.join(__dirname, 'src')\n    }]\n  }\n};\n<\/pre>\n
My index.js file for express has this:<\/p>\n
\n'use strict';\n\nvar express = require(\"express\");\nvar http = require(\"http\");\nvar app = express();\nvar router = express.Router();\nvar path = __dirname + '\/views\/';\n\napp.use(express.static('public'));\n\n(function() {\n  var webpack = require('webpack');\n  var webpackConfig = \n    require(\n      process.env.WEBPACK_CONFIG ? \n      process.env.WEBPACK_CONFIG : '.\/webpack.config'\n    );\n  var compiler = webpack(webpackConfig);\n\n  app.use(require(\"webpack-dev-middleware\")(compiler, {\n    noInfo: true, publicPath: webpackConfig.output.publicPath\n  }));\n\n  app.use(require(\"webpack-hot-middleware\")(compiler, {\n    log: console.log, path: '\/__webpack_hmr', heartbeat: 10 * 1000\n  }));\n})();\n\n\nrouter.use(function (req,res,next) {\n  console.log(\"\/\" + req.method);\n  next();\n});\n\nrouter.get(\"\/\",function(req,res){\n  res.sendFile(path + \"index.html\");\n});\n\nrouter.get(\"\/dropzone.js\",function(req,res){\n  res.sendFile(path + \"dropzone.js\");\n});\n\napp.use(\"\/\",router);\n\napp.use(\"*\",function(req,res){\n  res.sendFile(path + \"404.html\");\n});\n\napp.use(require('morgan')('short'));\n\nif (require.main === module) {\n  var server = http.createServer(app);\n  server.listen(process.env.PORT || 1616, function() {\n    console.log(\"Listening on %j\", server.address());\n  });\n}\n\napp.listen(3000,function(){\n  console.log(\"Live at Port 3000\");\n});\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
I wrote a small React application to test hot loading components using webpack-hotmiddleware, and received the following error: [HMR] The following modules couldn’t be hot updated: (Full reload needed) This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See http:\/\/webpack.github.io\/docs\/hot-module-replacement-with-webpack.html for more details. process-update.js:69 … <\/p>\n
Continue reading “Fixing “The following modules couldn’t be hot updated”, “Full reload needed””<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[9],"tags":[389,455,592],"aioseo_notices":[],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts\/3183"}],"collection":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/comments?post=3183"}],"version-history":[{"count":0,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts\/3183\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/media?parent=3183"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/categories?post=3183"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/tags?post=3183"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}