rails / webpacker

Use Webpack to manage app-like JavaScript modules in Rails
MIT License
5.31k stars 1.47k forks source link

Webpacker is not creating manifest.json (Docker) #2989

Closed acouprie closed 3 years ago

acouprie commented 3 years ago

Hello, I am facing an issue for days and I think I have tried every solution possible, you are my only hope.

Encountered error

I'm not a rails expert and that is the first time I try to use webpacker (version '~> 6.0.0.pre.2') on a rails app upgraded from 5.2.1 to a rails 6.1.3.1 with docker-compose. The error I am facing is:

web_1        | [Webpacker] Compiling...
web_1        | [Webpacker] Compiled all packs in /myapp/public/packs
web_1        | [Webpacker] asset application.js 622 KiB [compared for emit] (name: application)
web_1        | runtime modules 997 bytes 4 modules
web_1        | modules by path ../../../node_modules/jquery/src/ 227 KiB 106 modules
web_1        | modules by path ../../../node_modules/bootstrap/ 73.6 KiB 13 modules
web_1        | modules by path ../../../node_modules/@rails/ 60.2 KiB
web_1        |   ../../../node_modules/@rails/ujs/lib/assets/compiled/rails-ujs.js 27.6 KiB [built] [code generated]
web_1        |   ../../../node_modules/@rails/activestorage/app/assets/javascripts/activestorage.js 32.6 KiB [built] [code generated]
web_1        | ./application.js 560 bytes [built] [code generated]
web_1        | ../../../node_modules/turbolinks/dist/turbolinks.js 37.6 KiB [built] [code generated]
web_1        | ../src/javascript/update_resources.js 262 bytes [built] [code generated]
web_1        | ../../../node_modules/jquery/external/sizzle/dist/sizzle.js 68.9 KiB [built] [code generated]
web_1        | webpack 5.33.2 compiled successfully in 1075 ms
web_1        | 
web_1        |   Rendered layout layouts/application.html.erb (Duration: 3011.1ms | Allocations: 4539)
web_1        | Completed 500 Internal Server Error in 3015ms (ActiveRecord: 1.6ms | Allocations: 5953)
web_1        | 
web_1        | 
web_1        |   
web_1        | ActionView::Template::Error (Webpacker can't find application.js in /myapp/public/packs/manifest.json. Possible causes:
web_1        | 1. You want to set webpacker.yml value of compile to true for your environment
web_1        |    unless you are using the `webpack -w` or the webpack-dev-server.
web_1        | 2. webpack has not yet re-run to reflect updates.
web_1        | 3. You have misconfigured Webpacker's config/webpacker.yml file.
web_1        | 4. Your webpack configuration is not creating a manifest.
web_1        | Your manifest contains:
web_1        | {
web_1        | }
web_1        | ):
web_1        |      5:      <meta http-equiv = "Content-type" content = "text/html; charset = utf-8">
web_1        |      6:      <meta keyword = "World of Stars, World of Stargate">
web_1        |      7:      <title ><%= yield(:title) %></title>
web_1        |      8:      <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
web_1        |      9:      <%= stylesheet_pack_tag 'stylesheets', media: 'all', 'data-turbolinks-track': 'reload' %>
web_1        |     10: 
web_1        |     11:  </head>

I don't understand when webpacker is supposed to create the manifest.json, there is none in my project, rails webpacker:compile works:

$ docker-compose exec web bin/rails webpacker:compile
Compiling...
Compiled all packs in /myapp/public/packs
asset application.js 208 KiB [emitted] [minimized] (name: application) 1 related asset
runtime modules 718 bytes 3 modules
modules by path ../../../node_modules/jquery/src/ 227 KiB 106 modules
modules by path ../../../node_modules/bootstrap/ 73.6 KiB 13 modules
modules by path ../../../node_modules/@rails/ 60.2 KiB
  ../../../node_modules/@rails/ujs/lib/assets/compiled/rails-ujs.js 27.6 KiB [built] [code generated]
  ../../../node_modules/@rails/activestorage/app/assets/javascripts/activestorage.js 32.6 KiB [built] [code generated]
./application.js 560 bytes [built] [code generated]
../../../node_modules/turbolinks/dist/turbolinks.js 37.6 KiB [built] [code generated]
../src/javascript/update_resources.js 262 bytes [built] [code generated]
../../../node_modules/jquery/external/sizzle/dist/sizzle.js 68.9 KiB [built] [code generated]
webpack 5.33.2 compiled successfully in 7495 ms

It successfully creates three files but no manifest.json:

public/packs
├── 25f390e921f22187aa42.svg
├── application.js
└── application.js.LICENSE.txt

There is not the file /myapp/public/packs/manifest.json, so I'm unsure how it can says that it contains {} (that is empty, not nil or a file does not exist error).

$ docker-compose exec web ls /myapp/public/packs/
25f390e921f22187aa42.svg  application.js  application.js.LICENSE.txt

Solution tried

I tried to build my docker images and restart the configuration from scratch so many times, I tried all the solution I found on this repository and Stackoverflow or related website, also deleting node_modules is not the fix.

issues/1019 related to docker describe an issue kind of opposite to me: there manifest.json is populated but not there files in the pack. None of the solutions worked for me.

Having Webpacker in the same container as my main app and referenced in webpacker.yml as host:0.0.0.0 or in a separate container like this lead to the same behavior:

  webpacker:
    build: .
    command: bash -c "rm -rf /myapp/public/packs; /myapp/bin/webpack-dev-server"
    volumes:
      - .:/myapp
    ports:
      - "3035:3035"
    env_file:
      - '.env'

And referenced in the webpacker.yml as host: webpacker doesn't work.

issues/2825 looks also similar, but again, proposed solution to run rails webpacker:compile or to reinstall webpacker didn't worked.

Test

Check my project in the state I'm currently https://github.com/acouprie/worldofstars/tree/use_full_webpacker.

Opensuse Tumbleweed, nodejs v12.22.1, ruby 3.0.1p64, Docker version 20.10.3_ce, docker-compose version 1.26.2

I thank you so much in advance

mcmire commented 3 years ago

6.0.0.pre.2 is actually an old version — the newest version is 6.0.0-beta.6. Can you try that instead? That way we can make sure you're using the latest code.

acouprie commented 3 years ago

Hello, thank you for your answer, but I have the same behavior with Webpacker 6.0.0-beta.6.

g13ydson commented 3 years ago

I'm getting the same problem here in prod. @acouprie did you get any solution for this?

acouprie commented 3 years ago

No, I didn't. Honestly, I tried everything in my power and waste one week on this issue. I am clueless now.

mcmire commented 3 years ago

I know this isn't a solution, more of a pointer, but Webpacker is a shell for Webpack, so I'm wondering if this problem is specific to Webpacker or if this is a Webpack issue in general. You might consider googling for "webpack docker manifest" or something like that to see if anyone has reported any issues around this.

g13ydson commented 3 years ago

hey @acouprie I managed to run my application after setting the below configs as true:

production.rb

config.public_file_server.enabled = true
config.assets.compile = true

application.html.erb

<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

packs/application.js

import "./stylesheets/application.scss";

I'm also using docker and webpacker 5.2

acouprie commented 3 years ago

Thank you for your answers, but it still didn't solved my issue. I tried different version of nodejs (12, 14) without success as well.

acouprie commented 3 years ago

Still open to any insights about this issue. Webpack is compiling successfully with node v14.16.1, it creates a public/packs folder with create some files inside:

$ ls public/packs
25f390e921f22187aa42.svg  application.js

Few comments about the above: 1) From other manifest.json saw, I am surprise that the generated application.js file is not name with a lot of random number at the end (but the content is clearly computer-generated, nothing related to my javascript/packs/application.js) 2) my stylesheets.scss is not generated but this is perhaps another problem 3) I dont know what is this svg file

For some reason does not create the manifest, I reinstalled webpacker and rebuild my docker images so many time without success. There is still a small chance I am missing something, but I really believe I am facing a Webpack issue (maybe linked to docker on an upgraded rails app).

Thank you :)

amirkarimi commented 3 years ago

This might be just the Docker volume mounting problem. Have you tried removing these lines from your docker-compose:

    volumes:
      - .:/myapp

Read more about what can go wrong in this situation here: https://4m1r.dev/2020/10/18/docker-compose-volumes-cheatsheet.html

duhaime commented 2 years ago

@dhh what was the fix for this thread?

nirname commented 6 months ago

I had to add webpack-cli

yarn add -D webpack-cli

Details: system asked about webpacker-cli

#23 16.47 Compiling...
#23 17.22 Compiled all packs in /app/public/packs
#23 17.22 One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
#23 17.22  - webpack-cli (https://github.com/webpack/webpack-cli)
#23 17.22    The original webpack full-featured CLI.
#23 17.22 We will use "yarn" to install the CLI via "yarn add -D".
#23 17.22 Do you want to install 'webpack-cli' (yes/no): 
#23 17.22 
#23 DONE 17.8s

so I did this as a workaround

RUN --mount=type=cache,target=/app/tmp/cache,id=assets yarn add -D webpack-cli -y && bin/rake assets:precompile

Posting this since the initial message about empty manifest.json was exactly the same

https://github.com/webpack/webpack/issues/7197