Shopify_app: Rails 6.0 javascript_include_tag has been removed.

Created on 30 Aug 2019 · 5Comments · Source: Shopify/shopify_app

If I generate a new app with Rails 6.0 and this gem, I get an error on this line:

<%= javascript_include_tag 'application', "data-turbolinks-track" => true %>

on the embedded_app.html.erb file,
since javascript_include_tag has been removed.
The solution is to use javascript_pack_tag so I added the following:

<% if Rails::VERSION::STRING[0].to_f < 6 %>
      <%= javascript_include_tag 'application', "data-turbolinks-track" => true %>
    <% else %>
      <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <% end %>

but javascript_include_tag is in a few places. e.g. in the `redirect.html.erb file, so I am having troubles redirecting as well.

rails6

Source

arialblack14

Most helpful comment

I've added this to me embedded_app.html.erb

Setting up App Bridge seems to get the redirect in.

    <script src="https://unpkg.com/@shopify/app-bridge"></script>
    <script>
      var AppBridge = window['app-bridge'];
      var actions = window['app-bridge'].actions;
      var createApp = AppBridge.default;
      var shopifyConfig = {
        apiKey: "<%= ShopifyApp.configuration.api_key %>",
        shopOrigin: "<%= (@shop_session.url if @shop_session) %>"
      }
      var app = createApp({
        apiKey: "<%= ShopifyApp.configuration.api_key %>",
        shopOrigin: "<%= (@shop_session.url if @shop_session) %>"
      })
    </script>

This is my full embedded_app.html.erb if that helps.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <% application_name = ShopifyApp.configuration.application_name %>
    <title><%= application_name %></title>
    <%= stylesheet_link_tag 'application' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= csrf_meta_tags %>

    <link
      rel="stylesheet"
      href="https://unpkg.com/@shopify/[email protected]/styles.min.css"
      />
  </head>

  <body>
    <div class="app-wrapper">
      <div class="app-content">
        <main role="main">
          <%= yield %>
        </main>
      </div>
    </div>

    <%= render 'layouts/flash_messages' %>

    <%= content_tag(:div, nil, id: 'shopify-app-init', data: {
      api_key: ShopifyApp.configuration.api_key,
      shop_origin: ("https://#{ @shop_session.url }" if @shop_session),
      debug: Rails.env.development?
    } ) %>

    <% if content_for?(:javascript) %>
      <div id="ContentForJavascript" data-turbolinks-temporary>
        <%= yield :javascript %>
      </div>
    <% end %>

    <script src="https://unpkg.com/@shopify/app-bridge"></script>
    <script>
      var AppBridge = window['app-bridge'];
      var actions = window['app-bridge'].actions;
      var createApp = AppBridge.default;
      var shopifyConfig = {
        apiKey: "<%= ShopifyApp.configuration.api_key %>",
        shopOrigin: "<%= (@shop_session.url if @shop_session) %>"
      }
      var app = createApp({
        apiKey: "<%= ShopifyApp.configuration.api_key %>",
        shopOrigin: "<%= (@shop_session.url if @shop_session) %>"
      })
    </script>
  </body>
</html>

dan-gamble on 5 Oct 2019

👍3

All 5 comments

I am facing the same issue. The embedded app is not redirecting on first install. Were you able to fix this?

arjunrajkumar on 5 Oct 2019

No, I have not dealt with this yet but will let you know if I come up with something.

Edit:
Maybe adding something like this on the page after auth callback:

<script type="text/javascript">
    if (window.location.href.indexOf('myshopify') == -1){
        window.top.location.href = 'https://some_shopify_domain.myshopify.com/admin/apps/your_app'; 
    }
</script>

arialblack14 on 5 Oct 2019

I've added this to me embedded_app.html.erb

Setting up App Bridge seems to get the redirect in.

    <script src="https://unpkg.com/@shopify/app-bridge"></script>
    <script>
      var AppBridge = window['app-bridge'];
      var actions = window['app-bridge'].actions;
      var createApp = AppBridge.default;
      var shopifyConfig = {
        apiKey: "<%= ShopifyApp.configuration.api_key %>",
        shopOrigin: "<%= (@shop_session.url if @shop_session) %>"
      }
      var app = createApp({
        apiKey: "<%= ShopifyApp.configuration.api_key %>",
        shopOrigin: "<%= (@shop_session.url if @shop_session) %>"
      })
    </script>

This is my full embedded_app.html.erb if that helps.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <% application_name = ShopifyApp.configuration.application_name %>
    <title><%= application_name %></title>
    <%= stylesheet_link_tag 'application' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= csrf_meta_tags %>

    <link
      rel="stylesheet"
      href="https://unpkg.com/@shopify/[email protected]/styles.min.css"
      />
  </head>

  <body>
    <div class="app-wrapper">
      <div class="app-content">
        <main role="main">
          <%= yield %>
        </main>
      </div>
    </div>

    <%= render 'layouts/flash_messages' %>

    <%= content_tag(:div, nil, id: 'shopify-app-init', data: {
      api_key: ShopifyApp.configuration.api_key,
      shop_origin: ("https://#{ @shop_session.url }" if @shop_session),
      debug: Rails.env.development?
    } ) %>

    <% if content_for?(:javascript) %>
      <div id="ContentForJavascript" data-turbolinks-temporary>
        <%= yield :javascript %>
      </div>
    <% end %>

    <script src="https://unpkg.com/@shopify/app-bridge"></script>
    <script>
      var AppBridge = window['app-bridge'];
      var actions = window['app-bridge'].actions;
      var createApp = AppBridge.default;
      var shopifyConfig = {
        apiKey: "<%= ShopifyApp.configuration.api_key %>",
        shopOrigin: "<%= (@shop_session.url if @shop_session) %>"
      }
      var app = createApp({
        apiKey: "<%= ShopifyApp.configuration.api_key %>",
        shopOrigin: "<%= (@shop_session.url if @shop_session) %>"
      })
    </script>
  </body>
</html>

dan-gamble on 5 Oct 2019

👍3

Hey @dan-gamble -- This works perfect! Thanks.

arjunrajkumar on 6 Oct 2019

👍1

This should be fixed now, we have compatible generators