ActionController::RoutingError (No route matches [GET] "/packs/js/application...js")

Question

I have setup rails 6 with docker and my webpacker seems to be compiling assets fine, but when I visit my page, it is giving 404

ActionController::RoutingError (No route matches [GET] "/packs/js/application-6527e9c4b100bc10bc71.js")

app         | The Gemfile's dependencies are satisfied
webpack     | ℹ ｢wds｣: Project is running at http://localhost:3035/
webpack     | ℹ ｢wds｣: webpack output is served from /packs/
webpack     | ℹ ｢wds｣: Content not from webpack is served from /app/public/packs
webpack     | ℹ ｢wds｣: 404s will fallback to /index.html
app         | => Booting Puma
app         | => Rails 6.1.4 application starting in development
app         | => Run `bin/rails server --help` for more startup options
app         | Puma starting in single mode...
app         | * Puma version: 5.3.2 (ruby 3.0.1-p64) ("Sweetnighter")
app         | *  Min threads: 5
app         | *  Max threads: 5
app         | *  Environment: development
app         | *          PID: 10
app         | * Listening on http://0.0.0.0:3000
app         | Use Ctrl-C to stop
webpack     | ℹ ｢wdm｣: Hash: 81036c4ee13c6e27e31a
webpack     | Version: webpack 4.46.0
webpack     | Time: 931ms
webpack     | Built at: 06/26/2021 4:38:56 PM
webpack     |                                           Asset       Size            Chunks                         Chunk Names
webpack     |          js/application-6527e9c4b100bc10bc71.js   1.76 MiB       application  [emitted] [immutable]  application
webpack     |      js/application-6527e9c4b100bc10bc71.js.map   2.01 MiB       application  [emitted] [dev]        application
webpack     |     js/server_rendering-13527221e10c2e65c45f.js   1.64 MiB  server_rendering  [emitted] [immutable]  server_rendering
webpack     | js/server_rendering-13527221e10c2e65c45f.js.map   1.88 MiB  server_rendering  [emitted] [dev]        server_rendering
webpack     |                                   manifest.json  738 bytes                    [emitted]
webpack     | ℹ ｢wdm｣: Compiled successfully.
app         | Started GET "/" for 172.22.0.1 at 2021-06-26 16:39:02 +0000
app         |    (0.7ms)  SELECT "schema_migrations"."version" FROM "schema_migrations" ORDER BY "schema_migrations"."version" ASC
app         | Processing by HomeController#index as HTML
app         |   Rendering layout layouts/application.html.erb
app         |   Rendering home/index.html.erb within layouts/application
app         |   Post Load (0.8ms)  SELECT "posts".* FROM "posts"
app         |   ↳ app/views/home/index.html.erb:1
app         |   Rendered home/index.html.erb within layouts/application (Duration: 13.2ms | Allocations: 12811)
app         | [Webpacker] Everything's up-to-date. Nothing to do
app         |   Rendered layout layouts/application.html.erb (Duration: 17.8ms | Allocations: 17655)
app         | Completed 200 OK in 24ms (Views: 15.3ms | ActiveRecord: 3.7ms | Allocations: 21885)
app         |
app         |
app         | Started GET "/packs/js/application-6527e9c4b100bc10bc71.js" for 172.22.0.1 at 2021-06-26 16:39:02 +0000
app         |
app         | ActionController::RoutingError (No route matches [GET] "/packs/js/application-6527e9c4b100bc10bc71.js"):

Dockerfile

FROM ruby:3.0.1

ENV APP_PATH /app
ENV BUNDLE_VERSION 2.2.21
ENV BUNDLE_PATH /usr/local/bundle/gems
ENV TMP_PATH /tmp/
ENV RAILS_LOG_TO_STDOUT true
ENV RAILS_PORT 3000

# copy entrypoint scripts and grant execution permissions
COPY ./dev-docker-entrypoint.sh /usr/local/bin/dev-entrypoint.sh
COPY ./webpack-entrypoint.sh /usr/local/bin/webpack-entrypoint.sh
COPY ./test-docker-entrypoint.sh /usr/local/bin/test-entrypoint.sh
RUN chmod +x /usr/local/bin/dev-entrypoint.sh && \
        chmod +x /usr/local/bin/test-entrypoint.sh && \
        chmod +x /usr/local/bin/webpack-entrypoint.sh

# install dependencies for application
RUN apt update -qq && apt install -y \
        curl \
        libpq-dev \
        imagemagick \
        && mkdir -p $APP_PATH 

# Install node js
RUN curl -sL https://deb.nodesource.com/setup_16.x | bash -
RUN apt-get update && apt-get install -y nodejs

# install yarn
RUN npm i -g yarn

RUN gem install bundler --version "$BUNDLE_VERSION" \
&& rm -rf $GEM_HOME/cache/*

RUN yarn install

# navigate to app directory
WORKDIR $APP_PATH

EXPOSE $RAILS_PORT

ENTRYPOINT [ "bundle", "exec" ]

docker-compose.yml

version: '3'
volumes:
  db_data:
  gem_cache:
  shared_data:
services:
  redis:
    image: redis:alpine
    command: redis-server
    volumes:
      - shared_data:/var/shared/redis
  postgres:
    image: postgres:11.11
    container_name: postgres
    volumes:
      - db_data:/var/lib/postgresql/data
      - shared_data:/var/shared
    environment:
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: password
    ports:
      - 5099:5432
  webpack:
    build:
      context: .
      dockerfile: Dockerfile.dev
    container_name: webpack
    entrypoint: webpack-entrypoint.sh
    command: ['./bin/webpack-dev-server']
    volumes:
      - .:/app
      - shared_data:/var/shared
      - gem_cache:/usr/local/bundle/gems
    ports:
      - 3035:3035
  app:
    build:
      context: .
      dockerfile: Dockerfile.dev
    container_name: app
    volumes:
      - .:/app
      - shared_data:/var/shared
      - gem_cache:/usr/local/bundle/gems
    ports:
      - 3000:3000
    stdin_open: true
    tty: true
    env_file: .env.development
    entrypoint: dev-entrypoint.sh
    command: ['rails', 'server', '-p', '3000', '-b', '0.0.0.0']
    environment:
      RAILS_ENV: development
    depends_on:
      - webpack
      - postgres

*-entrypoint.sh file is pretty simple

#!/bin/sh

set -e

echo "Environment: $RAILS_ENV"

# install missing gems
bundle check || bundle install --jobs 20 --retry 5

# run passed commands
bundle exec ${@}

Answer 1

I hope this will be helpful for someone else.

Although looking at the logs was all fine, and webpack seems to be compiling, the issue was with the webpack host configuration in webpacker.yml file.

default webpack.yml configuration

development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost: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
    pretty: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: '**/node_modules/**'

Change dev_server hosts from localhost to webpack

NOTE: webpack in my case because that is the name of webpack docker container for me.

development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: webpack
    port: 3035
    public: webpack: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
    pretty: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: '**/node_modules/**'

And finally in config/initializers/content_security_policy.rb specify webpack host on connect_src

    policy.connect_src :self, :https, "http://webpack:3035", "ws://webpack:3035" if Rails.env.development?