diff --git a/packages/learn/gatsby-browser.js b/packages/learn/gatsby-browser.js
index 20aedba6aa..49da8624f1 100644
--- a/packages/learn/gatsby-browser.js
+++ b/packages/learn/gatsby-browser.js
@@ -1,22 +1,16 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Provider } from 'react-redux';
-import { ConnectedRouter } from 'react-router-redux';
 
 import { createStore } from './src/redux/store';
 
-exports.replaceRouterComponent = ({ history }) => {
-  const store = createStore(history || {});
+export const wrapRootElement = ({ element }) => {
+  const store = createStore();
 
-  const ConnectedRouterWrapper = ({ children }) => (
+  const ConnectedRootElement = (
     <Provider store={store}>
-      <ConnectedRouter history={history}>{children}</ConnectedRouter>
+      {element}
     </Provider>
   );
-  ConnectedRouterWrapper.displayName = 'ConnectedRouterWrapper';
-  ConnectedRouterWrapper.propTypes = {
-    children: PropTypes.node
-  };
 
-  return ConnectedRouterWrapper;
+  return ConnectedRootElement;
 };
diff --git a/packages/learn/gatsby-node.js b/packages/learn/gatsby-node.js
index 76950dc7f5..3bebfd58c6 100644
--- a/packages/learn/gatsby-node.js
+++ b/packages/learn/gatsby-node.js
@@ -1,6 +1,4 @@
 require('dotenv').config();
-const path = require('path');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 const { dasherize } = require('./utils');
 const { blockNameify } = require('./utils/blockNameify');
@@ -103,71 +101,58 @@ exports.createPages = ({ graphql, actions }) => {
   });
 };
 
-const webpack = require('webpack');
 const RmServiceWorkerPlugin = require('webpack-remove-serviceworker-plugin');
-const generateBabelConfig = require('gatsby/dist/utils/babel-config');
 
-exports.modifyWebpackConfig = ({ config, stage }) => {
-  const program = {
-    directory: __dirname,
-    browserslist: ['> 1%', 'last 2 versions', 'IE >= 9']
-  };
-
-  return generateBabelConfig(program, stage).then(babelConfig => {
-    config.removeLoader('js').loader('js', {
-      test: /\.jsx?$/,
-      /* eslint-disable max-len */
-      exclude: modulePath => {
-        return (
-          /node_modules/.test(modulePath) &&
-          !(/(ansi-styles|chalk|strict-uri-encode|react-freecodecamp-search)/).test(
-            modulePath
-          )
-        );
-      },
-      /* eslint-enable max-len*/
-      loader: 'babel',
-      query: babelConfig
-    });
-    config.plugin('CopyWebpackPlugin', CopyWebpackPlugin, [
-      [
-        {
-          from: path.resolve(__dirname, './node_modules/monaco-editor/min/vs'),
-          to: 'vs'
+exports.onCreateWebpackConfig = ({ rules, plugins, actions }) => {
+  actions.setWebpackConfig({
+    module: {
+      rules: [rules.js({
+        /* eslint-disable max-len */
+        exclude: modulePath => {
+          return (
+            /node_modules/.test(modulePath) &&
+            !(/(ansi-styles|chalk|strict-uri-encode|react-freecodecamp-search)/).test(
+              modulePath
+            )
+          );
         }
+        /* eslint-enable max-len*/
+      })
       ]
-    ]);
-    config.plugin('DefinePlugin', webpack.DefinePlugin, [
-      {
+    },
+    node: {
+      fs: 'empty'
+    },
+    plugins: [
+      plugins.define({
         HOME_PATH: JSON.stringify(
           process.env.HOME_PATH || 'http://localhost:3000'
         ),
-        STRIPE_PUBLIC_KEY: JSON.stringify(process.env.STRIPE_PULIC_KEY || '')
-      }
-    ]);
-    config.plugin('RemoveServiceWorkerPlugin', RmServiceWorkerPlugin, [
-      { filename: 'sw.js' }
-    ]);
+        STRIPE_PUBLIC_KEY: JSON.stringify(process.env.STRIPE_PUBLIC_KEY || '')
+      }),
+      new RmServiceWorkerPlugin()
+    ]
   });
 };
-/* eslint-disable prefer-object-spread/prefer-object-spread */
-exports.modifyBabelrc = ({ babelrc }) =>
-  Object.assign({}, babelrc, {
-    plugins: babelrc.plugins.concat([
-      [
-        'transform-es2015-arrow-functions',
-        'transform-imports',
-        'transform-function-bind',
-        {
-          'react-bootstrap': {
-            transform: 'react-bootstrap/lib/${member}',
-            preventFullImport: true
-          },
-          lodash: {
-            transform: 'lodash/${member}',
-            preventFullImport: true
-          }
-        }
-      ]
-    ])
+
+exports.onCreateBabelConfig = ({ actions }) => {
+  actions.setBabelPlugin({
+    name: '@babel/plugin-proposal-function-bind'
   });
+  actions.setBabelPlugin({
+    name: '@babel/plugin-proposal-export-default-from'
+  });
+  actions.setBabelPlugin({
+    name: 'babel-plugin-transform-imports',
+    options: {
+      'react-bootstrap': {
+        transform: 'react-bootstrap/lib/${member}',
+        preventFullImport: true
+      },
+      lodash: {
+        transform: 'lodash/${member}',
+        preventFullImport: true
+      }
+    }
+  });
+};
diff --git a/packages/learn/gatsby-ssr.js b/packages/learn/gatsby-ssr.js
index 037f648804..587bc21679 100644
--- a/packages/learn/gatsby-ssr.js
+++ b/packages/learn/gatsby-ssr.js
@@ -6,7 +6,7 @@ import headComponents from './src/head';
 
 import { createStore } from './src/redux/store';
 
-exports.replaceRenderer = ({
+export const replaceRenderer = ({
   history,
   bodyComponent,
   replaceBodyHTMLString
@@ -19,7 +19,7 @@ exports.replaceRenderer = ({
   replaceBodyHTMLString(renderToString(<ConnectedBody />));
 };
 
-exports.onRenderBody = ({ setHeadComponents, setPostBodyComponents }) => {
+export const onRenderBody = ({ setHeadComponents, setPostBodyComponents }) => {
   setHeadComponents([...headComponents]);
   setPostBodyComponents([
     <script
diff --git a/packages/learn/package.json b/packages/learn/package.json
index 5d36c200bd..008ad71c9b 100644
--- a/packages/learn/package.json
+++ b/packages/learn/package.json
@@ -86,6 +86,7 @@
   "devDependencies": {
     "@babel/cli": "^7.0.0",
     "@babel/core": "^7.0.0",
+    "@babel/plugin-proposal-export-default-from": "^7.0.0",
     "@babel/plugin-proposal-function-bind": "^7.0.0",
     "babel-core": "^7.0.0-0",
     "babel-eslint": "^8.2.2",
diff --git a/packages/learn/utils/gatsby/index.js b/packages/learn/utils/gatsby/index.js
index f3c5acc5a6..7486eaaddc 100644
--- a/packages/learn/utils/gatsby/index.js
+++ b/packages/learn/utils/gatsby/index.js
@@ -1,4 +1,4 @@
-import { dasherize } from '..';
+const { dasherize } = require('..');
 
 const path = require('path');
 
diff --git a/packages/learn/yarn.lock b/packages/learn/yarn.lock
index 3af784e59a..d2836a07cf 100644
--- a/packages/learn/yarn.lock
+++ b/packages/learn/yarn.lock
@@ -293,6 +293,13 @@
     "@babel/helper-replace-supers" "^7.0.0"
     "@babel/plugin-syntax-class-properties" "^7.0.0"
 
+"@babel/plugin-proposal-export-default-from@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-default-from/-/plugin-proposal-export-default-from-7.0.0.tgz#a057bbfd4649facfe39f33a537e18554bdd2b5da"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-export-default-from" "^7.0.0"
+
 "@babel/plugin-proposal-function-bind@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-function-bind/-/plugin-proposal-function-bind-7.0.0.tgz#030bb3dd7affb5a0df8326cdd3e9f6776e95a225"
@@ -347,6 +354,12 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-syntax-export-default-from@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-export-default-from/-/plugin-syntax-export-default-from-7.0.0.tgz#084b639bce3d42f3c5bf3f68ccb42220bb2d729d"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
 "@babel/plugin-syntax-function-bind@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-function-bind/-/plugin-syntax-function-bind-7.0.0.tgz#04ad5fac3f68460ef028b1d92abc09781f2e7478"