diff --git a/app/assets/javascripts/diff_notes/diff_notes_bundle.js b/app/assets/javascripts/diff_notes/diff_notes_bundle.js
index e0422057090..38c42a11b4e 100644
--- a/app/assets/javascripts/diff_notes/diff_notes_bundle.js
+++ b/app/assets/javascripts/diff_notes/diff_notes_bundle.js
@@ -15,7 +15,7 @@ import './components/resolve_discussion_btn';
 import './components/diff_note_avatars';
 import './components/new_issue_for_discussion';
 
-$(() => {
+export default () => {
   const projectPathHolder = document.querySelector('.merge-request') || document.querySelector('.commit-box');
   const projectPath = projectPathHolder.dataset.projectPath;
   const COMPONENT_SELECTOR = 'resolve-btn, resolve-discussion-btn, jump-to-discussion, comment-and-resolve-btn, new-issue-for-discussion-btn';
@@ -75,4 +75,4 @@ $(() => {
   });
 
   $(window).trigger('resize.nav');
-});
+};
diff --git a/app/assets/javascripts/how_to_merge.js b/app/assets/javascripts/how_to_merge.js
index 19f4a946f73..12e6f24595a 100644
--- a/app/assets/javascripts/how_to_merge.js
+++ b/app/assets/javascripts/how_to_merge.js
@@ -1,12 +1,13 @@
-document.addEventListener('DOMContentLoaded', () => {
-  const modal = $('#modal_merge_info').modal({
-    modal: true,
-    show: false,
-  });
-  $('.how_to_merge_link').on('click', () => {
-    modal.show();
-  });
-  $('.modal-header .close').on('click', () => {
-    modal.hide();
-  });
-});
+export default () => {
+  const modal = $('#modal_merge_info');
+
+  if (modal) {
+    modal.modal({
+      modal: true,
+      show: false,
+    });
+
+    $('.how_to_merge_link').on('click', modal.show);
+    $('.modal-header .close').on('click', modal.hide);
+  }
+};
diff --git a/app/assets/javascripts/pages/projects/merge_requests/show/index.js b/app/assets/javascripts/pages/projects/merge_requests/show/index.js
index c3463c266e3..8552e49a9cf 100644
--- a/app/assets/javascripts/pages/projects/merge_requests/show/index.js
+++ b/app/assets/javascripts/pages/projects/merge_requests/show/index.js
@@ -2,16 +2,19 @@ import MergeRequest from '~/merge_request';
 import ZenMode from '~/zen_mode';
 import initNotes from '~/init_notes';
 import initIssuableSidebar from '~/init_issuable_sidebar';
+import initDiffNotes from '~/diff_notes/diff_notes_bundle';
 import ShortcutsIssuable from '~/shortcuts_issuable';
 import Diff from '~/diff';
 import { handleLocationHash } from '~/lib/utils/common_utils';
+import howToMerge from '~/how_to_merge';
 
 export default () => {
   new Diff(); // eslint-disable-line no-new
   new ZenMode(); // eslint-disable-line no-new
 
-  initIssuableSidebar(); // eslint-disable-line no-new
-  initNotes(); // eslint-disable-line no-new
+  initIssuableSidebar();
+  initNotes();
+  initDiffNotes();
 
   const mrShowNode = document.querySelector('.merge-request');
 
@@ -21,4 +24,5 @@ export default () => {
 
   new ShortcutsIssuable(true); // eslint-disable-line no-new
   handleLocationHash();
+  howToMerge();
 };
diff --git a/app/views/projects/merge_requests/_how_to_merge.html.haml b/app/views/projects/merge_requests/_how_to_merge.html.haml
index 917ec7fdbda..54a661040ea 100644
--- a/app/views/projects/merge_requests/_how_to_merge.html.haml
+++ b/app/views/projects/merge_requests/_how_to_merge.html.haml
@@ -1,6 +1,3 @@
-- content_for :page_specific_javascripts do
-  = webpack_bundle_tag('how_to_merge')
-
 #modal_merge_info.modal
   .modal-dialog
     .modal-content
diff --git a/app/views/projects/merge_requests/show.html.haml b/app/views/projects/merge_requests/show.html.haml
index 8740c6895df..b0fa6c2bd7b 100644
--- a/app/views/projects/merge_requests/show.html.haml
+++ b/app/views/projects/merge_requests/show.html.haml
@@ -4,9 +4,6 @@
 - page_title "#{@merge_request.title} (#{@merge_request.to_reference})", "Merge Requests"
 - page_description @merge_request.description
 - page_card_attributes @merge_request.card_attributes
-- content_for :page_specific_javascripts do
-  = webpack_bundle_tag('common_vue')
-  = webpack_bundle_tag('diff_notes')
 
 .merge-request{ data: { mr_action: j(params[:tab].presence || 'show'), url: merge_request_path(@merge_request, format: :json), project_path: project_path(@merge_request.project) } }
   = render "projects/merge_requests/mr_title"
diff --git a/config/webpack.config.js b/config/webpack.config.js
index 3fff808f166..b31529591e9 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -66,7 +66,6 @@ var config = {
     graphs_charts:        './graphs/graphs_charts.js',
     graphs_show:          './graphs/graphs_show.js',
     help:                 './help/help.js',
-    how_to_merge:         './how_to_merge.js',
     issue_show:           './issue_show/index.js',
     job_details:          './jobs/job_details_bundle.js',
     locale:               './locale/index.js',
@@ -155,7 +154,7 @@ var config = {
         include: /node_modules\/katex\/dist/,
         use: [
           { loader: 'style-loader' },
-          { 
+          {
             loader: 'css-loader',
             options: {
               name: '[name].[hash].[ext]'