0

I have a piece of code that can run on docker or locally. The hot reload is only working on docker for some reason.

The code is obviously the same and the content is hosted and served properly with webpack dev server. There is no port errors for the hot reload and both solutions are using the same host port.

What could it be?

Here are the differences:

HOST: ubuntu with node v14.1.0

CONTAINER: node:14.0.0-alpine3.10

The command used to run is:

webpack-dev-server --config webpack/webpack.dev.js --hot

And the webpack relevant part is 

module.exports = {
  ...common,
  mode: "development",
  devServer: {
    historyApiFallback: true,
    host: "0.0.0.0",
    publicPath: "/",
    allowedHosts: ["0.0.0.0", "localhost", "*"],
    port: process.env.port || 3001
  },
  watch: true
};

And the package versions are:

  • "react-hot-loader": "^4.12.20",
  • "webpack": "^4.42.1",
  • "webpack-cli": "^3.3.11",
  • "webpack-dev-server": "^3.10.3"

I can't think why it would only work on the docker and not on the host if anything I would expect the reverse.

FabioCosta
  • 3,069
  • 6
  • 28
  • 50

2 Answers2

1

An error stack will make it easy for us to help you out. Maybe your 3001 port is being used by some other service.

Not relevant though, here https://youtu.be/kIe7E02j2jY you will find details about configuring webpack 4 for React from scratch. Helpful resource if you are beginner.

paalo.on
  • 49
  • 1
  • 5
0

The reason why hot reload is not working, is because of the way webpack-dev-server looks for file changes in a directory, it uses fsevent and inotify. These are modules webpack uses to watch the files in a specified directory. You can check out this answer for more info, and if you feel like its right, do accept and upvote it.

Shujath
  • 846
  • 1
  • 8
  • 22