Transpile React modules in node_modules

Fixes codesandbox#1293

Author: CompuIves

packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/VersionEntry/index.js

@@ -61,14 +61,18 @@ export default class VersionEntry extends React.PureComponent {
   }
 
   componentWillMount() {
-    const versionRegex = /^\d{1,3}\.\d{1,3}.\d{1,3}$/;
-    const version = this.props.dependencies[this.props.dependency];
-    const cleanVersion = version.split('^');
-    this.getSizeForPKG(
-      `${this.props.dependency}@${cleanVersion[cleanVersion.length - 1]}`
-    );
-    if (!versionRegex.test(version)) {
-      this.setVersionsForLatestPkg(`${this.props.dependency}@${version}`);
+    try {
+      const versionRegex = /^\d{1,3}\.\d{1,3}.\d{1,3}$/;
+      const version = this.props.dependencies[this.props.dependency];
+      const cleanVersion = version.split('^');
+      this.getSizeForPKG(
+        `${this.props.dependency}@${cleanVersion[cleanVersion.length - 1]}`
+      );
+      if (!versionRegex.test(version)) {
+        this.setVersionsForLatestPkg(`${this.props.dependency}@${version}`);
+      }
+    } catch (e) {
+      console.error(e);
     }
   }
 

packages/app/src/sandbox/eval/manager.js

@@ -22,10 +22,10 @@ import coreLibraries from './npm/get-core-libraries';
 import getDependencyName from './utils/get-dependency-name';
 import TestRunner from './tests/jest-lite';
 import dependenciesToQuery from '../npm/dependencies-to-query';
-import isESModule from './utils/is-es-module';
 import { packageFilter } from './utils/resolve-utils';
 
 import { ignoreNextCache, deleteAPICache } from './cache';
+import { shouldTranspile } from './transpilers/babel/check';
 
 type Externals = {
   [name: string]: string,
@@ -292,7 +292,7 @@ export default class Manager {
 
       // Check if module syntax, only transpile when that's NOT the case
       // TODO move this check to the packager
-      if (!isESModule(module.code)) {
+      if (!shouldTranspile(module.code, path)) {
         module.requires = this.manifest.contents[path].requires;
       }
 

packages/app/src/sandbox/eval/transpilers/babel/check.js

@@ -0,0 +1,7 @@
+import isESModule from '../../utils/is-es-module';
+
+const JSXSyntax = /<\w/;
+
+export function shouldTranspile(code: string, path: string) {
+  return isESModule(code) || JSXSyntax.test(code);
+}

packages/app/src/sandbox/eval/transpilers/babel/index.js

@@ -2,14 +2,14 @@
 import BabelWorker from 'worker-loader?publicPath=/&name=babel-transpiler.[hash:8].worker.js!./worker/index.js';
 import { isBabel7 } from 'common/utils/is-babel-7';
 
-import isESModule from '../../utils/is-es-module';
 import regexGetRequireStatements from './worker/simple-get-require-statements';
 import getBabelConfig from './babel-parser';
 import WorkerTranspiler from '../worker-transpiler';
 import { type LoaderContext } from '../../transpiled-module';
 import type { default as Manager } from '../../manager';
 
 import delay from '../../../utils/delay';
+import { shouldTranspile } from './check';
 
 // Right now this is in a worker, but when we're going to allow custom plugins
 // we need to move this out of the worker again, because the config needs
@@ -50,7 +50,7 @@ class BabelTranspiler extends WorkerTranspiler {
       if (
         (loaderContext.options.simpleRequire ||
           path.startsWith('/node_modules')) &&
-        !isESModule(code)
+        !shouldTranspile(code, path)
       ) {
         regexGetRequireStatements(code).forEach(dependency => {
           if (dependency.isGlob) {