fix fetching auto types

Author: christianalfoni

packages/app/src/app/overmind/effects/vscode/SandboxFsSync/index.ts

@@ -10,10 +10,7 @@ import {
   Sandbox,
   SandboxFs,
 } from '@codesandbox/common/lib/types';
-import {
-  fetchPackageJSON,
-  isAbsoluteVersion,
-} from '@codesandbox/common/lib/utils/dependencies';
+import { isAbsoluteVersion } from '@codesandbox/common/lib/utils/dependencies';
 import { getGlobal } from '@codesandbox/common/lib/utils/global';
 import { protocolAndHost } from '@codesandbox/common/lib/utils/url-generator';
 import { json } from 'overmind';
@@ -339,24 +336,23 @@ class SandboxFsSync {
         isAbsoluteVersion(dep.version)
       ) {
         const name = `@types/${dep.name}`;
-        fetchPackageJSON(name, dep.version).then(({ version }) => {
-          this.setAndSendPackageTypes(dep.name, {
-            [name]: version,
+        this.fetchDependencyTypingFiles(name, this.typesInfo[dep.name].latest)
+          .then(files => {
+            this.setAndSendPackageTypes(dep.name, files);
+          })
+          .catch(e => {
+            if (process.env.NODE_ENV === 'development') {
+              console.warn('Trouble fetching types for ' + name);
+            }
           });
-        });
       }
 
       try {
-        const fetchRequest = await fetch(
-          `${SERVICE_URL}/${dep.name}@${dep.version}.json`
+        const files = await this.fetchDependencyTypingFiles(
+          dep.name,
+          dep.version
         );
 
-        if (!fetchRequest.ok) {
-          throw new Error('Fetch error');
-        }
-
-        const { files } = await fetchRequest.json();
-
         this.setAndSendPackageTypes(dep.name, files);
       } catch (e) {
         if (process.env.NODE_ENV === 'development') {
@@ -367,6 +363,18 @@ class SandboxFsSync {
       /* ignore */
     }
   }
+
+  private async fetchDependencyTypingFiles(name: string, version: string) {
+    const fetchRequest = await fetch(`${SERVICE_URL}/${name}@${version}.json`);
+
+    if (!fetchRequest.ok) {
+      throw new Error('Fetch error');
+    }
+
+    const { files } = await fetchRequest.json();
+
+    return files;
+  }
 }
 
 export default SandboxFsSync;

packages/app/src/app/pages/index.tsx

@@ -1,22 +1,23 @@
-import React, { useEffect } from 'react';
-import { Route, Switch, Redirect, withRouter } from 'react-router-dom';
-import { DragDropContext } from 'react-dnd';
+import { Button } from '@codesandbox/common/lib/components/Button';
+import theme from '@codesandbox/common/lib/theme';
+import { DNT, trackPageview } from '@codesandbox/common/lib/utils/analytics';
 import _debug from '@codesandbox/common/lib/utils/debug';
-import { Toasts, NotificationStatus } from '@codesandbox/notifications';
 import { notificationState } from '@codesandbox/common/lib/utils/notifications';
-import { DNT, trackPageview } from '@codesandbox/common/lib/utils/analytics';
-import theme from '@codesandbox/common/lib/theme';
-import { Button } from '@codesandbox/common/lib/components/Button';
-import Loadable from 'app/utils/Loadable';
+import { NotificationStatus, Toasts } from '@codesandbox/notifications';
 import { useOvermind } from 'app/overmind';
+import Loadable from 'app/utils/Loadable';
+import React, { useEffect } from 'react';
+import { DragDropContext } from 'react-dnd';
+import { Redirect, Route, Switch, withRouter } from 'react-router-dom';
+
 import { ErrorBoundary } from './common/ErrorBoundary';
 import HTML5Backend from './common/HTML5BackendWithFolderSupport';
 import Modals from './common/Modals';
-import Sandbox from './Sandbox';
-import { NewSandbox } from './NewSandbox';
 import Dashboard from './Dashboard';
 import { DevAuthPage } from './DevAuth';
 import { Container, Content } from './elements';
+import { NewSandbox } from './NewSandbox';
+import Sandbox from './Sandbox';
 
 const routeDebugger = _debug('cs:app:router');