Webpack-dev-server: Separate public path for HMR

[josh18]

I can't seem to get the hot reload function to work correctly for me. Whenever I do an update I get the following error messages:

Get http://localhost:9090/cd0492f7657672ef15e4.hot-update.json 404 (Not Found)
[HMR] Cannot apply update. Need to do a full reload!
[HMR] (Probably because of restarting the webpack-dev-server)

I am pretty sure this is caused by publicPath: '/js/' in my gulpfile as when I go to http://localhost:9090/cd0492f7657672ef15e4.hot-update.json I get a 404 but when I go to http://localhost:9090/js/cd0492f7657672ef15e4.hot-update.json I can find the file.

However publicPath: '/js/' is needed for bundled js file so I have no idea how to fix it, any ideas?

webpack.config.js

var webpack = require('webpack');
module.exports = {
    cache: true,
    entry: ['webpack/hot/dev-server', './resources/assets/app.js'],
    output: {
        path: __dirname + '/public/js',
        publicPath: '/js/',
        filename: "scripts.js"
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel'
            }
        ]
    }
};

gulpfile.js

...
var webpackConfig = require('./webpack.config.js');
...
gulp.task('webpack-dev-server', function(callback) {
    // modify some webpack config options
    var myConfig = Object.create(webpackConfig);
    myConfig.devtool = 'eval';
    myConfig.debug = true;
    myConfig.plugins = [
        new webpack.HotModuleReplacementPlugin()
    ];

    // Start a webpack-dev-server
    new webpackDevServer(webpack(myConfig), {
        hot: true,
        stats: {
            colors: true
        },
        publicPath: '/js/',
        proxy: {
            '*': 'http://localhost:8080'
        }
    }).listen(9090, 'localhost', function(err) {
        if (err) throw new gulpUtil.PluginError('webpack-dev-server', err);
    });
});

[mathieumg]

+1

[josh18]

Just in case anyone is interested this is what I ended up doing:

1. Removed publicPath: '/js/' from my gulpfile
2. Added conditional html to my backend so that it only changes the script path if it is loaded from the port that the webpack dev server is running from. Something like

if (environment === development && port === 9090) {
    <script src="/scripts.js"></script>
    <script src="/webpack-dev-server.js"></script>
else {
    <script src="js/scripts.js" async></script>
}

[pklicnik]

+1 would love to see this fixed. I had to resort to some ugly workarounds to get HMR working

[tj]

I get this error at random as well, not really sure what's going on, seems fine for a while (I'm not restarting the dev server)

[AllenZeng]

@tj @pklicnik in this issues https://github.com/gaearon/react-hot-loader/issues/194 @seburgi suggest adding " publicPath: '/' " to output section, so it looks like this:

output: {
    path: yours,
    filename: 'bundle.js',
    publicPath: '/',
},

That help me fixed the problem.

[josh18]

@AllenZeng If I remember correctly this doesn't help because then it can't find bundle.js which is inside the js directory which is why publicPath: '/js/' is necessary.

[raffomania]

Additionally, it would be nice if the HMR used the host and port specified via the --public option. With multiple docker containers, HMR doesn't work at the moment.

[SpaceK33z]

@raffomania, you should set output.publicPath in your webpack config to use a full URL.

[SpaceK33z]

Closing this since there are multiple solutions provided here that fix the issue. Feel free to comment if you still run into problems.

[max-l]

I tried all the solutions above, and the only one that worked is the one suggested by @josh18

if (environment === development && port === 9090) {
    <script src="/scripts.js"></script>
    <script src="/webpack-dev-server.js"></script>
else {
    <script src="js/scripts.js" async></script>
}

it would be nice to not have to do this...

the problem is exactly as described by @josh18

[jcrben]

Someone at https://github.com/webpack-contrib/grunt-webpack/issues/66 pointed to __webpack_public_path__ and I found that by setting that, the fetch of the *-hot-update.json was sent to the proper place... haven't found the official documentation for it tho.

[mstaicu]

I've had the same issue and I managed to solve it by adding the output.publicPath property with the '/' value. From reading this thread, people were saying that it wouldn't work for nested bundle.js files, but for me it works. My bundled Javascript file is located under */public/js/bundle.js. I also believe the order of the required files in the entry array is important.

Served folder structure looks like this:

• /public/
  
  
  
  • /js/
  
  
  • /bundle.js
  
  
  • /css/
  
  

Dependencies:

• [email protected]
• [email protected]
• [email protected]

Webpack config:

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

const join = require('path').join;

const context = join(__dirname, 'src');

module.exports = {
  context,
  entry: [
    'react-hot-loader/patch',
    './index.js',
  ],
  output: {
    path: join(__dirname, '/public'),
    filename: 'js/bundle.js',
    publicPath: '/public/',
  },
  devServer: {
    hot: true,
    publicPath: '/public/'
  },
  resolve: {
    extensions: ['.js'],
  },
  stats: {
    colors: true,
    reasons: true,
    chunks: true,
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
  ],
};

.babelrc

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"],
      },
      "loose": true,
      "modules": false,
    }],
    "react"
  ],
  "plugins": [
    "react-hot-loader/babel",
  ],
}

index.js

import React from 'react';
import { render } from 'react-dom';

import App from './components/App';

function renderComponent() {
  render(<App />, document.getElementById('app'));
}

renderComponent();

if (module.hot) {
  module.hot.accept('./components/App', function() {
    renderComponent();
  });
}

[AndreKR]

@SpaceK33z Would you mind reopening this issue?

My application already uses __webpack_public_path__ to find assets in non-dev-server mode. In dev-server mode it interferes with finding the *.hot-update.js files, so I have to maintain two completely separate path configurations for normal builds and for dev-server builds.

If we could have a separate option like

devServer: {
  hotReloadPath: '' // or '../' depending on whether it is relative to __webpack_public_path__
}

or

devServer: {
  hotReloadPath: 'http://localhost:8080/'
}

it would simplify path configurations a lot.

[simkessy]

Any updates on this?

@AndreKR could you explain your config? I'm running my app on nginx port 8080 but the *hot-update.json files are looking for assets on port 10005 which is the port set for devServer. So I'm just getting 404 errors and not sure how to fix this.