2 files changed, 16 insertions, 3 deletions
diff --git a/app/assets/javascripts/repo/monaco_loader.js b/app/assets/javascripts/repo/monaco_loader.js
new file mode 100644
index 00000000000..ad1370a7730
--- /dev/null
+++ b/app/assets/javascripts/repo/monaco_loader.js
@@ -0,0 +1,13 @@
+/* eslint-disable no-underscore-dangle, camelcase */
+/* global __webpack_public_path__ */
+
+import monacoContext from 'monaco-editor/dev/vs/loader';
+
+monacoContext.require.config({
+  paths: {
+    vs: `${__webpack_public_path__}monaco-editor/vs`,
+  },
+});
+
+window.__monaco_context__ = monacoContext;
+export default monacoContext.require;
diff --git a/app/assets/javascripts/repo/repo_editor.js b/app/assets/javascripts/repo/repo_editor.js
index 9e1dfaa6d10..06f08f06d4d 100644
--- a/app/assets/javascripts/repo/repo_editor.js
+++ b/app/assets/javascripts/repo/repo_editor.js
@@ -2,6 +2,7 @@
 import Vue from 'vue';
 import Store from './repo_store';
 import Helper from './repo_helper';
+import monacoLoader from './monaco_loader';
 
 export default class RepoEditor {
   constructor() {
@@ -19,8 +20,7 @@ export default class RepoEditor {
   }
 
   initMonaco() {
-    window.require.config({ paths: { vs: '/assets/webpack/vs' } });
-    window.require(['vs/editor/editor.main'], () => {
+    monacoLoader(['vs/editor/editor.main'], () => {
       this.monacoEditor = monaco.editor
       .create(
         document.getElementById('ide'), {
@@ -115,7 +115,7 @@ export default class RepoEditor {
                 Helper
                   .getLanguageForFile(
                     this.activeFile,
-                    monaco.languages.getLanguages()
+                    monaco.languages.getLanguages(),
                   ),
               ),
             );