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...
Related
There are two pieces of my application that seem to require that I load my javascript at different points.
Omniauth works when I place <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' within <head></head>.
Shubox (js library used to upload photos) works when I place <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' just before </body>.
Each of the two does not work when the javascript is loaded where the other requires. So, if I place the javascript line at the end of the body, omniauth does not work.
I can provide additional information if needed. Thank you in advance.
application.js
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
require("channels")
application.html.erb
<html>
<head>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
</head>
<body data-shubox="<%= Rails.application.credentials.dig(:aws, :secret_access_key) %>">
<% if flash.any? %>
<% flash.each do |key, value| -%>
<section class="flash flash__<%= key %>"><%= value.html_safe %></section>
<% end -%>
<% end %>
<%= yield %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</body>
</html>
Because of Turbolinks your application.js needs to be in the head tag, otherwise it is evaluated twice . This can cause a problem with libraries that expect your DOM to be loaded when you initialize them - which I think is your problem with shubox.
So you should put something like this in your application.js (if you are using Turbolinks 5, for earlier version the event is called page:load)
$(document).on('turbolinks:load',() => {
new Shubox('#avatar', { key: "abcde-qwerty-12345" })
}
);
You can always create 2 packs if you need them in different places:
javascript/packs/the_one_with_turbolink.js
javascript/packs/the_one_with_shubox.js
then you can do
javascript_pack_tag :the_one_with_turbolinks
and
javascript_pack_tag :the_one_with_shubox
I've got a Rails app that repeats packages if I go back to the page that's supposed to render them.
For instance, my OwlCarousel with two images will multiply and have the carousel navigation superimposed on top of the previous one.
Brief GIF to explain
#app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>CRISPR Citrus</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>
#app/javascript/packs/application.js
import Rails from "#rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "#rails/activestorage"
import "channels"
require("jquery");
import '#popperjs/core'
//Owl Carousel
import "../js/owlcarousel"
Rails.start()
Turbolinks.start()
ActiveStorage.start()
#app/javascript/js/owlcarousel.js
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel';
import "owl.carousel/dist/assets/owl.theme.default.min.css"
$( document ).on('turbolinks:load', function() {
$(function () {
$('.owl-carousel').owlCarousel(
{
items: 1,
loop: true,
autoplay: true
}
);
});
})
#owl carousel is simply called like this:
<div class="owl-carousel owl-theme owl-theme-dark">
<%= image_tag "tmp/test_genotyping.png", alt:"", width:""%>
<%= image_tag "tmp/test_genotyping.png", alt:"", width:""%>
</div>
I think maybe OwlCarousel has a way to destroy itself before reloading, which I could add in owlcarousel.js but I think that would be a way to "patch" an ongoing issue. Is this supposed to happen?
Issue persits
If anyone reads the post in the future, this was the solution I found.
Simply add:
#in app/views/layouts/application.html.erb
<head>
...
<meta name="turbolinks-cache-control" content="no-cache">
...
</head>
I couldn't make it work for specific view, so I simply did it for every view in the app. If anyone knows how to implement it directly within a view, I'm interested.
I'm not an expert when it comes to rails, my app was working fine but suddenly when i reload any page, at the first milliseconds it shows no compiled css and then everything is fine .
I don't how to explain it really well but it bugs me every-time i reload the page .
Anyone have encountered this problem or have a fix to it ?
app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= render 'shared/flash_messages' %>
<%= render 'shared/navbar' %>
<main class="container-fluid">
<%= content_for?(:content) ? yield(:content) : yield %>
</main>
</body>
</html>
app/javascript/packs/application.js
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
require("channels")
require("stylesheets/application")
import "bootstrap"
app/javascript/stylesheets/application.scss
$theme-colors: (
"primary": #4299E1,
// Gray colors
"gray-100": #F7FAFC,
"gray-200": #EDF2F7,
"gray-300": #E2E8F0,
"gray-400": #CBD5E0,
"gray-500": #A0AEC0,
"gray-600": #718096,
"gray-700": #4A5568,
"gray-800": #2D3748,
"gray-900": #1A202C,
// Blue Colors
"blue-100": #EBF8FF,
"blue-200": #BEE3F8,
"blue-300": #90CDF4,
"blue-400": #63B3ED,
"blue-500": #4299E1,
"blue-600": #3182CE,
"blue-700": #2B6CB0,
"blue-800": #2C5282,
"blue-900": #2A4365,
// Red colors
"red-100": #FDEEEE,
"red-200": #FAD4D5,
"red-300": #F7B9BB,
"red-400": #F28589,
"red-500": #EC5156,
"red-600": #D4494D,
"red-700": #8E3134,
"red-800": #6A2427,
"red-900": #47181A,
// Green colors
"green-100": #EFF9F4,
"green-200": #D7F1E4,
"green-300": #BEE9D4,
"green-400": #8ED8B3,
"green-500": #5DC793,
"green-600": #54B384,
"green-700": #387758,
"green-800": #2A5A42,
"green-900": #1C3C2C,
);
#import '~bootstrap/scss/bootstrap';
The problem was with webpacker i was using bootstrap with webpacker, instead i have switch to the bootstrap-rubygem and it's working well .
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.
I just created a sample Rails project running in Windows and ran rails s, which ran fine for setup. Later, I created a resource called resources :crm and generated the necessary components. I ran into this error that is quite bugging me much. I tried degrading ExecJS but no avail. I also installed Node.js, but that didn't work either. Here is the error log:
Showing C:/Users/Rodrigo Argumedo/projects/CRM/app/views/layouts/application.html.erb where line #6 raised:
No such file or directory # unlink_internal - C:/Users/Rodrigo Argumedo/AppData/Local/Temp/execjs20150622-2296-sj99kvjson
Rails.root: C:/Users/Rodrigo Argumedo/projects/CRM
Is there a solution to this? If so, guide me where to fix this particular error?
EDIT:
Application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Sample Rails</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
It turns out it was a ExecJS problem and forced to run bundle install -f to reinstall the gems and it worked again.