Webpacker not compiling live

Question

I have my Rails apps running and have Webpacker installed. I have the webpack-dev-server running as a Docker container but it doesn;t seem to be responding to changes in my files and recompiling.

Can anyone check my config to see if they can spot anything wrong?

docker-compose.yml:

version: '3.7'

services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - 3000:3000
      - 35729:35729
      - 5000:5000
    env_file:
      - '.env'
    volumes:
      - .:/app
      - type: tmpfs
        target: /app/tmp/pids/
    depends_on:
      - database
      - elasticsearch
      - webpacker

  database:
    image: postgres:9.6-alpine
    env_file:
      - '.env'
    volumes:
      - pg-data:/var/lib/postgresql/data

  webpacker:
    build: .
    command: ./bin/webpack-dev-server
    env_file:
      - '.env'
    volumes:
      - .:/app
    ports:
      - 3035:3035

  adminer:
    image: adminer
    restart: always
    ports:
      - 8080:8080

  elasticsearch:
    image: docker.elastic.co/elasticsearch/elasticsearch-oss:6.4.1
    env_file:
      - '.env'
    volumes:
      - es-data:/usr/share/elasticsearch/data
    ports:
      - 9200:9200

volumes:
  pg-data:
  es-data:

config/webpacker.yml:

# Note: You must restart bin/webpack-dev-server for changes to take effect

default: &default
  source_path: app/webpacker
  source_entry_path: packs
  public_output_path: public/packs
  cache_path: tmp/cache/webpacker

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: []

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  extensions:
    - .js
    - .sass
    - .scss
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: webpacker
    port: 3035
    public: webpacker:3035
    hmr: false
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: /node_modules/


test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Cache manifest.json for performance
  cache_manifest: true

config/webpack/loaders/sass.js:

{
  loader: 'postcss-loader',
  options: {
    sourceMap: true,
    plugins: (loader) => [
      require('postcss-cssnext')({
        features: {
          customProperties: {
            warnings: false
          }
        }
      })
    ]
  }
}

My files are in this structure:

I hope you are able to help me as this is stopping my development of this app.

Thanks

Vasfed · Accepted Answer · 2019-03-11T10:26:17.477

11

For code reloading by default webpack dev server relies on fsevents, which are not delivered inside docker.

For running inside docker you can switch to polling changes, in webpacker.yml:

dev_server:
  ...
  watch_options:
    poll: 1000
    aggregate_timeout: 100

Also try installing latest version of docker, there're reports that fsevents are working in it.

edited Mar 11 '19 at 10:26

answered Mar 11 '19 at 10:19

Vasfed

18,013
10
47
53

This seems to work nicely. It's a bit slow but i'm very glad it works. Thanks. Any idea why these options are not set by default? and how would i know i needed them? – rctneil Mar 11 '19 at 19:25
@rctneil these are not default because evented watch is more efficient than polling(dev server checks if there’re any changes every 1000ms instead of being notified by OS) that is enabled by them, this should be used only when the latter is not working – Vasfed Mar 11 '19 at 19:45
Ok, so how do I get evented working rather than the polling? – rctneil Mar 11 '19 at 19:47
Evented does not work because of Docker (that’s why suggestion to update it, but it may happen that this will not help and you’ll have to stick with polling) also you can try lowering polling interval, but keep an eye on cpu load, polling with small delay yields higher system load – Vasfed Mar 11 '19 at 19:51

Webpacker not compiling live

1 Answers1