Hot Reload HMR Webpack not working on Docker Container WSL2 - node.js

Question

To preface, I am new to Docker.
I created my own docker container for my local development environment for a project I am working on using Intertia.JS + Laravel Jetstream in Ubuntu on WSL 2.
I am having trouble getting the HMR Hot Reloading for webpack to work, when I run npm run hot - it also does not start a proxy server...
When I run docker-compose exec php npm run hot I get the following message:
> # hot /var/www/html
> cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-
dev-server.js --inline --hot --disable-host-check --
config=node_modules/laravel-mix/setup/webpack.config.js
ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from http://localhost:8080/
ℹ ｢wds｣: Content not from webpack is served from /var/www/html/public
ℹ ｢wds｣: 404s will fallback to /index.html
DONE Compiled successfully in 27200ms
When I try to make a change to a vue template for example, the changes do not get reflected on the website running on Chrome (localhost:8080) - not even if I hard refresh the page. The changes are NEVER updated even though the compilation is successful every time.
I tried to play with my webpack config following other suggestions online, but to no avail.
For example adding hmrOptions and devServer options.
Here is my webpack.mix.js for reference:
const cssImport = require('postcss-import')
const cssNesting = require('postcss-nesting')
const mix = require('laravel-mix')
const path = require('path')
const purgecss = require('#fullhuman/postcss-purgecss')
const tailwindcss = require('tailwindcss')
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css/app.css')
.options({
hmrOptions: {
host: 'localhost',
port: '8080',
},
postCss: [
cssImport(),
cssNesting(),
tailwindcss('tailwind.config.js'),
...mix.inProduction() ? [
purgecss({
content: ['./resources/views/**/*.blade.php', './resources/js/**/*.vue'],
defaultExtractor: content => content.match(/[\w-/:.]+(?<!:)/g) || [],
whitelistPatternsChildren: [/nprogress/],
}),
] : [],
],
})
.webpackConfig({
mode: 'development',
output: { chunkFilename: 'js/[name].js?id=[chunkhash]' },
resolve: {
alias: {
vue$: 'vue/dist/vue.runtime.esm.js',
'#': path.resolve('resources/js'),
},
},
devServer: { // I have tried with & without this
proxy: {
host: '0.0.0.0',
port: 8080,
},
watchOptions:{
aggregateTimeout:200,
poll:5000,
},
},
})
if (mix.inProduction()) {
mix.version()
mix.sourceMaps()
}
Here is my docker-compose.yml
version: "3.7"
services:
php:
build:
args:
user: admin
uid: 1000
context: ./
dockerfile: Dockerfile
image: app
container_name: app-php
restart: unless-stopped
working_dir: /var/www/html
volumes:
- ./:/var/www/html
networks:
- app
mysql:
image: mysql:5.7
container_name: app-mysql
restart: unless-stopped
environment:
MYSQL_DATABASE: ${DB_DATABASE}
MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
MYSQL_PASSWORD: ${DB_PASSWORD}
MYSQL_USER: ${DB_USERNAME}
SERVICE_TAGS: dev
SERVICE_NAME: mysql
volumes:
- ./docker-compose/mysql:/docker-entrypoint-initdb.d
- nodemodules:/node_modules
networks:
- app
nginx:
image: nginx:alpine
container_name: app-nginx
restart: unless-stopped
ports:
- 8080:80
volumes:
- ./:/var/www/html
- ./docker-compose/nginx:/etc/nginx/conf.d/
networks:
- app
links:
- php
depends_on:
- php
networks:
app:
driver: bridge
volumes:
nodemodules: {}
Here is my Dockerfile
FROM php:7.4-fpm
# Arguments defined in docker-compose.yml
ARG user
ARG uid
# Install system dependencies
RUN curl -sL https://deb.nodesource.com/setup_13.x | bash
RUN apt-get update && \
apt-get install -y -q --no-install-recommends \
nano apt-utils curl zip unzip default-mysql-client nodejs build-essential git \
libcurl4-gnutls-dev libmcrypt-dev libmagickwand-dev \
libwebp-dev libjpeg-dev libpng-dev libxpm-dev \
libonig-dev \
libxml2-dev \
libfreetype6-dev libaio-dev zlib1g-dev libzip-dev && \
echo 'umask 002' >> /root/.bashrc && \
apt-get clean
# Clear cache
RUN apt-get clean && rm -rf /var/lib/apt/lists/*
# Install PHP extensions
RUN docker-php-ext-install pdo_mysql mbstring exif pcntl bcmath gd
# Get latest Composer
COPY --from=composer:latest /usr/bin/composer /usr/bin/composer
# Create system user to run Composer and Artisan Commands
RUN useradd -G www-data,root -u $uid -d /home/$user $user
RUN mkdir -p /home/$user/.composer && \
chown -R $user:$user /home/$user
# Set working directory
WORKDIR /var/www/html
USER $user
EXPOSE 8080
Let me know if you need more information. Thank you!

Answer 1

add following config in your docker config file
ENV CHOKIDAR_USEPOLLING=true
remove node_modules and re-install again