Webpacker can't find some node_modules in Docker/Rails Setup

Question

I've a new Rails 5.2.4.1 instance created with --webpack=stimulus. Dockerized the whole thing. Using stimulusjs there's no problem - import { Application } from "stimulus" works like its supposed to.

Then i added turbolinks with yarn add turbolinks and then a import Turbolinks from "turbolinks" like described in the github README (doesn't matter if i use import or require). Which then results in a 'Failed to compile.' error. Somehow it can't find the module. I have the same problem for example with another package called 'isotope-layout'.

Here's the error log: Gist

When i ls node_modules on the webpacker docker container the turbolinks and isotope-layout folders are there.

❯ docker-compose run webpacker bash

bash-5.0$ pwd
/home/deploy/app

bash-5.0$ ls node_modules/turbolinks/
CHANGELOG.md  README.md     package.json
LICENSE       dist          src

EDIT: after triggering docker-compose down --remove-orphans turbolinks and other modules in node_modules get found and it compiles... cache problem?

Here are my current Webpacker and Docker config files:

Dockerfile:

FROM ruby:2.6.5-alpine
RUN apk update && \
    apk upgrade && \
    apk add --update \
    build-base \
    nodejs \
    nodejs-npm \
    mysql-dev \
    curl \
    imagemagick \
    tzdata \
    yarn \
    bash && \
    rm -rf /var/cache/apk/*

RUN addgroup -S admin -g 1000 && adduser -S -g '' -u 1000 -G admin deploy

ENV RAILS_ROOT /home/deploy/app
ENV RAILS_LOG_TO_STDOUT 1
ENV NPM_CONFIG_PREFIX=/home/deploy/.npm-global
ENV PATH=$PATH:/home/deploy/.npm-global/bin

COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]

USER deploy
RUN mkdir -p $RAILS_ROOT
WORKDIR $RAILS_ROOT
COPY --chown=deploy:admin Gemfile Gemfile.lock ./
RUN npm install -g yarn
RUN bundle install --jobs 20 --retry 5 --binstubs
COPY --chown=deploy:admin . ./
RUN yarn install --pure-lockfile

entrypoint.sh:

#!/bin/bash
set -e
rm -f /home/deploy/app/tmp/pids/server.pid
exec "$@"

docker-compose.yml:

version: '3'

services:
  webpacker:
    build:
      dockerfile: Dockerfile
      context: .
    volumes:
      - .:/home/deploy/app
      - /home/deploy/app/bin
      - /home/deploy/app/node_modules
    command: bash -c 'rm -rf /home/deploy/app/public/packs; /home/deploy/app/bin/webpack-dev-server'
    ports:
      - '3035:3035'

  app:
    build:
      dockerfile: Dockerfile
      context: .
    command: >
      bash -c "
        rm -f tmp/pids/server.pid &&

        # Run test server detached
        RAILS_ENV=test puma -b tcp://0.0.0.0:3001 -d &&

        # Run web server
        puma -C config/puma.rb
        "
    ports: ['3000:3000', '3001:3001']
    environment:
      - RAILS_ENV=development
      - NODE_ENV=development
    depends_on:
      - webpacker
    volumes:
      - .:/home/deploy/app
      - /home/deploy/app/bin
      - /home/deploy/app/node_modules

webpacker.yml:

default: &default
  source_path: app/webpacker
  source_entry_path: packs
  public_root_path: public
  public_output_path: packs
  cache_path: tmp/cache/webpacker
  check_yarn_integrity: false
  webpack_compile_output: false

  # 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

  # Extract and emit a css file
  extract_css: true

  static_assets_extensions:
    - .jpg
    - .jpeg
    - .png
    - .gif
    - .tiff
    - .ico
    - .svg
    - .eot
    - .otf
    - .ttf
    - .woff
    - .woff2

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

development:
  <<: *default
  compile: true

  # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
  check_yarn_integrity: false

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: webpacker
    port: 3035
    public: 0.0.0.0: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:
      aggregate_timeout: 300,
      poll: 1000,
      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

  # Extract and emit a css file
  extract_css: true

  # Cache manifest.json for performance
  cache_manifest: true

webpack/environment.js:

const { environment } = require('@rails/webpacker')

module.exports = environment

application.js:

import Turbolinks from "turbolinks"

Answer 1

After run yarn add turbolinks (or any yard add ..), you should stop the webpacker service, and start it again.

Because that, after you run the docker-compose down --remove-orphans everything works well. You remove all services and create it again. Just stop & start will be faster.