diff --git a/packages/app/src/app/overmind/namespaces/editor/actions.ts b/packages/app/src/app/overmind/namespaces/editor/actions.ts
index 99656df44bc..584f71d731f 100755
--- a/packages/app/src/app/overmind/namespaces/editor/actions.ts
+++ b/packages/app/src/app/overmind/namespaces/editor/actions.ts
@@ -50,15 +50,15 @@ export const addNpmDependency: AsyncAction<{
   }
 );
 
-export const npmDependencyRemoved: AsyncAction<{
-  name: string;
-}> = withOwnedSandbox(async ({ effects, actions }, { name }) => {
-  effects.analytics.track('Remove NPM Dependency');
+export const npmDependencyRemoved: AsyncAction<string> = withOwnedSandbox(
+  async ({ actions, effects }, name) => {
+    effects.analytics.track('Remove NPM Dependency');
 
-  await actions.editor.internal.removeNpmDependencyFromPackageJson(name);
+    await actions.editor.internal.removeNpmDependencyFromPackageJson(name);
 
-  effects.preview.executeCodeImmediately();
-});
+    effects.preview.executeCodeImmediately();
+  }
+);
 
 export const sandboxChanged: AsyncAction<{ id: string }> = withLoadApp<{
   id: string;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddResource/elements.js b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddResource/elements.ts
similarity index 63%
rename from packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddResource/elements.js
rename to packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddResource/elements.ts
index 339c599f431..db143837aa9 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddResource/elements.js
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddResource/elements.ts
@@ -3,3 +3,7 @@ import styled from 'styled-components';
 export const ButtonContainer = styled.div`
   margin: 0.5rem 1rem;
 `;
+
+export const Container = styled.div`
+  position: relative;
+`;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddResource/index.js b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddResource/index.js
deleted file mode 100644
index f3aff8009f0..00000000000
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddResource/index.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from 'react';
-
-import { Button } from '@codesandbox/common/lib/components/Button';
-import { ENTER } from '@codesandbox/common/lib/utils/keycodes';
-import { WorkspaceInputContainer } from '../../elements';
-import { ButtonContainer } from './elements';
-
-const initialState = {
-  name: '',
-};
-
-export class AddResource extends React.PureComponent {
-  state = initialState;
-
-  setName = e => {
-    const name = e.target.value;
-    this.setState({ name });
-  };
-
-  addResource = async () => {
-    if (this.state.name) {
-      await this.props.addResource(this.state.name.trim());
-      this.setState(initialState);
-    }
-  };
-
-  handleKeyUp = e => {
-    if (e.keyCode === ENTER) {
-      this.addResource();
-    }
-  };
-
-  render() {
-    const { name } = this.state;
-    const isValid = name !== '';
-    return (
-      <div style={{ position: 'relative' }}>
-        <WorkspaceInputContainer>
-          <input
-            placeholder="https://cdn.com/bootstrap.css"
-            value={name}
-            onChange={this.setName}
-            onKeyUp={this.handleKeyUp}
-          />
-        </WorkspaceInputContainer>
-        <ButtonContainer>
-          <Button disabled={!isValid} block small onClick={this.addResource}>
-            Add Resource
-          </Button>
-        </ButtonContainer>
-      </div>
-    );
-  }
-}
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddResource/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddResource/index.tsx
new file mode 100644
index 00000000000..8558aa89492
--- /dev/null
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddResource/index.tsx
@@ -0,0 +1,57 @@
+import { Button } from '@codesandbox/common/lib/components/Button';
+import { ENTER } from '@codesandbox/common/lib/utils/keycodes';
+import React, {
+  ChangeEvent,
+  FunctionComponent,
+  KeyboardEvent,
+  useState,
+} from 'react';
+
+import { useOvermind } from 'app/overmind';
+
+import { WorkspaceInputContainer } from '../../elements';
+
+import { ButtonContainer, Container } from './elements';
+
+export const AddResource: FunctionComponent = () => {
+  const {
+    actions: {
+      workspace: { externalResourceAdded },
+    },
+  } = useOvermind();
+  const [name, setName] = useState('');
+
+  const addResource = async () => {
+    if (name) {
+      await externalResourceAdded(name.trim());
+
+      setName('');
+    }
+  };
+  const changeName = ({ target: { value } }: ChangeEvent<HTMLInputElement>) =>
+    setName(value);
+  const handleKeyUp = ({ keyCode }: KeyboardEvent<HTMLInputElement>) => {
+    if (keyCode === ENTER) {
+      addResource();
+    }
+  };
+
+  return (
+    <Container>
+      <WorkspaceInputContainer>
+        <input
+          onChange={changeName}
+          onKeyUp={handleKeyUp}
+          placeholder="https://cdn.com/bootstrap.css"
+          value={name}
+        />
+      </WorkspaceInputContainer>
+
+      <ButtonContainer>
+        <Button block disabled={name === ''} onClick={addResource} small>
+          Add Resource
+        </Button>
+      </ButtonContainer>
+    </Container>
+  );
+};
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddVersion/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddVersion/elements.ts
index 339c599f431..db143837aa9 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddVersion/elements.ts
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddVersion/elements.ts
@@ -3,3 +3,7 @@ import styled from 'styled-components';
 export const ButtonContainer = styled.div`
   margin: 0.5rem 1rem;
 `;
+
+export const Container = styled.div`
+  position: relative;
+`;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddVersion/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddVersion/index.tsx
index a45c29dbef2..df7c4ace809 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddVersion/index.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddVersion/index.tsx
@@ -3,7 +3,7 @@ import React, { FunctionComponent } from 'react';
 
 import { useOvermind } from 'app/overmind';
 
-import { ButtonContainer } from './elements';
+import { ButtonContainer, Container } from './elements';
 
 export const AddVersion: FunctionComponent = ({ children }) => {
   const {
@@ -11,7 +11,7 @@ export const AddVersion: FunctionComponent = ({ children }) => {
   } = useOvermind();
 
   return (
-    <div style={{ position: 'relative' }}>
+    <Container>
       <ButtonContainer>
         <Button
           block
@@ -21,6 +21,6 @@ export const AddVersion: FunctionComponent = ({ children }) => {
           {children}
         </Button>
       </ButtonContainer>
-    </div>
+    </Container>
   );
 };
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/ExternalResource/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/ExternalResource.tsx
similarity index 90%
rename from packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/ExternalResource/index.tsx
rename to packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/ExternalResource.tsx
index 5dfcde4fcab..9b9041f5b44 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/ExternalResource/index.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/ExternalResource.tsx
@@ -3,9 +3,9 @@ import CrossIcon from 'react-icons/lib/md/clear';
 
 import { useOvermind } from 'app/overmind';
 
-import { EntryContainer, IconArea, Icon } from '../../elements';
+import { EntryContainer, IconArea, Icon } from '../elements';
 
-import { Link } from '../elements';
+import { Link } from './elements';
 
 const getNormalizedUrl = (url: string) => `${url.replace(/\/$/g, '')}/`;
 
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/index.tsx
index 96f969d1727..01350cffdd6 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/index.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/index.tsx
@@ -15,7 +15,6 @@ import { VersionEntry } from './VersionEntry';
 export const Dependencies: FunctionComponent = () => {
   const {
     actions: {
-      workspace: { externalResourceAdded },
       editor: { addNpmDependency, npmDependencyRemoved },
     },
     state: {
@@ -56,7 +55,7 @@ export const Dependencies: FunctionComponent = () => {
               dependency={dependency}
               key={dependency}
               onRefresh={(name, version) => addNpmDependency({ name, version })}
-              onRemove={name => npmDependencyRemoved({ name })}
+              onRemove={name => npmDependencyRemoved(name)}
             />
           ))}
 
@@ -72,7 +71,7 @@ export const Dependencies: FunctionComponent = () => {
               dependency={dependency}
               key={dependency}
               onRefresh={(name, version) => addNpmDependency({ name, version })}
-              onRemove={npmDependencyRemoved}
+              onRemove={name => npmDependencyRemoved(name)}
             />
           ))} */}
 
@@ -83,9 +82,7 @@ export const Dependencies: FunctionComponent = () => {
         <div>
           <WorkspaceSubtitle>External Resources</WorkspaceSubtitle>
 
-          <AddResource
-            addResource={resource => externalResourceAdded(resource)}
-          />
+          <AddResource />
 
           {otherResources.map(resource => (
             <ExternalResource key={resource} resource={resource} />
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Dependencies/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Dependencies/index.tsx
index caecdddd617..5b4b46d77bd 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Dependencies/index.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Dependencies/index.tsx
@@ -52,7 +52,7 @@ export const Dependencies: FunctionComponent = () => {
               dependency={dependency}
               key={dependency}
               onRefresh={(name, version) => addNpmDependency({ name, version })}
-              onRemove={name => npmDependencyRemoved({ name })}
+              onRemove={npmDependencyRemoved}
             />
           ))}
       </List>
diff --git a/packages/common/src/types/index.ts b/packages/common/src/types/index.ts
index c4660ff4b29..b9dd9ba1a01 100644
--- a/packages/common/src/types/index.ts
+++ b/packages/common/src/types/index.ts
@@ -435,18 +435,10 @@ export type PackageJSON = {
   keywords?: string[];
   main?: string;
   module?: string;
-  scripts?: {
-    [command: string]: string;
-  };
-  dependencies?: {
-    [dep: string]: string;
-  };
-  devDependencies?: {
-    [dep: string]: string;
-  };
-  jest?: {
-    setupFilesAfterEnv?: string[];
-  };
+  scripts?: { [command: string]: string; };
+  dependencies?: { [dependency: string]: string; };
+  devDependencies?: { [dependency: string]: string; };
+  jest?: { setupFilesAfterEnv?: string[]; };
   resolutions?: { [dependency: string]: string };
 };