diff --git a/packages/learn/gatsby-node.js b/packages/learn/gatsby-node.js
index a62f8d41d4..3d0ab4c410 100644
--- a/packages/learn/gatsby-node.js
+++ b/packages/learn/gatsby-node.js
@@ -104,7 +104,7 @@ exports.createPages = ({ graphql, actions }) => {
 const RmServiceWorkerPlugin = require('webpack-remove-serviceworker-plugin');
 const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 
-exports.onCreateWebpackConfig = ({ rules, plugins, actions }) => {
+exports.onCreateWebpackConfig = ({ stage, rules, plugins, actions }) => {
   actions.setWebpackConfig({
     module: {
       rules: [rules.js({
@@ -131,10 +131,26 @@ exports.onCreateWebpackConfig = ({ rules, plugins, actions }) => {
         ),
         STRIPE_PUBLIC_KEY: JSON.stringify(process.env.STRIPE_PUBLIC_KEY || '')
       }),
-      new RmServiceWorkerPlugin(),
-      new MonacoWebpackPlugin()
+      new RmServiceWorkerPlugin()
     ]
   });
+  if (stage !== 'build-html') {
+    actions.setWebpackConfig({
+      plugins: [
+        new MonacoWebpackPlugin()
+      ]
+    });
+  }
+  if (stage === 'build-html') {
+    actions.setWebpackConfig({
+      plugins: [
+        plugins.normalModuleReplacement(
+          /react-monaco-editor/,
+          require.resolve('./src/__mocks__/monacoEditorMock.js')
+        )
+      ]
+    });
+  }
 };
 
 exports.onCreateBabelConfig = ({ actions }) => {
diff --git a/packages/learn/src/__mocks__/monacoEditorMock.js b/packages/learn/src/__mocks__/monacoEditorMock.js
new file mode 100644
index 0000000000..343cb133f1
--- /dev/null
+++ b/packages/learn/src/__mocks__/monacoEditorMock.js
@@ -0,0 +1,4 @@
+/* eslint-disable */
+import React from 'react';
+
+export default () => React.createElement('div');