fix: use loadable MonacoEditor

client/package-lock.json

@@ -1740,6 +1740,16 @@
         "@types/yargs": "^13.0.0"
       }
     },
+    "@loadable/component": {
+      "version": "5.13.1",
+      "resolved": "https://registry.npmjs.org/@loadable/component/-/component-5.13.1.tgz",
+      "integrity": "sha512-qTNfTv5bVfb9eTKNUOMzPweRnxzNaxCmLZEsFEMn+kxpd86iXae+IpibXFJlnb052Q4fVkcWM2tvmWLc/+HzLg==",
+      "requires": {
+        "@babel/runtime": "^7.7.7",
+        "hoist-non-react-statics": "^3.3.1",
+        "react-is": "^16.12.0"
+      }
+    },
     "@mdx-js/mdx": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-1.6.1.tgz",

client/package.json

@@ -17,6 +17,7 @@
     "@freecodecamp/loop-protect": "^2.2.1",
     "@freecodecamp/react-bootstrap": "^0.32.3",
     "@freecodecamp/react-calendar-heatmap": "^1.0.0",
+    "@loadable/component": "^5.13.1",
     "@reach/router": "^1.2.1",
     "algoliasearch": "^3.35.1",
     "axios": "^0.19.0",

client/src/templates/Challenges/classic/Editor.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import isEqual from 'lodash/isEqual';
+import Loadable from '@loadable/component';
 
 import {
   canFocusEditorSelector,
@@ -20,7 +21,7 @@ import { toSortedArray } from '../../../../../utils/sort-files';
 
 import './editor.css';
 
-const MonacoEditor = React.lazy(() => import('react-monaco-editor'));
+const MonacoEditor = Loadable(() => import('react-monaco-editor'));
 
 const propTypes = {
   canFocus: PropTypes.bool,