How to make Webpacker compiling instantly in my Rails project?

Question

When I start my server with docker-compose up rails command, there is shows a [Webpacker] Compiling... which goes for about a ten seconds and then it gives this output

rails_1      | [Webpacker] Compilation failed:
rails_1      | Hash: e1d0cde8c28f1ff2a0a2
rails_1      | Version: webpack 4.46.0
rails_1      | Time: 19214ms
rails_1      | Built at: 03/17/2022 11:42:08 AM
rails_1      |                                                              Asset      Size            Chunks                         Chunk Names
rails_1      |                             js/application-e9da3e13d93a6c1058bd.js  5.54 MiB       application  [emitted] [immutable]  application
rails_1      |                         js/application-e9da3e13d93a6c1058bd.js.map  5.14 MiB       application  [emitted] [dev]        application
rails_1      |                                   js/board-48bc7b5cbf760044039a.js  3.77 MiB             board  [emitted] [immutable]  board
rails_1      |                               js/board-48bc7b5cbf760044039a.js.map  3.88 MiB             board  [emitted] [dev]        board
rails_1      |                                js/provider-c2471a0d3965537a7a3f.js  3.74 MiB          provider  [emitted] [immutable]  provider
rails_1      |                            js/provider-c2471a0d3965537a7a3f.js.map  3.85 MiB          provider  [emitted] [dev]        provider
rails_1      |                        js/server_rendering-a1f5869b9a9be21b0a76.js  9.15 MiB  server_rendering  [emitted] [immutable]  server_rendering
rails_1      |                    js/server_rendering-a1f5869b9a9be21b0a76.js.map  8.51 MiB  server_rendering  [emitted] [dev]        server_rendering
rails_1      |                                                      manifest.json  1.61 KiB                    [emitted]              
rails_1      |  media/fonts/OpenSans-Regular-d7d7b8359eeb9cddfba6cd4cef3c1702.ttf   127 KiB                    [emitted]              
rails_1      | media/fonts/OpenSans-SemiBold-d7261533b9a545ddc769dc2fe86dc40e.ttf   127 KiB                    [emitted]              
rails_1      |                                     media/images/logo-cfbdadde.png  1.07 KiB                    [emitted]              
rails_1      | Entrypoint application = js/application-e9da3e13d93a6c1058bd.js js/application-e9da3e13d93a6c1058bd.js.map
rails_1      | Entrypoint board = js/board-48bc7b5cbf760044039a.js js/board-48bc7b5cbf760044039a.js.map
rails_1      | Entrypoint provider = js/provider-c2471a0d3965537a7a3f.js js/provider-c2471a0d3965537a7a3f.js.map
rails_1      | Entrypoint server_rendering = js/server_rendering-a1f5869b9a9be21b0a76.js js/server_rendering-a1f5869b9a9be21b0a76.js.map
rails_1      | [./app/assets/images/logo.png] 76 bytes {application} {server_rendering} [built]
rails_1      | [./app/javascript/components sync recursive ^\.\/.*$] ./app/javascript/components sync ^\.\/.*$ 9.05 KiB {server_rendering} [built]
rails_1      | [./app/javascript/components/app.tsx] 5.63 KiB {application} {server_rendering} [built]
rails_1      | [./app/javascript/components/provider/index.js] 49 bytes {provider} {server_rendering} [built]
rails_1      | [./app/javascript/components/subscription/index.js] 62 bytes {board} {server_rendering} [built]
rails_1      | [./app/javascript/packs/application.js] 1.71 KiB {application} [built]
rails_1      | [./app/javascript/packs/board.jsx] 1.13 KiB {board} [built]
rails_1      | [./app/javascript/packs/provider.js] 381 bytes {provider} [built]
rails_1      | [./app/javascript/packs/server_rendering.js] 301 bytes {server_rendering} [built]
rails_1      | [./app/javascript/utils/apollo.js] 5.34 KiB {board} {provider} {server_rendering} [built]
rails_1      | [./node_modules/react-apollo/lib/react-apollo.esm.js] 487 bytes {board} {provider} {server_rendering} [built]
rails_1      | [./node_modules/react-dom/index.js] 1.32 KiB {application} {board} {provider} {server_rendering} [built]
rails_1      | [./node_modules/react-router-dom/index.js] 15.2 KiB {application} {server_rendering} [built]
rails_1      | [./node_modules/react/index.js] 189 bytes {application} {board} {provider} {server_rendering} [built]
rails_1      | [./node_modules/react_ujs/react_ujs/index.js] 6.3 KiB {server_rendering} [built]
rails_1      |     + 1550 hidden modules
rails_1      | 
rails_1      | WARNING in ./node_modules/graphql-ruby-client/sync/prepareRelay.js 41:22-47
rails_1      | Critical dependency: the request of a dependency is an expression
rails_1      |  @ ./node_modules/graphql-ruby-client/sync/generateClient.js
rails_1      |  @ ./node_modules/graphql-ruby-client/index.js
rails_1      |  @ ./app/javascript/utils/apollo.js
rails_1      |  @ ./app/javascript/packs/board.jsx
rails_1      | 
rails_1      | ERROR in ./app/javascript/components/action-item/action-item.jsx 303:13-28
rails_1      | "export 'handleKeyPress' (imported as '_handleKeyPress') was not found in '../../utils/helpers'
rails_1      |  @ ./app/javascript/components sync ^\.\/.*$
rails_1      |  @ ./app/javascript/packs/server_rendering.js
rails_1      | 
rails_1      | ERROR in ./app/javascript/components/new-action-item/new-action-item.jsx 141:13-28
rails_1      | "export 'handleKeyPress' (imported as '_handleKeyPress') was not found in '../../utils/helpers'
rails_1      |  @ ./app/javascript/components sync ^\.\/.*$
rails_1      |  @ ./app/javascript/packs/server_rendering.js
rails_1      | 
rails_1      | ERROR in ./app/javascript/components/new-card-body/new-card-body.jsx 188:13-27
rails_1      | "export 'handleKeyPress' was not found in '../../utils/helpers'
rails_1      |  @ ./app/javascript/components sync ^\.\/.*$
rails_1      |  @ ./app/javascript/packs/server_rendering.js
rails_1      | 
rails_1      | ERROR in ./app/javascript/components/comments-dropdown/comments-dropdown.jsx 181:13-27
rails_1      | "export 'handleKeyPress' was not found in '../../utils/helpers'
rails_1      |  @ ./app/javascript/components sync ^\.\/.*$
rails_1      |  @ ./app/javascript/packs/server_rendering.js
rails_1      | 
rails_1      | ERROR in ./app/javascript/components/card-body/card-body.jsx 222:13-27
rails_1      | "export 'handleKeyPress' was not found in '../../utils/helpers'
rails_1      |  @ ./app/javascript/components sync ^\.\/.*$
rails_1      |  @ ./app/javascript/packs/server_rendering.js
rails_1      | 
rails_1      | ERROR in ./node_modules/graphql-ruby-client/subscriptions/ActionCableLink.js
rails_1      | Module not found: Error: Can't resolve '@apollo/client/core' in '/app/node_modules/graphql-ruby-client/subscriptions'
rails_1      |  @ ./node_modules/graphql-ruby-client/subscriptions/ActionCableLink.js 33:13-43
rails_1      |  @ ./node_modules/graphql-ruby-client/index.js
rails_1      |  @ ./app/javascript/utils/apollo.js
rails_1      |  @ ./app/javascript/packs/board.jsx
rails_1      | 
rails_1      | ERROR in ./node_modules/graphql-ruby-client/subscriptions/PusherLink.js
rails_1      | Module not found: Error: Can't resolve '@apollo/client/core' in '/app/node_modules/graphql-ruby-client/subscriptions'
rails_1      |  @ ./node_modules/graphql-ruby-client/subscriptions/PusherLink.js 68:13-43
rails_1      |  @ ./node_modules/graphql-ruby-client/index.js
rails_1      |  @ ./app/javascript/utils/apollo.js
rails_1      |  @ ./app/javascript/packs/board.jsx
rails_1      | 
rails_1      | ERROR in ./node_modules/graphql-ruby-client/subscriptions/AblyLink.js
rails_1      | Module not found: Error: Can't resolve '@apollo/client/core' in '/app/node_modules/graphql-ruby-client/subscriptions'
rails_1      |  @ ./node_modules/graphql-ruby-client/subscriptions/AblyLink.js 70:13-43
rails_1      |  @ ./node_modules/graphql-ruby-client/index.js
rails_1      |  @ ./app/javascript/utils/apollo.js
rails_1      |  @ ./app/javascript/packs/board.jsx
rails_1      | 
rails_1      | ERROR in ./node_modules/graphql-ruby-client/subscriptions/createRelaySubscriptionHandler.js
rails_1      | Module not found: Error: Can't resolve 'relay-runtime' in '/app/node_modules/graphql-ruby-client/subscriptions'
rails_1      |  @ ./node_modules/graphql-ruby-client/subscriptions/createRelaySubscriptionHandler.js 14:22-46
rails_1      |  @ ./node_modules/graphql-ruby-client/index.js
rails_1      |  @ ./app/javascript/utils/apollo.js
rails_1      |  @ ./app/javascript/packs/board.jsx

I found that answer that helps me a bit. But now, when I start ./bin/webpack-dev-server in a separate window, it gives me this

./bin/webpack-dev-server
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.0.13:8080/
<i> [webpack-dev-server] On Your Network (IPv6): http://[fe80::b537:10:b5dc:9bb5]:8080/
<i> [webpack-dev-server] Content not from webpack is served from '/home/yarikhrom/Work/retrospective/retrospective/public' directory
node:internal/crypto/hash:67
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:135:10)
    at module.exports (/home/yarikhrom/Work/retrospective/retrospective/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/home/yarikhrom/Work/retrospective/retrospective/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/home/yarikhrom/Work/retrospective/retrospective/node_modules/webpack/lib/NormalModule.js:471:10)
    at /home/yarikhrom/Work/retrospective/retrospective/node_modules/webpack/lib/NormalModule.js:503:5
    at /home/yarikhrom/Work/retrospective/retrospective/node_modules/webpack/lib/NormalModule.js:358:12
    at /home/yarikhrom/Work/retrospective/retrospective/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/home/yarikhrom/Work/retrospective/retrospective/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/home/yarikhrom/Work/retrospective/retrospective/node_modules/loader-runner/lib/LoaderRunner.js:221:10) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}
Node.js v17.7.1

Also i found in documentation that I need to work with file webpack.config.js, but I don't have this one in my project. So, what can I do to make my webpacker compile insantly when I start a project or making changes in a frontend part?

docker-compose.yml:

version: "3.7"

services:
  app: &app
    build:
      context: .
      dockerfile: ./.dockerdev/Dockerfile
      args:
        RUBY_VERSION: "2.7.0"
        PG_MAJOR: "11"
        NODE_MAJOR: "12"
        YARN_VERSION: "1.19.1"
        BUNDLER_VERSION: "2.2.25"
    image: example-dev:1.0.0
    tmpfs:
      - /tmp

  backend: &backend
    <<: *app
    stdin_open: true
    tty: true
    volumes:
      - .:/app:cached
      - ./node_modules:/app/node_modules
      - .dockerdev/.psqlrc:/root/.psqlrc:ro
      - .dockerdev/bundle:/bundle
      - rails_cache:/app/tmp/cache
      - packs:/app/public/packs
    environment:
      - NODE_ENV=development
      - RAILS_ENV=${RAILS_ENV:-development}
      - REDIS_URL=redis://redis:6379/
      - DATABASE_URL=postgres://postgres:postgres@postgres:5432
      - POSTGRESQL_HOST=postgres
      - POSTGRESQL_PORT=5432
      - WEBPACKER_DEV_SERVER_HOST=webpacker
      - WEB_CONCURRENCY=1
      - HISTFILE=/app/log/.bash_history
      - PSQL_HISTFILE=/app/log/.psql_history
      - EDITOR=vi
    depends_on:
      - postgres
      - redis

  runner:
    <<: *backend
    command: /bin/bash
    ports:
      - "3000:3000"
      - "3002:3002"

  rails:
    <<: *backend
    command: bundle exec rails server -b 0.0.0.0
    ports:
      - "3000:3000"

  postgres:
    image: postgres:11.1
    volumes:
      - .dockerdev/.psqlrc:/root/.psqlrc:ro
      - ./log:/root/log:cached
      - postgres:/var/lib/postgresql/data
    environment:
      - PSQL_HISTFILE=/root/log/.psql_history
    ports:
      - "5432:5432"

  redis:
    image: redis:3.2-alpine
    volumes:
      - redis:/data
    ports:
      - "6379:6379"

  webpacker:
    <<: *app
    command: ./bin/webpack-dev-server
    ports:
      - "3035:3035"
    volumes:
      - .:/app:cached
      - ./node_modules:/app/node_modules
      - .dockerdev/bundle:/bundle
      - packs:/app/public/packs
    environment:
      - NODE_ENV=${NODE_ENV:-development}
      - RAILS_ENV=${RAILS_ENV:-development}
      - WEBPACKER_DEV_SERVER_HOST=0.0.0.0

volumes:
  postgres:
  redis:
  node_modules:
  rails_cache:
  packs:

Hi, can you show your docker-compose.yml please? – Diego Puente Mar 17 '22 at 12:28 — Diego Puente, Mar 17 '22 at 12:28

score 0 · Answer 1 · answered Mar 17 '22 at 12:54

0

I think that i had this issue too, i fixed this putting rails and webpacker in the same container, is not the best solution but it works, something like this:

docker-compose.yml

version: '3'

services:
  web:
    build:
      context: .
      dockerfile: ./docker/development/Dockerfile
    command: ["sh", "./docker/development/scripts/start-rails-development-server.sh"]
    volumes:
      - .:/app
    ports:
      - 3000:3000
      - 3035:3035
    depends_on:
      - database

start-rails-development-server.sh

#!/bin/sh

echo 'Starting webpack dev server ...' && bin/webpack-dev-server &
echo 'starting Rails server ...' && rm -f tmp/pids/server.pid && bundle exec rails s -b 0.0.0.0

answered Mar 17 '22 at 12:54

Diego Puente

1,964
20
23

So, I add all that you said to docker-compose.yml, but i don't understand one thing: should I add `dockerfile: ./docker/development/Dockerfile` or `dockerfile: ./.dockerdev/Dockerfile` in your part? Also I don't understand where to add start-rails-development-server? Create a folder 'sh' in existing 'bin' and add this file in it? – gurman Mar 17 '22 at 14:18
yes, sorry i put my example without change to match yours. Would be: `dockerfile: ./.dockerdev/Dockerfile` and the script would be maybe in `./.dockerdev/scripts/start-rails-development-server.sh` – Diego Puente Mar 17 '22 at 16:21
for the file `start-rails-development-server` you can put it in `docker/development/scripts/start-rails-development-server.sh` – Diego Puente Mar 17 '22 at 16:56
I don't have docker folder in my project, so I add it to `./.dockerdev/scripts/start-rails-development-server.sh` But now, when I'm trying to `docker-compose up rails` it gives me `ERROR: Service 'web' depends on service 'database' which is undefined.` Then I tried to rewrite `database` with `postgres`, and Webpack still compiling too long What am I doing wrong? – gurman Mar 17 '22 at 18:40

How to make Webpacker compiling instantly in my Rails project?

1 Answers1