Download missing plugins from error (codesandbox#2466)

* download missing plugins from error

* copy fallback to preset

* Revert "copy fallback to preset"

This reverts commit 88a953e.

Author: siddharthkp

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

@@ -142,21 +142,45 @@ async function installPlugin(Babel, BFSRequire, plugin, currentPath, isV7) {
       Babel.availablePlugins,
       Babel.availablePresets
     );
-  } catch (e) {
+  } catch (firstError) {
     console.warn('First time compiling ' + plugin + ' went wrong, got:');
-    console.warn(e);
-    const prefixedName = getPrefixedPluginName(plugin, isV7);
+    console.warn(firstError);
 
-    evaluatedPlugin = evaluateFromPath(
-      fs,
-      BFSRequire,
-      prefixedName,
-      currentPath,
-      Babel.availablePlugins,
-      Babel.availablePresets
-    );
+    try {
+      /** We assume that the user has the shortcode
+          react = @babel/react or styled-components = babel-plugin-styled-components
+          and try to fetch the correct plugin for them
+       */
+
+      const prefixedName = getPrefixedPluginName(plugin, isV7);
+      evaluatedPlugin = evaluateFromPath(
+        fs,
+        BFSRequire,
+        prefixedName,
+        currentPath,
+        Babel.availablePlugins,
+        Babel.availablePresets
+      );
+
+      console.log('Second try succeeded');
+    } catch (secondError) {
+      console.warn('Long path also failed ' + plugin + ' went wrong, got:');
+      console.warn(secondError);
+
+      /** If we still didn't get it, this means plugin wasn't downloaded
+          and that's why it could not be resolved.
+
+          We can try to download it based on the first error
+      */
+
+      console.warn('Downloading ' + plugin);
 
-    console.log('Second try succeeded');
+      evaluatedPlugin = await downloadFromError(firstError).then(() => {
+        console.warn('Downloaded ' + plugin);
+        resetCache();
+        return installPlugin(Babel, BFSRequire, plugin, currentPath, isV7);
+      });
+    }
   }
 
   if (!evaluatedPlugin) {
@@ -167,6 +191,8 @@ async function installPlugin(Babel, BFSRequire, plugin, currentPath, isV7) {
     plugin,
     evaluatedPlugin.default ? evaluatedPlugin.default : evaluatedPlugin
   );
+
+  return evaluatedPlugin;
 }
 
 async function installPreset(Babel, BFSRequire, preset, currentPath, isV7) {