Add raw module error detection

Author: Ives van Hoorne

src/app/components/sandbox/Preview/Message.js

@@ -21,11 +21,11 @@ const Container = styled.div`
   box-sizing: border-box;
   position: absolute;
   background-color: ${({ color }) => {
-                      if (color === 'error') {
-                        return theme.redBackground();
-                      }
-                      return theme.primary();
-                    }};
+    if (color === 'error') {
+      return theme.redBackground();
+    }
+    return theme.primary();
+  }};
   color: ${() => theme.red()};
   height: 100%;
   width: 100%;
@@ -35,9 +35,7 @@ const Container = styled.div`
   text-align: center;
 `;
 
-const Content = styled.div`
-  width: 70%;
-`;
+const Content = styled.div`width: 70%;`;
 
 const Icon = styled.div`
   margin: 1rem;
@@ -63,10 +61,24 @@ class Message extends React.PureComponent {
   getIcon = () => {
     const { error, message } = this.props;
 
-    if (message) return <Icon><InfoIcon /></Icon>;
-    if (error.severity === 'warning') return <Icon><WarningIcon /></Icon>;
+    if (message)
+      return (
+        <Icon>
+          <InfoIcon />
+        </Icon>
+      );
+    if (error.severity === 'warning')
+      return (
+        <Icon>
+          <WarningIcon />
+        </Icon>
+      );
 
-    return <Icon><ErrorIcon /></Icon>;
+    return (
+      <Icon>
+        <ErrorIcon />
+      </Icon>
+    );
   };
 
   addDependency = name => async () => {
@@ -80,19 +92,39 @@ class Message extends React.PureComponent {
     sandboxActions.setCurrentModule(sandboxId, error.moduleId);
   };
 
+  renameModuleToJS = () => {
+    const { error, sandboxId, modules, sandboxActions } = this.props;
+    const importedModule = modules.find(
+      m => m.id === error.payload.importedModuleId,
+    );
+
+    sandboxActions.renameModule(
+      sandboxId,
+      error.payload.importedModuleId,
+      `${importedModule.title}.js`,
+    );
+  };
+
   getMessage = () => {
-    const { error, modules, sandboxActions } = this.props;
+    const { error, modules, sandboxId, sandboxActions } = this.props;
 
     const module = modules.find(m => m.id === error.moduleId) || {};
     if (error.type === 'dependency-not-found') {
       return (
         <div>
           Could not find
-          <b> {"'"}{error.payload.path}{"'"}</b>.
+          <b>
+            {' '}{"'"}
+            {error.payload.path}
+            {"'"}
+          </b>.
           <div>
-            Did you add the dependency
-            {' '}
-            <b>{"'"}{error.payload.dependency}{"'"}</b>
+            Did you add the dependency{' '}
+            <b>
+              {"'"}
+              {error.payload.dependency}
+              {"'"}
+            </b>
             ?
           </div>
           {sandboxActions &&
@@ -113,23 +145,55 @@ class Message extends React.PureComponent {
           <div style={{ marginTop: '1rem' }}>
             We
             {"'"}
-            re adding support for viewing generated documentation in the near future.
+            re adding support for viewing generated documentation in the near
+            future.
             {error.payload.react &&
               <div>
-                For now we recommend adding
-                {' '}
+                For now we recommend adding{' '}
                 <Editor readOnly name={error.payload.componentName} />
                 to view this component.
               </div>}
           </div>
         </div>
       );
+    } else if (error.type === 'raw-react-component-import') {
+      const importedModule = modules.find(
+        m => m.id === error.payload.importedModuleId,
+      );
+      return (
+        <div>
+          It seems like you're trying to render a React component from{' '}
+          <b>{`'${importedModule.title}'`}</b> in <b>{`'${module.title}'`}</b>,
+          but <b>{`'${importedModule.title}'`}</b> has no file extension. This
+          means that it returns a string instead of a component.
+          <p>
+            <b>Original error:</b>
+            <br />
+
+            {error.message}
+          </p>
+          <div style={{ marginTop: '1rem' }}>
+            {sandboxActions &&
+              <div style={{ marginTop: '1rem' }}>
+                <Button onClick={this.renameModuleToJS} small>
+                  Rename <b>{`'${importedModule.title}'`}</b> to{' '}
+                  <b>{`'${importedModule.title}.js'`}</b>
+                </Button>
+              </div>}
+          </div>
+        </div>
+      );
     }
 
     return (
       <div>
-        {module && <div>Error in <b>{module.title}</b>:</div>}
-        <div style={{ marginTop: '1rem' }}>{error.title}: {error.message}</div>
+        {module &&
+          <div>
+            Error in <b>{module.title}</b>:
+          </div>}
+        <div style={{ marginTop: '1rem' }}>
+          {error.title}: {error.message}
+        </div>
 
         {module &&
           sandboxActions &&
@@ -149,7 +213,11 @@ class Message extends React.PureComponent {
       <Container color={error && error.severity === 'error' && 'error'}>
         <Content>
           {this.getIcon()}
-          {message ? <div>{message}</div> : this.getMessage()}
+          {message
+            ? <div>
+                {message}
+              </div>
+            : this.getMessage()}
         </Content>
       </Container>
     );

src/app/components/sandbox/Preview/__snapshots__/Message.test.js.snap

@@ -6,7 +6,7 @@ exports[`Message it renders a dependency not found error 1`] = `
   color="error"
 >
   <div
-    className="sc-EHOje gTncrN"
+    className="sc-EHOje iBAqQB"
   >
     <div
       className="sc-bZQynM kFeJzc"
@@ -61,7 +61,7 @@ exports[`Message it renders a warning 1`] = `
   color={false}
 >
   <div
-    className="sc-EHOje gTncrN"
+    className="sc-EHOje iBAqQB"
   >
     <div
       className="sc-bZQynM kFeJzc"

src/app/store/entities/sandboxes/modules/utils/get-type.js

@@ -2,15 +2,15 @@
 import type { Module } from 'common/types';
 
 const reactRegex = /import.*from\s['|"]react['|"]/;
-function hasReact(code: string) {
+export function hasReact(code: string) {
   return reactRegex.test(code);
 }
 
 const cssRegex = /\.css$/;
 const jsonRegex = /\.json$/;
 const htmlRegex = /\.html$/;
 
-function getMode(module: Module) {
+export function getMode(module: Module) {
   if (cssRegex.test(module.title)) return 'css';
   if (jsonRegex.test(module.title)) return 'json';
   if (htmlRegex.test(module.title)) return 'html';

src/sandbox/errors/no-dom-change-error.js

@@ -10,5 +10,5 @@ export default class NoDomChangeError extends Error {
 
   type = 'no-dom-change';
   severity = 'warning';
-  line = -1;
+  hideLine: true;
 }

src/sandbox/errors/raw-react-component-error.js

@@ -0,0 +1,13 @@
+export default class RawReactComponentError extends Error {
+  constructor(importedModule) {
+    super();
+
+    this.payload = {
+      importedModuleId: importedModule.id,
+    };
+  }
+
+  type = 'raw-react-component-import';
+  severity = 'error';
+  hideLine = true;
+}

src/sandbox/eval/js/error-transformer.js

@@ -0,0 +1,61 @@
+/* @flow */
+import type { Module } from 'common/types';
+import RawReactComponentError from '../../errors/raw-react-component-error';
+
+import {
+  hasReact,
+  getMode,
+} from 'app/store/entities/sandboxes/modules/utils/get-type';
+
+const getModule = (modules: Array<Module>, id: string): ?Module =>
+  modules.find(m => m.id === id);
+
+const reactRegex = /import.*from\s['|"]react['|"]/;
+/**
+ * This error happens when a user tries to use a React component that's imported
+ * from a raw file. In that case the React component will be a string and thus
+ * invalid
+ */
+function buildRawReactComponentError(
+  error: Error,
+  module: Module,
+  modules: Array<Module>,
+  requires: Array<string>,
+) {
+  const rawModuleUsingReact = requires
+    .map(id => getModule(modules, id))
+    .filter(x => x)
+    .filter(m => hasReact(m.code || ''))
+    .find(m => getMode(m) === 'raw');
+
+  if (!rawModuleUsingReact) return error;
+
+  return new RawReactComponentError(rawModuleUsingReact);
+}
+
+/**
+ * This function checks if the error is a known error, as in, it's an error
+ * where we can show the user a better error message based on context.
+ *
+ * @export
+ * @param {Error} error
+ */
+export default function transformError(
+  error: Error,
+  module: Module,
+  modules: Array<Module>,
+  requires: Array<string>,
+) {
+  if (error.message.startsWith('Invalid tag: import React')) {
+    const newError = buildRawReactComponentError(
+      error,
+      module,
+      modules,
+      requires,
+    );
+    newError.message = error.message;
+    return newError;
+  }
+
+  return error;
+}

src/sandbox/eval/js/index.js

@@ -7,6 +7,7 @@ import evalModule from '../';
 import resolveModule from '../../utils/resolve-module';
 import resolveDependency from './dependency-resolver';
 import getBabelConfig from './babel-parser';
+import transformError from './error-transformer';
 
 const moduleCache = new Map();
 
@@ -45,10 +46,16 @@ function evaluate(code, require) {
   const module = { exports: {} };
   const exports = {};
   const process = { env: { NODE_ENV: 'development' } }; // eslint-disable-line no-unused-vars
-  eval(code); // eslint-disable-line no-eval
+  try {
+    eval(code); // eslint-disable-line no-eval
+
+    // Choose either the export of __esModule or node
+    return Object.keys(exports).length > 0 ? exports : module.exports;
+  } catch (e) {
+    e.isEvalError = true;
 
-  // Choose either the export of __esModule or node
-  return Object.keys(exports).length > 0 ? exports : module.exports;
+    throw e;
+  }
 }
 
 /**
@@ -70,8 +77,8 @@ export default function evaluateJS(
   depth: ?number,
   parentModules: Array<Module>,
 ) {
+  const requires = [];
   try {
-    const requires = [];
     require = function require(path: string) {
       // eslint-disable-line no-unused-vars
       if (/^(\w|@)/.test(path)) {
@@ -135,6 +142,10 @@ export default function evaluateJS(
   } catch (e) {
     // Remove cache
     moduleCache.delete(mainModule.id);
-    throw e;
+
+    e.module = e.module || mainModule;
+
+    const newError = transformError(e, e.module, modules, requires);
+    throw newError;
   }
 }

src/sandbox/utils/error-message-builder.js

@@ -12,30 +12,32 @@ export default function buildErrorMessage(e) {
   const message = getMessage(e);
   let line = null;
   let column = null;
+  if (!e.hideLine) {
+    // Safari
+    if (e.line != null) {
+      line = e.line;
 
-  // Safari
-  if (e.line != null) {
-    line = e.line;
+      // FF
+    } else if (e.lineNumber != null) {
+      line = e.lineNumber;
 
-    // FF
-  } else if (e.lineNumber != null) {
-    line = e.lineNumber;
-
-    // Chrome
-  } else if (e.stack) {
-    const matched = e.stack.match(/<anonymous>:(\d+):(\d+)/);
-    if (matched) {
-      line = matched[1];
-      column = matched[2];
-    } else {
-      // Maybe it's a babel transpiler error
-      const babelMatched = e.stack.match(/(\d+):(\d+)/);
-      if (babelMatched) {
-        line = babelMatched[1];
-        column = babelMatched[2];
+      // Chrome
+    } else if (e.stack) {
+      const matched = e.stack.match(/<anonymous>:(\d+):(\d+)/);
+      if (matched) {
+        line = matched[1];
+        column = matched[2];
+      } else {
+        // Maybe it's a babel transpiler error
+        const babelMatched = e.stack.match(/(\d+):(\d+)/);
+        if (babelMatched) {
+          line = babelMatched[1];
+          column = babelMatched[2];
+        }
       }
     }
   }
+
   return {
     moduleId: e.module ? e.module.id : e.moduleId,
     type,