BrowserSync doesn't work if using docker4drupal and docker-compose but works in DDEV

[ghost]

OS type
Linux/

Drupal version
9

Codebase
Built-in vanilla Drupal or mounted codebase

Describe the bug
A clear and concise description of what the bug is.

Output of docker info

Client:
 Context:    default
 Debug Mode: false
 Plugins:
  app: Docker App (Docker Inc., v0.9.1-beta3)
  buildx: Docker Buildx (Docker Inc., v0.8.2-docker)
  compose: Docker Compose (Docker Inc., v2.3.3)
  scan: Docker Scan (Docker Inc., v0.17.0)

Server:
 Containers: 11
  Running: 10
  Paused: 0
  Stopped: 1
 Images: 19
 Server Version: 20.10.17
 Storage Driver: overlay2
  Backing Filesystem: extfs
  Supports d_type: true
  Native Overlay Diff: true
  userxattr: false
 Logging Driver: json-file
 Cgroup Driver: systemd
 Cgroup Version: 2
 Plugins:
  Volume: local
  Network: bridge host ipvlan macvlan null overlay
  Log: awslogs fluentd gcplogs gelf journald json-file local logentries splunk syslog
 Swarm: inactive
 Runtimes: io.containerd.runc.v2 io.containerd.runtime.v1.linux runc
 Default Runtime: runc
 Init Binary: docker-init
 containerd version: 10c12954828e7c7c9b6e0ea9b0c02b01407d3ae1
 runc version: v1.1.2-0-ga916309
 init version: de40ad0
 Security Options:
  apparmor
  seccomp
   Profile: default
  cgroupns
 Kernel Version: 5.15.0-46-generic
 Operating System: Ubuntu 22.04.1 LTS
 OSType: linux
 Architecture: x86_64
 CPUs: 4
 Total Memory: 15.51GiB
 Name: ubuntu
 ID: LME5:BXKK:WZ2A:FTQ4:WLJP:MFP4:XT7G:QM7K:5UKE:L5RM:7JYJ:MKJA
 Docker Root Dir: /var/lib/docker
 Debug Mode: false
 Registry: https://index.docker.io/v1/
 Labels:
 Experimental: false
 Insecure Registries:
  127.0.0.0/8
 Live Restore Enabled: false

Contents of your docker-compose.yml

version: "3.7"

services:
  mysql:
    image: mysql:8.0.3
    volumes:
      - ./mysql:/var/lib/mysql
      - ./configs/mysql/dev-my.cnf:/etc/mysql/conf.d/custom.cnf:ro
    restart: 'no'
    environment:
      MYSQL_ROOT_PASSWORD: $DB_ROOT_PASSWORD
      MYSQL_DATABASE: $DB_NAME
      MYSQL_USER: $DB_USER
      MYSQL_PASSWORD: $DB_PASSWORD


  php:
    image: wodby/drupal-php:$PHP_TAG
    container_name: "${PROJECT_NAME}_php"
    environment:
      PHP_SENDMAIL_PATH: /usr/sbin/sendmail -t -i -S mailhog:1025

      PHP_XDEBUG: 1
      PHP_XDEBUG_MODE: debug
      PHP_IDE_CONFIG: serverName=my-ide
      PHP_XDEBUG_IDEKEY: "my-ide"
      PHP_XDEBUG_CLIENT_HOST: 172.17.0.1 # Linux
      PHP_MAX_INPUT_VARS: 9999
      PHP_UPLOAD_MAX_FILESIZE: 999M

    volumes:
    - ./drupal/:/var/www/html:cached # SAME AS NGINX


  crond:
    image: wodby/drupal-php:$PHP_TAG
    container_name: "${PROJECT_NAME}_crond"
    environment:
      CRONTAB: "0 * * * * drush -r /var/www/html/web cron"
    command: sudo -E LD_PRELOAD=/usr/lib/preloadable_libiconv.so crond -f -d 0
    volumes:
    - ./drupal/:/var/www/html:cached # SAME AS NGINX


  nginx:
    image: wodby/nginx:$NGINX_TAG
    container_name: "${PROJECT_NAME}_nginx"
    networks:
      - shared
      - default
    depends_on:
    - php
    environment:
      NGINX_STATIC_OPEN_FILE_CACHE: "off"
      NGINX_ERROR_LOG_LEVEL: debug
      NGINX_BACKEND_HOST: php
      NGINX_SERVER_ROOT: /var/www/html/web # IMPORTANT, NOT SAME
      NGINX_VHOST_PRESET: $NGINX_VHOST_PRESET
    #      NGINX_DRUPAL_FILE_PROXY_URL: http://example.com
    volumes:
    - ./drupal/:/var/www/html:cached # SAME AS PHP

    labels:
    - "traefik.http.routers.${PROJECT_NAME}_nginx.rule=Host(`${PROJECT_BASE_URL}`, `ceda-176-241-140-177.eu.ngrok.io`)"

  mailhog:
    image: mailhog/mailhog
    container_name: "${PROJECT_NAME}_mailhog"
    labels:
    - "traefik.http.services.${PROJECT_NAME}_mailhog.loadbalancer.server.port=8025"
    - "traefik.http.routers.${PROJECT_NAME}_mailhog.rule=Host(`mailhog.${PROJECT_BASE_URL}`)"
    networks:
      - shared
      - default


  adminer:
    container_name: "${PROJECT_NAME}_adminer"
    image: wodby/adminer:$ADMINER_TAG
    networks:
      - shared
      - default
    environment:
      # For PostgreSQL:
      #      ADMINER_DEFAULT_DB_DRIVER: pgsql
      ADMINER_DEFAULT_DB_HOST: $DB_HOST
      ADMINER_DEFAULT_DB_NAME: $DB_NAME
    labels:
    - "traefik.http.routers.${PROJECT_NAME}_adminer.rule=Host(`adminer.${PROJECT_BASE_URL}`)"

  pma:
    image: phpmyadmin/phpmyadmin
    container_name: "${PROJECT_NAME}_pma"
    networks:
      - shared
      - default
    environment:
      PMA_HOST: $DB_HOST
      PMA_USER: $DB_USER
      PMA_PASSWORD: $DB_PASSWORD
      MYSQL_ROOT_PASSWORD: 'root'
      UPLOAD_LIMIT: 1G
      PHP_MEMORY_LIMIT: 4G
    labels:
    - "traefik.http.routers.${PROJECT_NAME}_pma.rule=Host(`pma.${PROJECT_BASE_URL}`)"
    volumes:
    - ./pma:/var/www/html
    - ./mysql:/var/lib/mysql
    - ./configs/mysql/dev-my.cnf:/etc/mysql/conf.d/custom.cnf:ro

  node:
    image: wodby/node:$NODE_TAG
    container_name: "${PROJECT_NAME}_node"
    working_dir: /var/www/html/web/themes/custom/booksm
    labels:
      - 'traefik.backend=${PROJECT_NAME}_node'
      - 'traefik.port=3000'
      - 'traefik.frontend.rule=Host:${PROJECT_BASE_URL}'
    expose:
      - "3000"
    volumes:
      - ./drupal/:/var/www/html
    command: sh -c 'yarn run watch'

networks:
  shared:
    external:
      name: shared

Contents of your .env

PROJECT_NAME=smart
PROJECT_BASE_URL=smart.localhost
DB_NAME=drupal
DB_USER=drupal
DB_PASSWORD=drupal
DB_ROOT_PASSWORD=password
DB_HOST=mysql
DB_PORT=3306
DB_DRIVER=mysql
MARIADB_TAG=10.5-3.13.2
DRUPAL_TAG=9-4.33.3
PHP_TAG=7.4-dev-4.27.1
NGINX_TAG=1.20-5.15.0
NGINX_VHOST_PRESET=drupal9
SOLR_CONFIG_SET="search_api_solr_4.1.6"
SOLR_TAG=8-4.11.1
ELASTICSEARCH_TAG=7-5.11.4
KIBANA_TAG=7-5.11.4
REDIS_TAG=6-3.9.2
NODE_TAG=14-dev-0.60.0
VARNISH_TAG=6.0-4.7.2
POSTGRES_TAG=13-1.23.0
ADMINER_TAG=4-3.15.1
APACHE_TAG=2.4-4.6.0
ATHENAPDF_TAG=2.16.0
DRUPAL_NODE_TAG=1.0-2.0.0
MEMCACHED_TAG=1-2.9.1
OPENSMTPD_TAG=6.0-1.10.0
RSYSLOG_TAG=latest
SELENIUM_CHROME_TAG=3.141
WEBGRIND_TAG=1-1.21.1
XHPROF_TAG=3.0.3

When I open an IP on 3000 everything works as expected but when Mix recompiles SCSS - my browser serves cached CSS not the new one. I tried D4D and DDEV, it doens't work in d4d and docker composer but does work in DDEV

docker-compose version 1.29.2, build unknown

[csandanov]

Maybe this BrowserSync/browser-sync#1765 (try node 16 or 18)? Anyway I don't think this is a docker4drupal or wodby/node issue