A few days ago I re-installed Windows 10. I am developing full stack web app with express as backend and React.js as frontend. I am using nodemon to realod the server and webpack-dev-server for the frontend. Worth mentioning is that I am using WSL2. I noticed that nodemon has no reaction upon saving a file. I had to manually type rs
to reload. At first thought it is a problem with nodemon. Looked for similar question here, but all I found was --watch
, which did not help. Not that I've tried webpack and the issue persists I am clueless. Here is some useful info:
webpack command:
webpack-dev-server --host 0.0.0.0 --config ./webpack.config.js --mode development
.
webpack.config.js:
module.exports = {
entry: ["babel-polyfill", "./app/index.jsx"],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ["babel-loader"],
},
{ test: /\.css$/, use: ["style-loader", "css-loader"] },
{
test: /\.(jpg|png|svg)$/,
loader: "file-loader",
options: {
name: "[path][name].[hash].[ext]",
},
},
],
},
resolve: {
alias: {
components: __dirname + "/app/components",
reducers: __dirname + "/app/reducers",
constants: __dirname + "/app/constants",
actions: __dirname + "/app/actions",
store: __dirname + "/app/store",
styles: __dirname + "/app/styles",
assets: __dirname + "/app/assets/",
api: __dirname + "/app/api/",
},
enforceExtension: false,
extensions: [".js", ".jsx"],
},
output: {
path: __dirname + "/public",
publicPath: "/",
filename: "index.js",
},
devServer: {
contentBase: "./public",
port: 8080,
},
};
Also both of these are working fine on Linux laptop and were fine before the re-installation.
I figured this out on my own. Just posting it here in case somebody encounters the same issue. The difference between my system now and before the re-installation is that I upgraded to WSL2. For some reason nodemon and webpack-dev-server hot reload does not work in WSL2. Downgrading to WSL 1 resolved the issue.
EDIT: In order for this to work in WSL 2, the project needs to be inside the linux file system.