Webpacker: Can't find default.css in <APP_PATH>/public/packs/manifest.json. Is webpack still compiling?

[jonhue]

Here are the logs:

$ rails assets:precompile
Webpacker is installed 🎉 🍰
Using <APP_PATH>/config/webpacker.yml file for setting up webpack paths
Compiling…
Compiled all packs in <APP_PATH>/app/assets/webpacker/packs

I noticed that I have no folder called public/packs thus no manifest file. Shouldn't that be taken care of by webpacker automatically when precompiling?

In addition not all packs get precompiled into public/assets/packs as they should.

[gauravtiwari]

@jonhue Seems like packs are compiled somewhere else Compiled all packs in <APP_PATH>/app/assets/webpacker/packs and not public. Are you using master or 2.0?

[jonhue]

@gauravtiwari I am using master.
I changed the location of packs from app/javascript/packs to app/assets/webpacker/packs. That is what that means.

[gauravtiwari]

@jonhue You would need to modify source path instead. Leave the packs dir as is unless you want to rename to something else.

source_path: app/assets/webpacker
# relative to source_path
source_entry_path: packs
# relative to public dir
public_output_path: packs

[jonhue]

@gauravtiwari That's what I did.

[gauravtiwari]

Ahh the path in the message output is wrong but anyway you don't get any compiled files inside public/packs? What files you have under app/assets/webpacker/packs?

[jonhue]

@gauravtiwari

• default.js
• default.sass
• dark.sass

[gauravtiwari]

That’s why - packs folder is only intended for JS webpack entry files. All other files should live in source path and can be referenced inside default.js by import. Then the compiler will output a css and a js bundle.

import “../default.saas”

Makes sense?

[gauravtiwari]

Also you see both sass and JS are using same name so the compiler is confused, it can’t have two entries with same name.

[jonhue]

Alright then it complains about default.js because it's included next in the document tree.

[gauravtiwari]

@jonhue Please try either of this:

app/assets/webpacker: 
  - default.sass
  - packs
    - default.js

For this you would need to reference the style inside the default pack file.

// app/assets/webpacker/packs/default.js
import '../default.sass'

This would output a css and js build file with same pack name:

<%= stylesheet_pack_tag('default') %>
<%= javascript_pack_tag('default') %>

OR

app/assets/webpacker: 
  - packs
    - default.js
    - main.sass (rename default.sass to main.sass)

This will output two files:

<%= stylesheet_pack_tag('main') %>
<%= javascript_pack_tag('default') %>

[jonhue]

@gauravtiwari Weird, now I am getting an

Errno::ETIMEDOUT at /
A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected host has failed to respond. - user specified timeout

error whenever I include the javascript pack (= javascript_pack_tag 'application', I renamed the javascript file to application.js).

Here are the logs:

Errno::ETIMEDOUT - A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected host has failed to respond. - user specified timeout:
  c:/RailsInstaller/Ruby2.3.0/lib/ruby/2.3.0/socket.rb:61:in `connect_internal'
  c:/RailsInstaller/Ruby2.3.0/lib/ruby/2.3.0/socket.rb:139:in `connect'
  c:/RailsInstaller/Ruby2.3.0/lib/ruby/2.3.0/socket.rb:636:in `block in tcp'
  c:/RailsInstaller/Ruby2.3.0/lib/ruby/2.3.0/socket.rb:231:in `foreach'
  c:/RailsInstaller/Ruby2.3.0/lib/ruby/2.3.0/socket.rb:626:in `tcp'
   () RailsInstaller/Ruby2.3.0/lib/ruby/gems/2.3.0/bundler/gems/webpacker-a4132277fdd1/lib/webpacker/dev_server.rb:9:in `running?'
   () RailsInstaller/Ruby2.3.0/lib/ruby/gems/2.3.0/bundler/gems/webpacker-a4132277fdd1/lib/webpacker/manifest.rb:32:in `compiling?'
   () RailsInstaller/Ruby2.3.0/lib/ruby/gems/2.3.0/bundler/gems/webpacker-a4132277fdd1/lib/webpacker/manifest.rb:26:in `lookup'
   () RailsInstaller/Ruby2.3.0/lib/ruby/gems/2.3.0/bundler/gems/webpacker-a4132277fdd1/lib/webpacker/helper.rb:59:in `block in sources_from_pack_manifest'
   () RailsInstaller/Ruby2.3.0/lib/ruby/gems/2.3.0/bundler/gems/webpacker-a4132277fdd1/lib/webpacker/helper.rb:59:in `sources_from_pack_manifest'
   () RailsInstaller/Ruby2.3.0/lib/ruby/gems/2.3.0/bundler/gems/webpacker-a4132277fdd1/lib/webpacker/helper.rb:28:in `javascript_pack_tag'
  app/views/layouts/base.html.haml:34:in `_app_views_layouts_base_html_haml__340835518_88120596'
  actionview (5.1.3) lib/action_view/template.rb:157:in `block in render'
  activesupport (5.1.3) lib/active_support/notifications.rb:168:in `instrument'
  actionview (5.1.3) lib/action_view/template.rb:352:in `instrument_render_template'
  actionview (5.1.3) lib/action_view/template.rb:155:in `render'
  actionview (5.1.3) lib/action_view/renderer/template_renderer.rb:52:in `block (2 levels) in render_template'
  actionview (5.1.3) lib/action_view/renderer/abstract_renderer.rb:42:in `block in instrument'
  activesupport (5.1.3) lib/active_support/notifications.rb:166:in `block in instrument'
  activesupport (5.1.3) lib/active_support/notifications/instrumenter.rb:21:in `instrument'
  activesupport (5.1.3) lib/active_support/notifications.rb:166:in `instrument'
  actionview (5.1.3) lib/action_view/renderer/abstract_renderer.rb:41:in `instrument'
  actionview (5.1.3) lib/action_view/renderer/template_renderer.rb:51:in `block in render_template'
  actionview (5.1.3) lib/action_view/renderer/template_renderer.rb:59:in `render_with_layout'
  actionview (5.1.3) lib/action_view/renderer/template_renderer.rb:50:in `render_template'
  actionview (5.1.3) lib/action_view/renderer/template_renderer.rb:14:in `render'
  actionview (5.1.3) lib/action_view/renderer/renderer.rb:42:in `render_template'
  actionview (5.1.3) lib/action_view/renderer/renderer.rb:23:in `render'
  actionview (5.1.3) lib/action_view/helpers/rendering_helper.rb:32:in `render'
  haml (5.0.2) lib/haml/helpers/action_view_mods.rb:12:in `block in render'
  haml (5.0.2) lib/haml/helpers.rb:92:in `non_haml'
  haml (5.0.2) lib/haml/helpers/action_view_mods.rb:12:in `render'
  app/helpers/components/layout_helper.rb:42:in `extends'
  app/views/layouts/application.html.haml:4:in `_app_views_layouts_application_html_haml___1032874636_89638572'
  actionview (5.1.3) lib/action_view/template.rb:157:in `block in render'
  activesupport (5.1.3) lib/active_support/notifications.rb:168:in `instrument'
  actionview (5.1.3) lib/action_view/template.rb:352:in `instrument_render_template'
  actionview (5.1.3) lib/action_view/template.rb:155:in `render'
  actionview (5.1.3) lib/action_view/renderer/template_renderer.rb:64:in `render_with_layout'
  actionview (5.1.3) lib/action_view/renderer/template_renderer.rb:50:in `render_template'
  actionview (5.1.3) lib/action_view/renderer/template_renderer.rb:14:in `render'
  actionview (5.1.3) lib/action_view/renderer/renderer.rb:42:in `render_template'
  actionview (5.1.3) lib/action_view/renderer/renderer.rb:23:in `render'
  actionview (5.1.3) lib/action_view/rendering.rb:103:in `_render_template'
  actionpack (5.1.3) lib/action_controller/metal/streaming.rb:217:in `_render_template'
  actionview (5.1.3) lib/action_view/rendering.rb:83:in `render_to_body'
  actionpack (5.1.3) lib/action_controller/metal/rendering.rb:52:in `render_to_body'
  actionpack (5.1.3) lib/action_controller/metal/renderers.rb:141:in `render_to_body'
  actionpack (5.1.3) lib/abstract_controller/rendering.rb:24:in `render'
  actionpack (5.1.3) lib/action_controller/metal/rendering.rb:36:in `render'
  actionpack (5.1.3) lib/action_controller/metal/instrumentation.rb:44:in `block (2 levels) in render'
  activesupport (5.1.3) lib/active_support/core_ext/benchmark.rb:12:in `block in ms'
  c:/RailsInstaller/Ruby2.3.0/lib/ruby/2.3.0/benchmark.rb:308:in `realtime'
  activesupport (5.1.3) lib/active_support/core_ext/benchmark.rb:12:in `ms'
  actionpack (5.1.3) lib/action_controller/metal/instrumentation.rb:44:in `block in render'
  actionpack (5.1.3) lib/action_controller/metal/instrumentation.rb:87:in `cleanup_view_runtime'
  activerecord (5.1.3) lib/active_record/railties/controller_runtime.rb:29:in `cleanup_view_runtime'
  actionpack (5.1.3) lib/action_controller/metal/instrumentation.rb:43:in `render'
  turboboost (0.1.1) lib/turboboost/controller.rb:51:in `render'
  actionpack (5.1.3) lib/action_controller/metal/implicit_render.rb:33:in `default_render'
  actionpack (5.1.3) lib/action_controller/metal/basic_implicit_render.rb:4:in `block in send_action'
  actionpack (5.1.3) lib/action_controller/metal/basic_implicit_render.rb:4:in `send_action'
  actionpack (5.1.3) lib/abstract_controller/base.rb:186:in `process_action'
  actionpack (5.1.3) lib/action_controller/metal/rendering.rb:30:in `process_action'
  actionpack (5.1.3) lib/abstract_controller/callbacks.rb:20:in `block in process_action'
  activesupport (5.1.3) lib/active_support/callbacks.rb:131:in `run_callbacks'
  actionpack (5.1.3) lib/abstract_controller/callbacks.rb:19:in `process_action'
  actionpack (5.1.3) lib/action_controller/metal/rescue.rb:20:in `process_action'
  actionpack (5.1.3) lib/action_controller/metal/instrumentation.rb:32:in `block in process_action'
  activesupport (5.1.3) lib/active_support/notifications.rb:166:in `block in instrument'
  activesupport (5.1.3) lib/active_support/notifications/instrumenter.rb:21:in `instrument'
  activesupport (5.1.3) lib/active_support/notifications.rb:166:in `instrument'
  actionpack (5.1.3) lib/action_controller/metal/instrumentation.rb:30:in `process_action'
  actionpack (5.1.3) lib/action_controller/metal/params_wrapper.rb:252:in `process_action'
  activerecord (5.1.3) lib/active_record/railties/controller_runtime.rb:22:in `process_action'
  actionpack (5.1.3) lib/abstract_controller/base.rb:124:in `process'
  actionview (5.1.3) lib/action_view/rendering.rb:30:in `process'
  actionpack (5.1.3) lib/action_controller/metal.rb:189:in `dispatch'
  actionpack (5.1.3) lib/action_controller/metal.rb:253:in `dispatch'
  actionpack (5.1.3) lib/action_dispatch/routing/route_set.rb:49:in `dispatch'
  actionpack (5.1.3) lib/action_dispatch/routing/route_set.rb:31:in `serve'
  actionpack (5.1.3) lib/action_dispatch/journey/router.rb:46:in `block in serve'
  actionpack (5.1.3) lib/action_dispatch/journey/router.rb:33:in `serve'
  actionpack (5.1.3) lib/action_dispatch/routing/route_set.rb:834:in `call'
  omniauth (1.6.1) lib/omniauth/strategy.rb:189:in `call!'
  omniauth (1.6.1) lib/omniauth/strategy.rb:167:in `call'
  omniauth (1.6.1) lib/omniauth/strategy.rb:189:in `call!'
  omniauth (1.6.1) lib/omniauth/strategy.rb:167:in `call'
  omniauth (1.6.1) lib/omniauth/strategy.rb:189:in `call!'
  omniauth (1.6.1) lib/omniauth/strategy.rb:167:in `call'
  omniauth (1.6.1) lib/omniauth/strategy.rb:189:in `call!'
  omniauth (1.6.1) lib/omniauth/strategy.rb:167:in `call'
  omniauth (1.6.1) lib/omniauth/strategy.rb:189:in `call!'
  omniauth (1.6.1) lib/omniauth/strategy.rb:167:in `call'
  omniauth (1.6.1) lib/omniauth/strategy.rb:189:in `call!'
  omniauth (1.6.1) lib/omniauth/strategy.rb:167:in `call'
  omniauth (1.6.1) lib/omniauth/strategy.rb:189:in `call!'
  omniauth (1.6.1) lib/omniauth/strategy.rb:167:in `call'
  omniauth (1.6.1) lib/omniauth/strategy.rb:189:in `call!'
  omniauth (1.6.1) lib/omniauth/strategy.rb:167:in `call'
  omniauth (1.6.1) lib/omniauth/strategy.rb:189:in `call!'
  omniauth (1.6.1) lib/omniauth/strategy.rb:167:in `call'
  omniauth (1.6.1) lib/omniauth/strategy.rb:189:in `call!'
  omniauth (1.6.1) lib/omniauth/strategy.rb:167:in `call'
  omniauth (1.6.1) lib/omniauth/strategy.rb:189:in `call!'
  omniauth (1.6.1) lib/omniauth/strategy.rb:167:in `call'
  omniauth (1.6.1) lib/omniauth/strategy.rb:189:in `call!'
  omniauth (1.6.1) lib/omniauth/strategy.rb:167:in `call'
  rack-attack (5.0.1) lib/rack/attack.rb:147:in `call'
  warden (1.2.7) lib/warden/manager.rb:36:in `block in call'
  warden (1.2.7) lib/warden/manager.rb:35:in `call'
  rack (2.0.3) lib/rack/etag.rb:25:in `call'
  rack (2.0.3) lib/rack/conditional_get.rb:25:in `call'
  rack (2.0.3) lib/rack/head.rb:12:in `call'
  rack (2.0.3) lib/rack/session/abstract/id.rb:232:in `context'
  rack (2.0.3) lib/rack/session/abstract/id.rb:226:in `call'
  actionpack (5.1.3) lib/action_dispatch/middleware/cookies.rb:613:in `call'
  activerecord (5.1.3) lib/active_record/migration.rb:556:in `call'
  actionpack (5.1.3) lib/action_dispatch/middleware/callbacks.rb:26:in `block in call'
  activesupport (5.1.3) lib/active_support/callbacks.rb:97:in `run_callbacks'
  actionpack (5.1.3) lib/action_dispatch/middleware/callbacks.rb:24:in `call'
  actionpack (5.1.3) lib/action_dispatch/middleware/executor.rb:12:in `call'
  better_errors (2.3.0) lib/better_errors/middleware.rb:84:in `protected_app_call'
  better_errors (2.3.0) lib/better_errors/middleware.rb:79:in `better_errors_call'
  better_errors (2.3.0) lib/better_errors/middleware.rb:57:in `call'
  actionpack (5.1.3) lib/action_dispatch/middleware/debug_exceptions.rb:59:in `call'
  web-console (3.5.1) lib/web_console/middleware.rb:135:in `call_app'
  web-console (3.5.1) lib/web_console/middleware.rb:28:in `block in call'
  web-console (3.5.1) lib/web_console/middleware.rb:18:in `call'
  actionpack (5.1.3) lib/action_dispatch/middleware/show_exceptions.rb:31:in `call'
  railties (5.1.3) lib/rails/rack/logger.rb:36:in `call_app'
  railties (5.1.3) lib/rails/rack/logger.rb:24:in `block in call'
  activesupport (5.1.3) lib/active_support/tagged_logging.rb:69:in `block in tagged'
  activesupport (5.1.3) lib/active_support/tagged_logging.rb:26:in `tagged'
  activesupport (5.1.3) lib/active_support/tagged_logging.rb:69:in `tagged'
  railties (5.1.3) lib/rails/rack/logger.rb:24:in `call'
  ahoy_matey (1.6.0) lib/ahoy/engine.rb:22:in `call_with_quiet_ahoy'
  sprockets-rails (3.2.0) lib/sprockets/rails/quiet_assets.rb:13:in `call'
  actionpack (5.1.3) lib/action_dispatch/middleware/remote_ip.rb:79:in `call'
  request_store (1.3.2) lib/request_store/middleware.rb:9:in `call'
  actionpack (5.1.3) lib/action_dispatch/middleware/request_id.rb:25:in `call'
  rack (2.0.3) lib/rack/method_override.rb:22:in `call'
  rack (2.0.3) lib/rack/runtime.rb:22:in `call'
  activesupport (5.1.3) lib/active_support/cache/strategy/local_cache_middleware.rb:27:in `call'
  actionpack (5.1.3) lib/action_dispatch/middleware/executor.rb:12:in `call'
  actionpack (5.1.3) lib/action_dispatch/middleware/static.rb:125:in `call'
  rack (2.0.3) lib/rack/sendfile.rb:111:in `call'
  sentry-raven (2.6.3) lib/raven/integrations/rack.rb:50:in `call'
   () RailsInstaller/Ruby2.3.0/lib/ruby/gems/2.3.0/bundler/gems/webpacker-a4132277fdd1/lib/webpacker/dev_server_proxy.rb:15:in `perform_request'
  rack-proxy (0.6.2) lib/rack/proxy.rb:57:in `call'
  railties (5.1.3) lib/rails/engine.rb:522:in `call'
  puma (3.10.0) lib/puma/configuration.rb:225:in `call'
  puma (3.10.0) lib/puma/server.rb:605:in `handle_request'
  puma (3.10.0) lib/puma/server.rb:437:in `process_client'
  puma (3.10.0) lib/puma/server.rb:301:in `block in run'
  puma (3.10.0) lib/puma/thread_pool.rb:120:in `block in spawn_thread'

[gauravtiwari]

Do you have webpack dev server running?

[gauravtiwari]

Actually, scratch that. It should fetch from file system if dev server is not running. Could you please explain your setup? Like I have these files in packs, this is my webpacker.yml and this is how I am running rails server etc.

[jonhue]

@gauravtiwari

My structure:

• app
  
  
  
  • assets
    
    
    
    
    
    • webpack
      
      
      
      
      
      
      
      • [some files imported into the packs]
      
      
      
      
      • packs
        
        
        
        
        
        
        
        
        
        • application.js
        
        
        
        
        
        • default.sass
        
        
        
        
        
        • dark.sass
        
        
        
        
        
      
      
      
      
    
    
    
  
  
  • views
    
    
    
    
    
    • layouts
      
      
      
      
      
      
      
      • application.html.haml
      
      
      
      
    
    
    
  
  
• bin
  
  
  
  • webpack
  
  
  • webpack-dev-server
  
  
• config
  
  
  
  • webpacker.yml
  
  
• public
  
  
  
  • ...
  
  

---

application.html.haml

= javascript_pack_tag 'application'

---

webpacker.yml

# Note: You must restart bin/webpack-dev-server for changes to take effect

default: &default
  source_path: app/assets/webpack
  source_entry_path: packs
  public_output_path: packs

  extensions:
    - .coffee
    - .erb
    - .js
    - .jsx
    - .ts
    - .vue
    - .sass
    - .scss
    - .css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

development:
  <<: *default

  dev_server:
    host: 0.0.0.0
    port: 8080
    https: false

test:
  <<: *default

  public_output_path: packs-test

production:
  <<: *default

---

To start the rails server I am running rails s with default configuration. In addition I am also not able to start the webpack-dev-server (https://github.com/webpack/webpack-dev-server/issues/1048).

[gauravtiwari]

@jonhue You are using old webpacker.yml.

Could you please run bundle exec rails webpacker:install and replace config and webpacker.yml please?

[jonhue]

@gauravtiwari I ran the command and yes, I had a lot of files to update. It did not fix the issue though. I still get the same error. I did notice, that when attempting to start the dev-server I now get a different exception than beforehand:

$ ./bin/webpack-dev-server

$ Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.entry should be one of these:
   object { <key>: non-empty string | [non-empty string] } | non-empty string | [non-empty string] | function
   The entry point(s) of the compilation.
   Details:
    * configuration.entry should NOT have less than 1 properties ({
        "keyword": "minProperties",
        "dataPath": ".entry",
        "schemaPath": "#/oneOf/0/minProperties",
        "params": {
          "limit": 1
        },
        "message": "should NOT have less than 1 properties",
        "schema": 1,
        "parentSchema": {
          "minProperties": 1,
          "additionalProperties": {
            "oneOf": [
              {
                "description": "The string is resolved to a module which is loaded upon startup.",
                "minLength": 1,
                "type": "string"
              },
              {
                "description": "All modules are loaded upon startup. The last one is exported.",
                "$ref": "#/definitions/common.nonEmptyArrayOfUniqueStringValues"
              }
            ]
          },
          "description": "Multiple entry bundles are created. The key is the chunk name. The value can be a string or an array.",
          "type": "object"
        },
        "data": {}
      }).
      object { <key>: non-empty string | [non-empty string] }
      Multiple entry bundles are created. The key is the chunk name. The value can be a string or an array.
    * configuration.entry should be a string.
    * configuration.entry should be an array:
      [non-empty string]
    * configuration.entry should be an instance of function
      function returning an entry object or a promise..

Perhaps that helps.

[gauravtiwari]

@jonhue Nearly there, please re-update your webpacker.yml to include the changed paths

default: &default
  source_path: app/assets/webpack
  source_entry_path: packs
  public_output_path: packs

[jonhue]

@gauravtiwari I did that already.

[gauravtiwari]

Please double check, the error seems to indicate that there are no entry files in that path:

configuration.entry should be one of these:

[jonhue]

@gauravtiwari I rechecked. I specified app/assets/webpack as source_path. The pack I am including (= javascript_pack_tag 'application') is located in app/assets/webpack/packs/application.js. I also overwrote the contents of application.js while running the installer, so that shouldn't cause any problems.

[gauravtiwari]

@jonhue Have you tried creating a fresh new rails app with new webpacker install? Everything seems to be working fine on my end. BTW, is this app publicly available on your github account?

[jonhue]

@gauravtiwari My app is not publicly available. For test purposes I uploaded this app to GitHub. A full list of issues is in the readme. I find it quite surprising that in the new app, I get the exact manifest error again, because of which I originally created this thread.

[gauravtiwari]

@jonhue Ahh you are using windows - we seemed to have some problems on 2.0 for windows. Will make a PR on your test app.

[gauravtiwari]

@jonhue There you go: https://github.com/jonhue/webpacker_example/pull/1

You are getting the manifest error because the webpack dev server is never run. We had some compatibility issues on windows due to yarn, which got fixed later on master but yet to be released.

[jonhue]

@gauravtiwari Well that's weird. I was already using master in my real app, but after updating it today and reinstalling webpacker, there have been updates to development.js & bin/webpack-dev-server that fixed the issue for me. In both applications.

Thanks a lot for your guidance!

[jonhue]

@gauravtiwari One more question: How can I import yarns dependencies in my javascript?
I tried //= require jquery-ui & import jquery-ui

[gauravtiwari]

@jonhue Yes import 'jquery-ui' should do.

yarn add jquery-ui

Checkout this section for more info: https://github.com/rails/webpacker#module-import-vs-require

[jonhue]

@gauravtiwari And one more :)
Am I able to load rails-ujs, turbolinks, action_cable and other js files provided by gems with webpacker? If not I would have to inlcude their dependencies (like jQuery) twice.

[jonhue]

I think I've found a good solution.

[gauravtiwari]

@jonhue You can find all these modules on npm and add it using yarn :)

[jonhue]

@gauravtiwari That's what I did :D

[Siva-Ganesh-VR]

This may help anyone in the future https://stackoverflow.com/questions/58506351/webpacker-throws-application-css-not-found-in-manifest-json-in-rails-6-applica