BrowserSync with docker-compose and laravel-mix

Question

I've read several guides and questions here on SO but I cannot get this working.

Here is my docker-conpose.yml:

version: '3'

networks:
  laravel:
    driver: bridge

services:
  nginx:
    image: nginx:stable-alpine
    restart: unless-stopped
    ports:
      - "${WEB_PORT}:80"
    volumes:
      - "${PROJECT_DIR}:/var/www/html"
      - "${NGINX_CONFIG}:/etc/nginx/conf.d/default.conf"
      - ./docker/nginx/nginx.conf:/etc/nginx/nginx.conf
    depends_on:
      - php
      - mysql
    networks:
      - laravel

  mysql:
    image: mysql:5.7.29
    restart: unless-stopped
    user: "${HOST_UID}:${HOST_GID}"
    tty: true
    ports:
      - "${SQL_PORT}:3306"
    environment:
      MYSQL_DATABASE: ${MYSQL_DATABASE}
      MYSQL_USER: ${MYSQL_USER}
      MYSQL_PASSWORD: ${MYSQL_PASSWORD}
      MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD}
      SERVICE_TAGS: dev
      SERVICE_NAME: mysql
    volumes:
      - ./docker/mysql:/var/lib/mysql
    networks:
      - laravel

  php:
    build:
      context: ./docker
      dockerfile: Dockerfile-php
    user: "${HOST_UID}:${HOST_GID}"
    container_name: "storesearch_app"
    volumes:
      - "${PROJECT_DIR}:/var/www/html"
      - ./docker/php/php.ini:/usr/local/etc/php/php.ini
      - ./docker/php/tinker_cache:/.config/psysh
      #- "${COMPOSER_CACHE_DIR}:/.composer/cache"
      #- "${COMPOSER_CONFIG}:/.composer/config"
    working_dir: /var/www/html
    networks:
      - laravel

  npm:
    image: node:13.7
    user: "${HOST_UID}:${HOST_GID}"
    ports:
        - "3000:3000"
        - "3001:3001"
    volumes:
      - "${PROJECT_DIR}:/var/www/html"
    working_dir: /var/www/html
    entrypoint: ['npm']

and webpack.mix.js:

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.browserSync({
    host: 'localhost',
    proxy: 'storesearch_app',
    open: false
})

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('tailwindcss')
    ]);

When I run docker-compse npm --rm npm run watch I get

✔ Compiled Successfully in 964ms
┌────────────────────────────────────────────────────────────────────────────────────────────────────┬──────────┐
│                                                                                               File │ Size     │
├────────────────────────────────────────────────────────────────────────────────────────────────────┼──────────┤
│                                                                                         /js/app.js │ 606 KiB  │
│                                                                                        css/app.css │ 16.4 KiB │
└────────────────────────────────────────────────────────────────────────────────────────────────────┴──────────┘
webpack compiled successfully
[Browsersync] Proxying: http://storesearch_app
[Browsersync] Access URLs:
 -----------------------------------
       Local: http://localhost:3000
    External: http://172.30.0.2:3000
 -----------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 -----------------------------------
[Browsersync] Watching files...

I go to this URL but it just loads and displays no content. It never stops loading. I can go to the UI page and it loads the main layout but also displays no actual content and stays in a loading state.

Any ideas please?