Show Babel load-error message if Babel fails to load from CDN

src/components/CodeEditor/CodeEditor.js

@@ -11,23 +11,18 @@ import ReactDOM from 'react-dom';
 import Remarkable from 'remarkable';
 // TODO: switch back to the upstream version of react-live
 // once https://github.com/FormidableLabs/react-live/issues/37 is fixed.
-import {LiveEditor, LiveProvider} from '@gaearon/react-live';
+import {LiveProvider, LiveEditor} from '@gaearon/react-live';
 import {colors, media} from 'theme';
 import MetaTitle from 'templates/components/MetaTitle';
 
-const compileES5 = (
-  code, // eslint-disable-next-line no-undef
-) => Babel.transform(code, {presets: ['es2015', 'react']}).code;
-
-// eslint-disable-next-line no-undef
-const compileES6 = code => Babel.transform(code, {presets: ['react']}).code;
+const compile = code =>
+  Babel.transform(code, {presets: ['es2015', 'react']}).code; // eslint-disable-line no-undef
 
 class CodeEditor extends Component {
   constructor(props, context) {
     super(props, context);
 
     this.state = this._updateState(props.code);
-    this.state.showJSX = true;
   }
 
   componentDidMount() {
@@ -43,11 +38,27 @@ class CodeEditor extends Component {
   }
 
   render() {
-    const {children} = this.props;
-    const {compiledES6, code, error, showJSX} = this.state;
+    const {children, code} = this.props;
+    const {error} = this.state;
+
+    let errorMessage;
+    if (this.state.showBabelErrorMessage) {
+      errorMessage = (
+        <span>
+          Babel could not be loaded.
+          <br />
+          <br />
+          This can be caused by an ad blocker. If you're using one, consider
+          adding reactjs.org to the whitelist so the live code examples will
+          work.
+        </span>
+      );
+    } else if (error != null) {
+      errorMessage = error.message;
+    }
 
     return (
-      <LiveProvider code={showJSX ? code : compiledES6} mountStylesheet={false}>
+      <LiveProvider code={code} mountStylesheet={false}>
         <div
           css={{
             [media.greaterThan('xlarge')]: {
@@ -117,23 +128,7 @@ class CodeEditor extends Component {
                   background: colors.darker,
                   color: colors.white,
                 }}>
-                <MetaTitle onDark={true}>
-                  Live JSX Editor
-                  <label
-                    css={{
-                      fontSize: 14,
-                      float: 'right',
-                      cursor: 'pointer',
-                    }}>
-                    <input
-                      checked={this.state.showJSX}
-                      onChange={event =>
-                        this.setState({showJSX: event.target.checked})}
-                      type="checkbox"
-                    />{' '}
-                    JSX?
-                  </label>
-                </MetaTitle>
+                <MetaTitle onDark={true}>Live JSX Editor</MetaTitle>
               </div>
               <div
                 css={{
@@ -197,16 +192,7 @@ class CodeEditor extends Component {
                     color: colors.error,
                     padding: 10,
                   }}>
-                  {this.state.didBabelLoad ? (
-                    error.message
-                  ) : (
-                    <span>
-                      Babel could not be loaded. This can be caused by ad
-                      blockers. If you're using an ad blocker, consider adding
-                      reactjs.org to the whitelist so the live code examples
-                      will work.
-                    </span>
-                  )}
+                  {errorMessage}
                 </pre>
               </div>
             )}
@@ -295,34 +281,29 @@ class CodeEditor extends Component {
     this._mountNode = ref;
   };
 
-  _updateState(code, showJSX = true) {
+  _updateState(code) {
     try {
-      let newState = {
-        compiled: compileES5(code),
+      return {
+        compiled: compile(code),
         error: null,
       };
-
-      if (showJSX) {
-        newState.code = code;
-        newState.compiledES6 = compileES6(code);
-      } else {
-        newState.compiledES6 = code;
-      }
-
-      return newState;
     } catch (error) {
       console.error(error);
 
+      // Certain ad blockers (eg Fair AdBlocker) prevent Babel from loading.
+      // If we suspect this is the case, we can show a more helpful error.
+      const showBabelErrorMessage = !window.Babel;
+
       return {
-        didBabelLoad: !!window.Babel,
         compiled: null,
         error,
+        showBabelErrorMessage,
       };
     }
   }
 
   _onChange = code => {
-    this.setState(state => this._updateState(code, state.showJSX));
+    this.setState(this._updateState(code));
   };
 }
 

src/templates/home.js

@@ -26,11 +26,17 @@ class Home extends Component {
     renderExamplePlaceholder('todoExample');
     renderExamplePlaceholder('markdownExample');
 
-    loadScript(babelURL).then(() => {
+    function mountCodeExamples() {
       mountCodeExample('helloExample', HELLO_COMPONENT);
       mountCodeExample('timerExample', TIMER_COMPONENT);
       mountCodeExample('todoExample', TODO_COMPONENT);
       mountCodeExample('markdownExample', MARKDOWN_COMPONENT);
+    }
+
+    loadScript(babelURL).then(mountCodeExamples, error => {
+      console.error('Babel failed to load.');
+
+      mountCodeExamples();
     });
   }