diff --git a/packages/app/package.json b/packages/app/package.json
index 31240812f3f..a214fd99c91 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -252,6 +252,7 @@
     "@types/phoenix": "^1.4.0",
     "@types/prop-types": "^15.7.0",
     "@types/react": "^16.8.12",
+    "@types/react-color": "^2.17.3",
     "@types/react-dom": "^16.8.3",
     "@types/react-helmet": "^5.0.11",
     "@types/react-icons": "2.2.7",
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/TemplateConfig/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/TemplateConfig/index.tsx
index d793d3c1bd5..16a93598138 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/TemplateConfig/index.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/TemplateConfig/index.tsx
@@ -64,7 +64,6 @@ export const TemplateConfig: FunctionComponent = () => {
               <SketchPicker
                 color={selectedColor}
                 disableAlpha
-                id="color"
                 onChangeComplete={({ hex }) => setSelectedColor(hex)}
                 presetColors={[...new Set(colors)]}
               />
diff --git a/standalone-packages/vscode-textmate/package-lock.json b/standalone-packages/vscode-textmate/package-lock.json
index 587f2306d91..6d8e3f0d114 100644
--- a/standalone-packages/vscode-textmate/package-lock.json
+++ b/standalone-packages/vscode-textmate/package-lock.json
@@ -57,7 +57,6 @@
       "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz",
       "integrity": "sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=",
       "dev": true,
-      "optional": true,
       "requires": {
         "kind-of": "^3.0.2",
         "longest": "^1.0.1",
@@ -1288,8 +1287,7 @@
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
       "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "is-builtin-module": {
       "version": "1.0.0",
@@ -1513,7 +1511,6 @@
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
       "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
       "dev": true,
-      "optional": true,
       "requires": {
         "is-buffer": "^1.1.5"
       }
@@ -1717,8 +1714,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz",
       "integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "loose-envify": {
       "version": "1.3.1",
@@ -2437,8 +2433,7 @@
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
       "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "repeating": {
       "version": "2.0.1",
diff --git a/yarn.lock b/yarn.lock
index 1082d91f098..f53159ba289 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4276,6 +4276,13 @@
     "@types/history" "*"
     "@types/react" "*"
 
+"@types/react-color@^2.17.3":
+  version "2.17.3"
+  resolved "https://registry.yarnpkg.com/@types/react-color/-/react-color-2.17.3.tgz#92a67b2dc5783a9220bc52804f8fade93696a1fe"
+  integrity sha512-ewFUB9mNXuqT2UMbiYNqXiUWt857VinGaElhX0Gk+kT1BrXel0imzRp1FeWntHpr+uHkKAnJbr5e4Yc4vP1BRg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-dom@^16.8.3":
   version "16.8.3"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.8.3.tgz#6131b7b6158bc7ed1925a3374b88b7c00481f0cb"