Fix dynamic downloading of babel dependencies (codesandbox#2018)

Author: CompuIves

packages/app/src/sandbox/compile.ts

@@ -1,4 +1,5 @@
 import { dispatch, reattach, clearErrorTransformers } from 'codesandbox-api';
+import { flatten } from 'lodash';
 import { absolute } from '@codesandbox/common/lib/utils/path';
 import _debug from '@codesandbox/common/lib/utils/debug';
 import parseConfigurations from '@codesandbox/common/lib/templates/configuration/parse';
@@ -195,7 +196,6 @@ const PREINSTALLED_DEPENDENCIES = [
   'babel-plugin-detective',
   'babel-plugin-transform-prevent-infinite-loops',
   'babel-plugin-transform-vue-jsx',
-  'babel-plugin-jsx-pragmatic',
   'flow-bin',
   ...BABEL_DEPENDENCIES,
 ];
@@ -213,7 +213,7 @@ function getDependencies(parsedPackage, templateDefinition, configurations) {
 
   // Add all babel plugins/presets to whitelisted dependencies
   if (configurations && configurations.babel && configurations.babel.parsed) {
-    (configurations.babel.parsed.presets || [])
+    flatten(configurations.babel.parsed.presets || [])
       .filter(p => typeof p === 'string')
       .forEach(p => {
         const [first, ...parts] = p.split('/');
@@ -225,7 +225,7 @@ function getDependencies(parsedPackage, templateDefinition, configurations) {
         foundWhitelistedDevDependencies.push(prefixedName);
       });
 
-    (configurations.babel.parsed.plugins || [])
+    flatten(configurations.babel.parsed.plugins || [])
       .filter(p => typeof p === 'string')
       .forEach(p => {
         const [first, ...parts] = p.split('/');

packages/app/src/sandbox/eval/transpilers/babel/worker/evaluate.js

@@ -64,15 +64,15 @@ export default function evaluate(
       availablePlugins[requirePath.replace('babel-plugin-', '')] ||
       availablePlugins[requirePath.replace('@babel/plugin-', '')];
     if (plugin && requirePath !== 'react') {
-      return plugin;
+      return plugin.__esModule ? plugin.default : plugin;
     }
 
     const preset =
       availablePresets[requirePath] ||
       availablePresets[requirePath.replace('babel-preset-', '')] ||
       availablePresets[requirePath.replace('@babel/preset-', '')];
     if (preset && requirePath !== 'react') {
-      return preset;
+      return preset.__esModule ? preset.default : preset;
     }
 
     const dirName = dirname(path);