bin/webpack-dev-server is not compiling issues on the fly

[kritik]

bin/webpack-dev-server used to on all projects but on the new rails installation it stopped working at all. I removed all yarn including home directory settings. Then reinstalled yarn via brew.

To show my issue I created new rails application https://github.com/kritik/webpacker-dev-server via:

rails new project name
yarn set version 1.22.0
yarn install
rails g scaffold page name
rails db:migrate

After that I run in 1 tab rails s and in second one bin/webpacker-dev-server. Logs:

$ bin/webpack-dev-server 
ℹ ｢wds｣: Project is running at http://localhost:3035/
ℹ ｢wds｣: webpack output is served from /packs/
ℹ ｢wds｣: Content not from webpack is served from /Users/Vladimir/rails/familyid/invitations/public/packs
ℹ ｢wds｣: 404s will fallback to /index.html
ℹ ｢wdm｣: Hash: 8c0082807459236a9b6e
Version: webpack 4.42.1
Time: 2213ms
Built at: 03/26/2020 5:38:49 PM
                                     Asset       Size       Chunks                         Chunk Names
    js/application-f6c46fa6637e924c53df.js    506 KiB  application  [emitted] [immutable]  application
js/application-f6c46fa6637e924c53df.js.map    571 KiB  application  [emitted] [dev]        application
      js/hello_vue-eb2815a0b48aa2fc5e72.js    648 KiB    hello_vue  [emitted] [immutable]  hello_vue
  js/hello_vue-eb2815a0b48aa2fc5e72.js.map    744 KiB    hello_vue  [emitted] [dev]        hello_vue
                             manifest.json  689 bytes               [emitted]              
ℹ ｢wdm｣: Compiled successfully.

Then I go to the page http://localhost:3000/pages and see in the console

Loading failed for the <script> with source “http://localhost:3000/packs/js/application-f6c46fa6637e924c53df.js”.

When I checked public folder then nothing generated there

$ find public/packs
public/packs
public/packs/manifest.json
$ 

The most interesting part is that if I kill webpack-dev-server and restart rails, so compilation happens in the same window, then everything works fine and pack files are compiled.

Any idea where should I dig?

[kritik]

What I found so far is that command bin/webpack --watch --port 3035 --config config/webpack/development.js works fine but hash number differs from result I get from bin/webpack-dev-server

But if I kill bin/webpack-dev-server and restart rails then packs will have the same checksum as result of bin/webpack --watch --port 3035 --config config/webpack/development.js

[kritik]

In meanwhile what can be done:
in one console run
bin/webpack --mode development --watch
and add to file config/initializers/webpack.rb

class Webpacker::Compiler
  def compile
    logger.info "NOTE! depend on `bin/webpack --mode development --watch`. So no hot reload!"
    true
  end
end

You loose hot reload but at least you can do work

[rossta]

When I checked public folder then nothing generated there

The webpack-dev-server compiles source files in memory and will otherwise only emit the manifest.json file to disk.

[rossta]

I just cloned your link project and was able to load the /pages route and its linked webpack resources using the webpack-dev-server without issue.

When running the webpack-dev-server, can you visit the JS resource through both the rails endpoint and the configured dev server endpoint? In other words, at either http://localhost:3000/ and http://localhost:3035/? (The output should be the same).

[rossta]

Also, are you seeing any errors in your Rails server output when the dev server url fails to load?

[kritik]

@rossta thanks for guiding me. After testing with different urls to write here my logs, I found that pack is accessible via curl

curl http://localhost:3000/packs/js/application-534b02d96daa106ae31f.js|head
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
  0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
 28  506k   28  143k    0     0  20.0M      0 --:--:-- --:--:-- --:--:-- 20.0M
curl: (23) Failed writing body (0 != 16384)

So, next step was to understand why Firefox is not showing content and opening this link in chrome said error code 431. So I added fake domain to /etc/hosts and it started to works. So what it is saying is that cookie in Rails is still working but node for nodejs.

To be honest, I don't know if something should be done here. My problem has been resolved. I will just clean up cookies in localhost. On the other hand, it would be nice for other developers to print some warning would be nice.

[kritik]

So, should I close this issue?