Nodemon and webpack-dev-server hot reload not working under WSL 2 after Windows 10 resinstall

Question

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.

Try re-install nodemon in global state. Npm install -g nodemon — phemieny7
– phemieny7, Commented Jul 8, 2020 at 6:30
@Phemieny007 Just tried it, but didn't work. Thanks for the suggestion though. — FreakyOne
– FreakyOne, Commented Jul 8, 2020 at 8:02

FreakyOne · Accepted Answer · 2023-12-30 16:52:32Z

17

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.

edited Dec 30, 2023 at 16:52

answered Jul 8, 2020 at 8:34

FreakyOne

4311 gold badge4 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mitch Over a year ago

Thanks much for following up. This is helpful. I don't want to bury my files in a hard-to-access virtual machine. Once again poor OS-craft is patched with a "recommendation". Hopefully we won't lose this capability altogether.

August Over a year ago

For my rails app which I had setup in the WSL2 (Ubuntu 18.04 distro), the webpack-dev-server would not be able to watch the modifications to the files which are not inside Ubunutu. So I moved it in the home directory of the Ubuntu, and now it was able to respond to the file changes and compile them. I was using Sublime text on Windows for development, so to access that project, I used the path \\wsl$\Ubuntu-18.04\home\<user>\projects to open in Sublime text.

EugZol Over a year ago

> the project needs to be inside the linux file system. < Thanks!

HNV · Accepted Answer · 2020-09-15 22:55:19Z

13

Try this:

module.exports = {
  //...
  watchOptions: {
    poll: 1000 // Check for changes every second
  }
};

Watch and WatchOptions

Or move your files into WSL filesystem:

\\wsl$\<distroname>\home\<username>

edited Sep 15, 2020 at 22:55

answered Sep 15, 2020 at 5:44

HNV

1311 silver badge6 bronze badges

1 Comment

user2533660 Over a year ago

+1 for moving the files into the WSL2 filesystem. What's odd is that I had npm auto-reloading within WSL2 just a few days ago, DESPITE the files existing outside of the WSL2 filesystem. That being said, MS recommends against working across filesystems learn.microsoft.com/en-us/windows/wsl/…

Gabor · Accepted Answer · 2020-08-04 05:45:33Z

3

Try this, it worked for me:

webpack -w --watch-poll

answered Aug 4, 2020 at 5:45

Gabor

4671 gold badge4 silver badges7 bronze badges

Collectives™ on Stack Overflow

Nodemon and webpack-dev-server hot reload not working under WSL 2 after Windows 10 resinstall

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related