All threads / Webpack assets doesn't work after deployment

Ask A Question

Notifications

You’re not receiving notifications from this thread.

Webpack assets doesn't work after deployment

Juan S. Caro asked in General

Hi, I have been using happily rails until I decided to try stimulusJS. In the begining was great. I saw great value using it. The thing is the assets in the pack folder are not compiled when doing "cap production deploy".

Is there something I should do after trying webpack to get all that assets compiled?

Thanks

PD: Since I started my main project with Rails 5.0, I did use the deplyment guide of this page.

Do you want to post more details, like what error you're getting or where you're hosting?

Like Ivan said, more information is important.

For me, I just make sure Yarn is on my server and it automatically compiles during the assets:precompile step. Simple as that.

The error is that the files on the folder webpack are not found. In consequence none of the javascript components are loaded. I have checked yarn is installed in the server.

I have read that there is a couple of gems:

  • capistrano-yarn and capistrano nvm that may help, but just don't want to mess the project installing stuff that I don't know and without knowing what I pursuit.

On the other hand, in config/deploy.rb there is:

# Default value for linked_dirs is []
append :linked_dirs, "log", "tmp/pids", "tmp/cache", "tmp/sockets", "vendor/bundle", "public/system", "public/uploads"

in which isn't include app/javascript/packs.

I don't know if this might be the problem.

You don't need to link app/javascript/packs. During precompile, it will run yarn and output the files in public.

If you're not seeing the files, then it's an issue with your precompile step. Do your capistrano logs show that it's running the precomile and does that step say anything about webpacker?

The error in the inspector is:

Loading failed for the with source “<a href="https://www.guiallerena.es/packs/application-60e1bbc8f51fd696bd2b.js%E2%80%9D" target="_blank" rel="noopener noreferrer nofollow">https://www.guiallerena.es/packs/application-60e1bbc8f51fd696bd2b.js”</a>.</p> <p>** The capistrano deployment said: **</p> <p>yarn:install<br> 01 yarn install --production<br> 01 yarn install v1.12.3<br> 01 warning package.json: No license field<br> 01 warning No license field<br> 01 [1/4] Resolving packages...<br> 01 [2/4] Fetching packages...<br> 01 info <a href="mailto:[email protected]" target="_blank" rel="noopener noreferrer nofollow">[email protected]</a>: The platform &quot;linux&quot; is incompatible with this module.<br> 01 info &quot;<a href="mailto:[email protected]" target="_blank" rel="noopener noreferrer nofollow">[email protected]</a>&quot; is an optional dependency and failed compatibility check. Excluding it from installation.<br> 01 [3/4] Linking dependencies...<br> 01 warning &quot;@rails/webpacker &gt; <a href="mailto:[email protected]" target="_blank" rel="noopener noreferrer nofollow">[email protected]</a>&quot; has unmet peer dependency &quot;[email protected]<sup>1.0.30000697&quot;.</sup><br> 01 warning &quot; &gt; <a href="mailto:[email protected]" target="_blank" rel="noopener noreferrer nofollow">[email protected]</a>&quot; has unmet peer dependency &quot;[email protected]<sup>2.2.0</sup> || <sup>3.0.0&quot;.</sup><br> 01 warning &quot;webpack-dev-server &gt; <a href="mailto:[email protected]" target="_blank" rel="noopener noreferrer nofollow">[email protected]</a>&quot; has unmet peer dependency &quot;[email protected]<sup>1.0.0</sup> || <sup>2.0.0</sup> || <sup>…</sup><br> 01 [4/4] Building fresh packages...<br> 01 Done in 24.61s.<br> ✔ 01 <a href="mailto:[email protected]" target="_blank" rel="noopener noreferrer nofollow">[email protected]</a> 25.239s<br> 01:00 deploy:assets:precompile<br> 01 ~/.rvm/bin/rvm default do bundle exec rake assets:precompile<br> 01 [fog][DEPRECATION] Unable to load Fog::Atmos::Storage<br> 01 [fog][DEPRECATION] The format Fog::Storage::Atmos is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::Clodo::Compute<br> 01 [fog][DEPRECATION] The format Fog::Compute::Clodo is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::DigitalOcean::Compute<br> 01 [fog][DEPRECATION] The format Fog::Compute::DigitalOcean is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::Dnsimple::DNS<br> 01 [fog][DEPRECATION] The format Fog::DNS::Dnsimple is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::DNSMadeEasy::DNS<br> 01 [fog][DEPRECATION] The format Fog::DNS::DNSMadeEasy is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::Fogdocker::Compute<br> 01 [fog][DEPRECATION] The format Fog::Compute::Fogdocker is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::Dreamhost::DNS<br> 01 [fog][DEPRECATION] The format Fog::DNS::Dreamhost is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::Dynect::DNS<br> 01 [fog][DEPRECATION] The format Fog::DNS::Dynect is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::Ecloud::Compute<br> 01 [fog][DEPRECATION] The format Fog::Compute::Ecloud is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::Glesys::Compute<br> 01 [fog][DEPRECATION] The format Fog::Compute::Glesys is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::GoGrid::Compute<br> 01 [fog][DEPRECATION] The format Fog::Compute::GoGrid is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::Google::Compute<br> 01 [fog][DEPRECATION] The format Fog::Compute::Google is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::Google::DNS<br> 01 [fog][DEPRECATION] The format Fog::DNS::Google is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::Google::Storage<br> 01 [fog][DEPRECATION] The format Fog::Storage::Google is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::IBM::Compute<br> 01 [fog][DEPRECATION] The format Fog::Compute::IBM is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::IBM::Storage<br> 01 [fog][DEPRECATION] The format Fog::Storage::IBM is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::InternetArchive::Storage<br> 01 [fog][DEPRECATION] The format Fog::Storage::InternetArchive is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::Linode::Compute<br> 01 [fog][DEPRECATION] The format Fog::Compute::Linode is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::Linode::DNS<br> 01 [fog][DEPRECATION] The format Fog::DNS::Linode is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::BareMetalCloud::Compute<br> 01 [fog][DEPRECATION] The format Fog::Compute::BareMetalCloud is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::Rackspace::CDN<br> 01 [fog][DEPRECATION] The format Fog::CDN::Rackspace is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::Rackspace::CDN v2<br> 01 [fog][DEPRECATION] The format Fog::CDN v2::Rackspace is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::Rackspace::Compute<br> 01 [fog][DEPRECATION] The format Fog::Compute::Rackspace is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::Rackspace::Compute v2<br> 01 [fog][DEPRECATION] The format Fog::Compute v2::Rackspace is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::Rackspace::DNS<br> 01 [fog][DEPRECATION] The format Fog::DNS::Rackspace is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::Rackspace::Storage<br> 01 [fog][DEPRECATION] The format Fog::Storage::Rackspace is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::Rackspace::Databases<br> 01 [fog][DEPRECATION] The format Fog::Databases::Rackspace is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::Rage4::DNS<br> 01 [fog][DEPRECATION] The format Fog::DNS::Rage4 is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::PowerDNS::DNS<br> 01 [fog][DEPRECATION] The format Fog::DNS::PowerDNS is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::ProfitBricks::Compute<br> 01 [fog][DEPRECATION] The format Fog::Compute::ProfitBricks is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::SakuraCloud::Compute<br> 01 [fog][DEPRECATION] The format Fog::Compute::SakuraCloud is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::SakuraCloud::Volume<br> 01 [fog][DEPRECATION] The format Fog::Volume::SakuraCloud is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::SakuraCloud::Network<br> 01 [fog][DEPRECATION] The format Fog::Network::SakuraCloud is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::SakuraCloud::DNS<br> 01 [fog][DEPRECATION] The format Fog::DNS::SakuraCloud is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::Serverlove::Compute<br> 01 [fog][DEPRECATION] The format Fog::Compute::Serverlove is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::Softlayer::Account<br> 01 [fog][DEPRECATION] The format Fog::Account::Softlayer is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::Softlayer::Compute<br> 01 [fog][DEPRECATION] The format Fog::Compute::Softlayer is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::Softlayer::DNS<br> 01 [fog][DEPRECATION] The format Fog::DNS::Softlayer is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::Softlayer::Network<br> 01 [fog][DEPRECATION] The format Fog::Network::Softlayer is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::Softlayer::Storage<br> 01 [fog][DEPRECATION] The format Fog::Storage::Softlayer is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::StormOnDemand::Compute<br> 01 [fog][DEPRECATION] The format Fog::Compute::StormOnDemand is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::StormOnDemand::Network<br> 01 [fog][DEPRECATION] The format Fog::Network::StormOnDemand is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::StormOnDemand::Storage<br> 01 [fog][DEPRECATION] The format Fog::Storage::StormOnDemand is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::StormOnDemand::DNS<br> 01 [fog][DEPRECATION] The format Fog::DNS::StormOnDemand is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::StormOnDemand::Billing<br> 01 [fog][DEPRECATION] The format Fog::Billing::StormOnDemand is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::StormOnDemand::Monitoring<br> 01 [fog][DEPRECATION] The format Fog::Monitoring::StormOnDemand is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::StormOnDemand::Support<br> 01 [fog][DEPRECATION] The format Fog::Support::StormOnDemand is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::StormOnDemand::Account<br> 01 [fog][DEPRECATION] The format Fog::Account::StormOnDemand is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::StormOnDemand::VPN<br> 01 [fog][DEPRECATION] The format Fog::VPN::StormOnDemand is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::Vcloud::Compute<br> 01 [fog][DEPRECATION] The format Fog::Compute::Vcloud is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::VcloudDirector::Compute<br> 01 [fog][DEPRECATION] The format Fog::Compute::VcloudDirector is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::Vmfusion::Compute<br> 01 [fog][DEPRECATION] The format Fog::Compute::Vmfusion is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::Voxel::Compute<br> 01 [fog][DEPRECATION] The format Fog::Compute::Voxel is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::CloudSigma::Compute<br> 01 [fog][DEPRECATION] The format Fog::Compute::CloudSigma is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::Openvz::Compute<br> 01 [fog][DEPRECATION] The format Fog::Compute::Openvz is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::OpenNebula::Compute<br> 01 [fog][DEPRECATION] The format Fog::Compute::OpenNebula is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::Aliyun::Compute<br> 01 [fog][DEPRECATION] The format Fog::Compute::Aliyun is deprecated<br> 01 [fog][DEPRECATION] Unable to load Fog::Aliyun::Storage<br> 01 [fog][DEPRECATION] The format Fog::Storage::Aliyun is deprecated<br> 01 I, [2019-08-05T19:00:50.659805 #9007] INFO -- : Writing /home/deploy/guialocal/releases/20190805165929/public/assets…<br> 01 I, [2019-08-05T19:00:50.661770 #9007] INFO -- : Writing /home/deploy/guialocal/releases/20190805165929/public/assets…<br> 01 I, [2019-08-05T19:00:56.458360 #9007] INFO -- : Writing /home/deploy/guialocal/releases/20190805165929/public/assets…<br> 01 I, [2019-08-05T19:00:56.459467 #9007] INFO -- : Writing /home/deploy/guialocal/releases/20190805165929/public/assets…<br> ✔ 01 <a href="mailto:[email protected]" target="_blank" rel="noopener noreferrer nofollow">[email protected]</a> 31.905s<br> 01:33 deploy:assets:backup_manifest<br> 01 mkdir -p /home/deploy/guialocal/releases/20190805165929/assets_manifest_backup<br> ✔ 01 <a href="mailto:[email protected]" target="_blank" rel="noopener noreferrer nofollow">[email protected]</a> 0.329s<br> 02 cp /home/deploy/guialocal/releases/20190805165929/public/assets/.sprockets-manifest-306a4968608c35e5f7fec8ef7c2a7a3e.…<br> ✔ 02 <a href="mailto:[email protected]" target="_blank" rel="noopener noreferrer nofollow">[email protected]</a> 0.181s</p>

Sorry, I don't know what happened with the format.

This is the capistrano log:

http://www.adeter.org/capistrano.log

and this is the error showed in the browser's inspector:

JS error

Thanks

The JS error link is broken there.

 DEBUG [1885af3e]   yarn install v1.12.3
 DEBUG [1885af3e]   warning package.json: No license field
 DEBUG [1885af3e]   warning No license field
 DEBUG [1885af3e]   [1/4] Resolving packages...
 DEBUG [1885af3e]   [2/4] Fetching packages...
 DEBUG [1885af3e]   info [email protected]: The platform "linux" is incompatible with this module.
 DEBUG [1885af3e]   info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
 DEBUG [1885af3e]   [3/4] Linking dependencies...
 DEBUG [1885af3e]   warning "@rails/webpacker > [email protected]" has unmet peer dependency "[email protected]^1.0.30000697".
 DEBUG [1885af3e]   warning " > [email protected]" has unmet peer dependency "[email protected]^2.2.0 || ^3.0.0".
 DEBUG [1885af3e]   warning "webpack-dev-server > [email protected]" has unmet peer dependency "[email protected]^1.0.0 || ^2.0.0 || ^3.0.0".
 DEBUG [1885af3e]   [4/4] Building fresh packages...
 DEBUG [1885af3e]   Done in 24.61s.

This shows that it's running and compiling your webpack code successfully.

How are you including your packs in your layout?

Please, check again the JS error link. I fix it.

I'm including pack in the layout including this line between < head > and < /head >:

<%= javascript_pack_tag 'application' %>

in the application.html.erb

Okay, looks good. I can see the error now.

On your server, is there the matching filename from the error inside public/packs/ ? Seems like the file compiled successfully, so I would check and make sure the file exists on disk. Then you can tell if it's a configuration issue or something else.

There is not such file in the disk:

Error and file missing

The this is, I'm not sure what to conclude. Was the compilation still a success intead there is no file there?

I made it work again manually (without fixing the problem) by doing:

  1. Yarn upgrade in the server
  2. Entering in the current folder, and executing 'RAILS_ENV=production bundle exec rake webpacker:compile'
  3. Then compiles, and I could see the files in the latest release but I didn't correspond with ones in the folder current.
  4. Then, I did reboot, and it worked.

Could it be that Capistrano is missing something?
Could it be that Capistrano need a reboot to apply some changes in JS? (contents are applied instanly)

Nope, should be nothing to do with Capistrano.

Try running "RAILS_ENV=production bundle exec rake assets:precompile" on the server and confirm it compiles your webpacker assets.

The webpacker:compile step gets appeneded to the precompile, so you never need to run the webpacker command directly.

Thank you for the help, Chris.

It was weird, because I did that, and at times worked and everything loaded fine, and some others don't. I couldn't find specific patters.

I have found a solution that works consistently now, and was adding

set :linked_dirs, fetch(:linked_dirs, []).push('public/packs', 'node_modules')

to config/deploy.rb

Not sure if I was a victim of a very specific case, or did something wrong in the past, but can't understand fully the issue.

Hmm, good to know. I'm not quite sure why that would be required, but at least you got your problem solved.

I haven't had to do that, but maybe there's something with the way your code is requiring things that makes it need that.

Thanks again. I really appreciate your help and the help of the community.

Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 33,665+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2020 GoRails, LLC. All rights reserved.