fix: load all Babel libs dynamically

client/src/templates/Challenges/rechallenge/transformers.js

@@ -10,9 +10,6 @@ import {
   stubTrue
 } from 'lodash';
 
-import * as Babel from '@babel/standalone';
-import presetEnv from '@babel/preset-env';
-import presetReact from '@babel/preset-react';
 import protect from '@freecodecamp/loop-protect';
 
 import * as vinyl from '../utils/polyvinyl.js';
@@ -38,30 +35,49 @@ function testLoopProtectCB(line) {
   );
 }
 
-Babel.registerPlugin('loopProtection', protect(protectTimeout, loopProtectCB));
+// hold Babel, presets and options so we don't try to import them multiple times
-Babel.registerPlugin(
-  'testLoopProtection',
-  protect(testProtectTimeout, testLoopProtectCB, loopsPerTimeoutCheck)
-);
 
-const babelOptionsJSBase = {
+let Babel;
-  presets: [presetEnv]
+let presetEnv, presetReact;
-};
+let babelOptionsJSBase, babelOptionsJS, babelOptionsJSX, babelOptionsJSPreview;
 
-const babelOptionsJSX = {
+async function loadBabel() {
-  plugins: ['loopProtection'],
+  if (Babel) return;
-  presets: [presetEnv, presetReact]
+  /* eslint-disable no-inline-comments */
-};
+  Babel = await import(
-
+    /* webpackChunkName: "@babel/standalone" */ '@babel/standalone'
-const babelOptionsJS = {
+  );
-  ...babelOptionsJSBase,
+  presetEnv = await import(
-  plugins: ['testLoopProtection']
+    /* webpackChunkName: "@babel/preset-env" */ '@babel/preset-env'
-};
+  );
-
+  presetReact = await import(
-const babelOptionsJSPreview = {
+    /* webpackChunkName: "@babel/preset-react" */ '@babel/preset-react'
-  ...babelOptionsJSBase,
+  );
-  plugins: ['loopProtection']
+  /* eslint-enable no-inline-comments */
-};
+  Babel.registerPlugin(
+    'loopProtection',
+    protect(protectTimeout, loopProtectCB)
+  );
+  Babel.registerPlugin(
+    'testLoopProtection',
+    protect(testProtectTimeout, testLoopProtectCB, loopsPerTimeoutCheck)
+  );
+  babelOptionsJSBase = {
+    presets: [presetEnv]
+  };
+  babelOptionsJSX = {
+    plugins: ['loopProtection'],
+    presets: [presetEnv, presetReact]
+  };
+  babelOptionsJS = {
+    ...babelOptionsJSBase,
+    plugins: ['testLoopProtection']
+  };
+  babelOptionsJSPreview = {
+    ...babelOptionsJSBase,
+    plugins: ['loopProtection']
+  };
+}
 
 const babelTransformCode = options => code =>
   Babel.transform(code, options).code;
@@ -110,22 +126,26 @@ const babelTransformer = ({ preview = false, protect = true }) => {
   return cond([
     [
       testJS,
-      flow(
+      async code => {
-        partial(
+        await loadBabel();
+        return partial(
           vinyl.transformHeadTailAndContents,
           tryTransform(babelTransformCode(options))
-        )
+        )(code);
-      )
+      }
     ],
     [
       testJSX,
-      flow(
+      async code => {
-        partial(
+        await loadBabel();
-          vinyl.transformHeadTailAndContents,
+        return flow(
-          tryTransform(babelTransformCode(babelOptionsJSX))
+          partial(
-        ),
+            vinyl.transformHeadTailAndContents,
-        partial(vinyl.setExt, 'js')
+            tryTransform(babelTransformCode(babelOptionsJSX))
-      )
+          ),
+          partial(vinyl.setExt, 'js')
+        )(code);
+      }
     ],
     [stubTrue, identity]
   ]);
@@ -142,7 +162,8 @@ async function transformSASS(element) {
   );
 }
 
-function transformScript(element) {
+async function transformScript(element) {
+  await loadBabel();
   const scriptTags = element.querySelectorAll('script');
   scriptTags.forEach(script => {
     script.innerHTML = tryTransform(babelTransformCode(babelOptionsJSX))(