Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Adding Bootstrap 4 doesn't work with Shopify_App version 11.3 #817

Closed
AfolabiOlaoluwa opened this issue Nov 13, 2019 · 4 comments
Closed

Adding Bootstrap 4 doesn't work with Shopify_App version 11.3 #817

AfolabiOlaoluwa opened this issue Nov 13, 2019 · 4 comments

Comments

@AfolabiOlaoluwa
Copy link

Dependency Issues

Often in my application.html.erb file in Rails 6 this is what I have below:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= content_for?(:title) ? yield(:title) : "Whatever" %></title>
    <meta name="description" content="<%= content_for?(:description) ? yield(:description) : "Template" %>">
    <%= 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>
  <header>
    <%= render 'shared/navbar' %>
  </header>
    <%= yield %>
  </body>
</html>

But after installing Shopify_App to my Rails 6 application for Shopify's Embedded App, I figured out it comes with another layout aside application.html.erb which is called embeded_app.html.erb. So when I add stylesheet_pack_tag and stylesheet_link_tag under the if ShopifyApp.use_webpacker? I get 500 error on production and the app won't work.

<%= stylesheet_link_tag 'application' %>

<% if ShopifyApp.use_webpacker? %>
      <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<% else %>
      <%= javascript_include_tag 'application', "data-turbolinks-track" => true %>
<% end %>

So if I add the following under the if ShopifyApp.use_webpacker? I get 500 Error on production because it couldn't process it

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

For adding bootstrap to webpacker here is my configuration

Install bootstrap through Yarn, then config/webpack/environment.rb

const { environment } = require('@rails/webpacker')

const webpack = require("webpack")
environment.plugins.append("Provide", new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default']
}))

environment.config.set('resolve.alias', {jquery: 'jquery/src/jquery'});
module.exports = environment

Inside app/javascript/packs/src, I created a file called application.scss and in it I have @import '~bootstrap/scss/bootstrap';.

Then inside app/javascript/packs/application.js file, I made my imports as written below.

import 'bootstrap'
import './src/application.scss'

How can I stick to my configurations with webpack by adding
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
and
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
under if ShopifyApp.use_webpacker? inside emmbeded.html.erb and my app works productively without errors? Adding it can't process those two additions and results to 500 Error.
@AfolabiOlaoluwa AfolabiOlaoluwa mentioned this issue Dec 3, 2019
Closed
@ziaulrehman40
Copy link

Getting 500 error is not very helpful, provide full error stack trace and message for any possible help.

@AfolabiOlaoluwa
Copy link
Author

AfolabiOlaoluwa commented Dec 3, 2019 •
edited

Yes it just couldn't find any precompiled assets related to stylesheet_link_tag and stylesheet_pack_tag. If I could get it to load Rails 6 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> and <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> in webpack, I surely will not have that 500 error it fires because it couldn't get anything related to stylesheet_pack_tag and stylesheet_link_tag

@AfolabiOlaoluwa
Copy link
Author

AfolabiOlaoluwa commented Dec 3, 2019 •
edited

@ziaulrehman40 all I need to call the issue a day is just to have my this inside embedded.html.erb which wasn't possible..

<% if ShopifyApp.use_webpacker? %>
    <%= 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' %>
<% else %>

I will try that again so as to post the error message here too. The app just won't run immediately you add stylesheet_link_tag and stylesheet_pack_tag, and push to production or run in production mode, it surely fires a 500 error.

@tanema
Copy link
Contributor

tanema commented Feb 5, 2020

Hello @AfolabiOlaoluwa did you end up solving this? This looks like an issue with how you are using the stylesheet tags

If you are using webpacker then you should be using stylesheet_pack_tag and not stylesheet_link_tag.

@tanema tanema closed this as completed Feb 5, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@tanema @AfolabiOlaoluwa @ziaulrehman40