Webpacker manifest empty, styles load after - ruby-on-rails

When I try accessing a page from my website deployed on Heroku, I get the error:
ActionView::Template::Error (Webpacker can't find application.js in /app/public/packs/manifest.json`
Here is the solution it shows me:
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:
{
}
):
8: <%= stylesheet_pack_tag "application", media: 'all', 'data-turbolinks-track': 'reload' %>
9: <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
10:
11: <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
12: <script src="https://js.stripe.com/v3/"></script>
13:
14: <%= favicon_link_tag asset_path('favicon.ico') %>
What looks surprising to me is that there seems to be something in the manifest, but it only get's added after the brackets. Would love to see if someone can tell me if this is the issue here and how to fix it.

Try running this after you copy files:
bundle exec rake assets:precompile
I was overwriting manifest.json with an empty one.

Related

Application javascript file cannot be found in Rails 5 app

I am having some issues loading jQuery in my Rails 5 app and I noticed that in my application.html.erb where I have the line:
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
It renders in production as:
<script src="/assets/application-6ae626540db9f70a95910bd840e1005a357fae74302f0d8866bd4da5fd67d6cc.js" data-turbolinks-track="reload"></script>
with a 404 error, not found. I recently moved to Rails 5 but I am used to seeing all the assets listed there. Am I missing something?

Stylesheets not working after Rails app pushed to Heroku

I changed my rails app to production mode then deployed it to Heroku and found that the assets apparently weren't being accessed in production mode. I was able to solve this issue by precompiling the assets, but now after changing something then pushing to Heroku I'm back to square one and css and bootstrap are not working. All the links in my head look like this:
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'style', media: 'all', 'data-turbolinks-track':
'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> .
</script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> .
</script>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display"
rel="stylesheet">
It seems the stylesheets are not loading for some reason, but most of the images are, so I guess it's not all of the assets. I've tried to find a clue to the issue by looking in the logs, but I can't recognise anything amiss. Please help with suggestions, I'm not sure what to try next, thanks :-)
In your stylesheet link tag, try changing 'style' to 'application'
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
By loading in the application stylesheet you are loading in all custom stylesheets as well, as long as you have:
*= require_tree .
*= require_self
included in the application.scss file.
http://guides.rubyonrails.org/asset_pipeline.html#in-production
Please use before deploy app into Heroku
rake assets:precompile
then
git add .
git commit -m "some"
git push heroku master

Get 'Zone already loaded' error in Rails + webpack + angular 2 initial setup

I used following specifications.
1) rails 5.1.3
2) ruby 2.4.1
3) rail with webpacker
4) Angular 4.3.4 with webpacker (Typescript)
I create new rail app using command rails new my-rails-app --webpack-angular.
Folder structure
After that, as per instruction under app/javascript/packs/application.js and app/javascript/packs/hello_angular.js, I added <%= javascript_pack_tag 'application' %> in application.html.erb to head tag next after javascript_include_tag.
Also add below markup to body tag in layout application.html.erb
// <hello-angular>Loading...</hello-angular>
//
// <%= javascript_pack_tag 'hello_angular' %>
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>AngularOnRailsWithWebpack</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application' %>
</head>
<body>
<hello-angular>Loading...</hello-angular>
<%= javascript_pack_tag 'hello_angular' %>
<%= yield %>
</body>
</html>
Now create new scaffolding by running rails g scafolld post title:string desc:text and set post index page as root path
Now run rails server by running rails s and webpack server by running ./bin/webpack-dev-server
Works fine.
But When I navigate routes by click on new post or edit post it fire errors in web console like below.
Solution I tried
1) Remove javascript_include_tag from application.html.erb. But it will remove turbolink. I don't want to remove that.
2) Restore javascript_include_tag and update index.ts under app/javascript/hello-angular/index.ts. Add turbolink load event as per this video instruction https://www.youtube.com/watch?v=lGToT9RyDxc
Index.ts
import './polyfills.ts';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
document.addEventListener('turbolinks:load', () => {
platformBrowserDynamic().bootstrapModule(AppModule);
})
Work fine. It will render code fine but still same zone error in web console.
May be this is rails issue. If so then I hope it will resolve in next patch release.
Can any one help that how to resolve this issue ? What I am doing wrong.

Cannot load javascript module in rails 5.1

I am trying to load a simple vue module in my layout application file
but the app is failing to load the module. I am using the webpacker gem with rails 5.1.1. and ruby version 2.3.3
Here is my code
<!DOCTYPE html>
<html>
<head>
<title>Potato</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'hello_vue' %>
<%= stylesheet_pack_tag 'hello_vue' %>
</head>
<body>
<%= yield %>
</body>
</html>
The hello_vue.js file (see code below) is located in the javascript/packs directory and it's importing a very basic hello.vue file also located the same directory:
import Vue from 'vue'
import App from './app.vue'
document.addEventListener('DOMContentLoaded', () => {
document.body.appendChild(document.createElement('hello'))
const app = new Vue(App).$mount('hello')
console.log(app)
})
I've tried to restart the rails server and the webpack-dev-server but nothing...
the app seems just to ignore the file.
I've generated a controller Pages with an index action and now it's working...

Twitter Bootstrap Error Using Less

Following this video
After generating the app, scaffolding, updating gemfile, running bundle install, and running rails server, getting ERROR.
Am using the gem
'twitter-bootstrap-rails'
, is there a reason why it is having an issue with "less?" =>
ActionView::Template::Error (cannot load such file -- less (in
/Users/ryanmindigo/store/app/assets/stylesheets/bootstrap_and_overrides.css.less)):
2: <html>
3: <head>
4: <title>Store</title>
5: <%= stylesheet_link_tag "application", :media => "all" %>
6: <%= javascript_include_tag "application" %>
7: <%= csrf_meta_tags %>
8: </head>
app/views/layouts/application.html.erb:5:in `_app_views_layouts_application_html_erb__2789023687141131830_70195710799000'
app/controllers/products_controller.rb:7:in `index'
Deleting the bootstrap_and_overrides.css.less file, may not be necessary with updated gem. Please comment if a new error appears so we could see some more.

Resources