How to make Webpacker compiling instantly in my Rails project? - ruby-on-rails

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:

Answer 1

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