diff --git a/app/javascript/i18n.js.erb b/app/javascript/i18n.js.erb
index 4c45aa88..3c079cd3 100644
--- a/app/javascript/i18n.js.erb
+++ b/app/javascript/i18n.js.erb
@@ -1,7 +1,8 @@
-import I18n from 'i18n-js';
+const I18n = require('i18n-js');
 
-I18n.translations || (I18n.translations = {});
+I18n.translations = I18n.translations || {};
 <% I18n::JS::translations.each do |k,v| %>
 <% byebug %>
-I18n.translations[<%= k %>] = I18n.extend((I18n.translations[<%= k %>] || {}),<%= JSON.generate(v) %>);
-<% end %>
\ No newline at end of file
+I18n.translations['<%= k %>'] = I18n.extend((I18n.translations['<%= k %>'] || {}),<%= JSON.generate(v) %>);
+<% end %>
+module.exports = I18n;
\ No newline at end of file
diff --git a/app/views/layouts/apified.html.erb b/app/views/layouts/apified.html.erb
index f5ffbf51..6dc8f0dd 100644
--- a/app/views/layouts/apified.html.erb
+++ b/app/views/layouts/apified.html.erb
@@ -6,8 +6,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title><%= "#{yield(:title)} - #{Settings.general.name}" %></title>
   <script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,Intl.~locale.en"></script>
-  <%= IncludeAsset.js '/client/js/i18n.js' %>
   <script>
+      window.I18n = {}
       I18n.defaultLocale = "<%= I18n.default_locale %>"
       I18n.locale = "<%= I18n.locale %>"
       window._csrf = "<%= form_authenticity_token %>"
@@ -25,10 +25,6 @@
 </head>
 <body class="<%= @theme == 'minimal' ? 'minimal' : nil %>">
 <%= render 'layouts/apified_header' %>
-<%= IncludeAsset.js '/app/loading_indicator.js' %>
-<%= IncludeAsset.js '/app/react.js' %>
-<%= IncludeAsset.js '/app/react-dom.js' %>
-<%= IncludeAsset.js '/app/vendor.js' %>
 <%= yield :javascripts %>
 <div class="site-content" role="main">
   <%= yield %>
diff --git a/app/views/onboard/index.html.erb b/app/views/onboard/index.html.erb
index d874b5c7..5b81d798 100644
--- a/app/views/onboard/index.html.erb
+++ b/app/views/onboard/index.html.erb
@@ -1,6 +1,6 @@
 <% content_for :title, t("registration.get_started.header") %>
 <% content_for :javascripts do %>
-  <%= IncludeAsset.js '/app/registration_pagex.js' %>
+  <%= javascript_pack_tag 'loading_indicator', 'i18n', 'registration_page' %>
 <% end %>
 
 <div id="outlet"></div>
diff --git a/javascripts/src/components/common/Root.tsx b/javascripts/src/components/common/Root.tsx
index 958cc323..36021130 100644
--- a/javascripts/src/components/common/Root.tsx
+++ b/javascripts/src/components/common/Root.tsx
@@ -12,7 +12,7 @@ import * as CustomAPIS from "../../lib/apis"
 const enLocaleData = require('react-intl/locale-data/en');
 const I18n = require('../../../../app/javascript/i18n.js.erb')
 const localeData = [...enLocaleData]
-I18n.translations.keys().filter((i:string) => i !== 'en').each((i:string) => {
+Object.keys(I18n.translations).filter((i:string) => i !== 'en').forEach((i:string) => {
   const data  = [...require(`react-intl/locale-data/${i}`)]
   localeData.concat(data)
 })
