Webpacker doesn’t compile files in packs-test for test env

[hegwin]

My environments:

• Ruby 2.5.1p57
• Rails 5.2.0
• Webpacker: 3.5.3
• Node: v8.11.1
• Yarn: 1.6.0
• Rspec 3.7.1

When I ran a spec/request test locally, I got an error:

     Failure/Error: <%= stylesheet_pack_tag 'application', media: 'all' %>

     ActionView::Template::Error:
       Webpacker can’t find application.css in <APP_PATH>/public/packs-test/manifest.json. Possible causes:
       1. You want to set webpacker.yml value of compile to true for your environment
          unless you are using the `webpack -w` or the webpack-dev-server.
       2. webpack has not yet re-run to reflect updates.
       3. You have misconfigured Webpacker's config/webpacker.yml file.
       4. Your webpack configuration is not creating a manifest.
       Your manifest contains:
       {
       }

I checked the possible causes it noticed one by one.

Here is my config/webpacker.yml, and I think it’s OK.

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

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_output_path: packs
  cache_path: tmp/cache/webpacker

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: []

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  extensions:
    - .js
    - .sass
    - .scss
    - .css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: false
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: /node_modules/

test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Cache manifest.json for performance
  cache_manifest: true

As it said Webpacker can’t find application.css in public/packs-test/manifest.json, I tried to find this file, but I didn’t even have public/packs-test directory.

I tried to search the information for this issue, and I had a look in #194. Then I noticed something interesting.

When I ran RAILS_ENV=test bundle exec rails webpacker:compile, it said:

Webpacker is installed 🎉 🍰
Using <APP_PATH>/config/webpacker.yml file for setting up webpack paths
Compiling…
Compiled all packs in <APP_PATH>/public/packs-test

However, it didn’t compile files to public/packs-test, but to /public/packs instead. Then I tried RAILS_ENV=test NODE_ENV=test bundle exec rails webpacker:compile and got the same result.

I moved files created in packs to packs-test, then my spec passed.

Is there anything wrong with my configuartion?

[gauravtiwari]

@hegwin Configuration looks correct to me. Could you please do? rm -rf public/packs*/ and then run the compilation task againRAILS_ENV=test bundle exec rails webpacker:compile`. Seems to compile fine for me.

BTW, is this an old app? Have you updated the binstubs? bundle exec rails webpacker:binstubs

[hegwin]

Hi @gauravtiwari Thank you.

I followed your steps:

➜ rm -rf public/packs*/

➜ RAILS_ENV=test bundle exec rails webpacker:compile
Webpacker is installed 🎉 🍰
Using /Users/xiao.wang/Workspace/rails_projects/sesame_credit/config/webpacker.yml file for setting up webpack paths
Compiling…
Compiled all packs in <APP_PATH>/public/packs-test

I still have this issue, it created a directory packs in public. There is no public/packs-test.

This is not an old app. It is created with Rails 5.2.0.rc1, and we just upgraded it to 5.2.0. I ran bundle exec rails webpacker:binstubs and it said:

Copying binstubs
       exist  bin
   identical  bin/webpack
   identical  bin/webpack-dev-server

[gauravtiwari]

@hegwin You could remove the existing binstubs rm -rf bin/webpack* and then re-run the compilation command. See if that makes any difference :) (anyway ignore this one)

[gauravtiwari]

It's strange though that it says it has compiled the packs in packs-test but the files aren't there.

[gauravtiwari]

Could you please make a new app and see if you reproduce this issue? Also, what version of webpacker you have in package.json and Gemfile? Could you please update both to latest version?

yarn add @rails/webpacker
bundle update webpacker

[hegwin]

It is fixed this time.

➜ rm -rf bin/webpack*

➜ RAILS_ENV=test bundle exec rails webpacker:compile
webpack binstubs not found.
Have you run rails webpacker:install ?
Make sure the bin directory or binstubs are not included in .gitignore
Exiting!

➜ rails webpacker:install
    conflict  config/webpacker.yml
Overwrite <APP_PATH>/config/webpacker.yml? (enter "h" for help) [Ynaqdh] n
        skip  config/webpacker.yml
Copying webpack core config
       exist  config/webpack
    conflict  config/webpack/development.js
Overwrite <APP_PATH>/config/webpack/development.js? (enter "h" for help) [Ynaqdh] n
        skip  config/webpack/development.js
   identical  config/webpack/environment.js
    conflict  config/webpack/production.js
Overwrite <APP_PATH>/config/webpack/production.js? (enter "h" for help) [Ynaqdh] n
        skip  config/webpack/production.js
    conflict  config/webpack/test.js
Overwrite <APP_PATH>/config/webpack/test.js? (enter "h" for help) [Ynaqdh] n
        skip  config/webpack/test.js
Copying .postcssrc.yml to app root directory
   identical  .postcssrc.yml
Copying .babelrc to app root directory
   identical  .babelrc
Creating JavaScript app source directory
       exist  app/javascript
    conflict  app/javascript/packs/application.js
Overwrite <APP_PATH>/app/javascript/packs/application.js? (enter "h" for help) [Ynaqdh] n
        skip  app/javascript/packs/application.js
       apply  ~/.rvm/gems/ruby-2.5.1/gems/webpacker-3.5.3/lib/install/binstubs.rb
  Copying binstubs
       exist    bin
      create    bin/webpack
      create    bin/webpack-dev-server
Adding configurations
      append  .gitignore
Installing all JavaScript dependencies
         run  yarn add @rails/webpacker@3.5 --tilde from "."
yarn add v1.6.0
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > bootstrap@4.0.0" has unmet peer dependency "jquery@1.9.1 - 3".
warning " > bootstrap@4.0.0" has unmet peer dependency "popper.js@^1.12.9".
warning " > webpack-dev-server@2.11.1" has unmet peer dependency "webpack@^2.2.0 || ^3.0.0".
warning "webpack-dev-server > webpack-dev-middleware@1.12.2" has unmet peer dependency "webpack@^1.0.0 || ^2.0.0 || ^3.0.0".
warning "@rails/webpacker > postcss-cssnext@3.1.0" has unmet peer dependency "caniuse-lite@^1.0.30000697".
[4/4] 📃  Building fresh packages...
success Saved lockfile.
success Saved 22 new dependencies.
…
…
…
You need to allow webpack-dev-server host as allowed origin for connect-src.
This can be done in Rails 5.2+ for development environment in the CSP initializer
config/initializers/content_security_policy.rb with a snippet like this:
policy.connect_src :self, :https, "http://localhost:3035", "ws://localhost:3035" if Rails.env.development?
Webpacker successfully installed 🎉 🍰

➜  RAILS_ENV=test bundle exec rails webpacker:compile
Webpacker is installed 🎉 🍰
Using <APP_PATH>/config/webpacker.yml file for setting up webpack paths
Compiling…
Compiled all packs in <APP_PATH>/public/packs-test

Now I have public/packs-test directory with files compiled in it.

According to the change in yarn.lock, @rails/webpacker@^3.2.1 was replaced with ”@rails/webpacker@3.5”, webpack@^3.10.0 was replaced with webpack@^3.11.0.

[gauravtiwari]

Great 👍 glad it's fixed

[hegwin]

Thank you for your help!

[stereoscott]

For some reason I ran into the same issue this morning; rm -rf bin/webpack* fixed it for me. Thank you both!

[skyksandr]

Hey guys! You helped me a lot. Especially @hegwin post about upgrading versions. I've upgraded @rail/webpacker and webpack and everything works as before.

[Japestrale]

I've also recently run into the same issue and removing and re-installing webpack fixed things for me

[ernsheong]

None of the above seems to be working for me. :/

[sevenseacat]

Yep, nothing working here either. Everything is output to public/packs - but public/packs/manifest.json refers to /packs-test which of course doesn't exist so the files aren't found :/

[gauravtiwari]

@sevenseacat Could you please paste your webpacker.yml?

[sevenseacat]

Never mind, I've found my problem in some of the JS config another dev wrote :D

To other people that may come across this - check if you're setting environment.config.output anywhere in your JS config!

[ernsheong]

This seems to be working fine now. Can someone else confirm?

(Webpacker 3.5.5)

[MrHubble]

@ernsheong I think this issue can be closed. I ran into the problem when trying to run my tests on CodeShip and following the above allowed it to work for me also.

[fkasiri]

I did the following and couldn't get it to work: rails webpacker:install rbenv: yarn: command not found Yarn not installed. Please download and install Yarn from https://yarnpkg.com/lang/en/docs/install/

I did yarn install and update with brew which installs yarn 1.12.3, then i try rails webpacker:install i get rbenv: yarn: command not found

try rake db:migrate and keep getting the rbenv: yarn: command not found

[sfcooper]

After the best part of a day scratching around on this same issue, RAILS_ENV=test bundle exec rails webpacker:compile just solved it for me.

[zernie]

This is still happening for me with 4.0.0.rc8. All the suggestions above are not helpful (except for manually renaming public/packs to public/packs-test)

[smcalilly]

Curious if anybody else has this problem with Rails after working with React? I started following a React curriculum yesterday and can't remember what exactly I changed. Today I woke up to work on my Rails app and now the webpacker is broken...could these be related or is the npm webpack an entirely different entity?

[jbasdf]

Make sure that any entry point you specify with javascript_pack_tag or javascript_packs_with_chunks_tag exists in app/javascript/packs. I've had misspelled or non-exist values lock up rspec. (Your application will also be broken).

[ramhoj]

In case it helps someone else:

Following @hegwin advice at present date I had to lock @rails/webpacker to ^3.5 and webpack-dev-server to ^3.0.0 or I got an error complaining that UglifyJs wasn't found.

[jakeNiemiec]

@ramhoj This is probably because UglifyJs was deprecated and removed in later versions. Can you post the error you get when upgrading?

[Furqanameen]

Compiling… Compilation failed:

Hash: 68c50c1e7d4816d5b5a1 Version: webpack 4.39.3 Time: 6661ms Built at: 09/05/2019 4:21:26 PM 351 assets still getting same issues last 2 days anyone's can suggest me any solution..?

[ramhoj]

@jakeNiemiec I'm sorry but I don't have exact error saved. However I should add that I got the error while upgrading from rails 5.2.0.rc2 to 5.2.0. Once I completed our upgrade to 6.0.0 I was able to update webpacker to 4.x without any problems.

[KingsleyMcSimon]

@gauravtiwari, thanks a whole lot, your response on updating to the latest version of webpacker and updating it really helped me out!

[ConstanceCodingCamp]

found this resolve via stackoverflow and boy am I glad about it.

Additionally, once I removed line #10 (which auto installed) from my ‘application.html.erb’ file ran: localhost:3000/home/index and Eureka! up again. lol for now anyway.

Cheers to research and resolutions.

[benkoshy]

For anyone interested, after following the instructions outlined here: https://github.com/rails/webpacker/issues/1494#issuecomment-387983677 things still didn't work, but curiously, when I ran:

1. spring stop
2. rails s
3. ./bin/webpack-dev-server

Everything magically worked. No idea why spring stop did the job.

[S-Toky]

Bonjour à tous, j'ai rencontré aussi la même problème, mais j'ai réussi à la résoudre en faisant la commande suivante. rails webpacker:install

[lrworth]

Nobody's mentioned this yet, but the rails defaults seem to send test log output to log/test.log. Notably, webpack may be putting some enormously helpful information there.

In our CI environment this behaviour obscured a completely unexpected problem, which was made visible by adding

  config.logger = Logger.new(STDOUT)

to config/environments/test.rb

Ideally webpacker's "possible causes" list would direct people to look at the actual output from webpack, wherever that may be.

[alexander-storozhenko]

I had some error in config/webpacker.yml in ubuntu. Maybe ubuntu and os x are different in this regard... I pasted that config and it works for me!

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

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_root_path: public
  public_output_path: packs
  cache_path: tmp/cache/webpacker
  check_yarn_integrity: false
  webpack_compile_output: true

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: ['app/assets']

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  # Extract and emit a css file
  extract_css: false

  static_assets_extensions:
    - .jpg
    - .jpeg
    - .png
    - .gif
    - .tiff
    - .ico
    - .svg
    - .eot
    - .otf
    - .ttf
    - .woff
    - .woff2

  extensions:
    - .jsx
    - .mjs
    - .js
    - .sass
    - .scss
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

development:
  <<: *default
  compile: true

  # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
  check_yarn_integrity: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: false
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    pretty: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: '**/node_modules/**'

test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Extract and emit a css file
  extract_css: true

  # Cache manifest.json for performance
  cache_manifest: true

[immakdas]

The @benkoshy solution resolve issues for me. spring stop did some magick. Reinstalling webpack, restarting servers, restoring backup was not effective. Spring stop fixed the javascript heap out of memory error on compile