diff --git a/packages/api-explorer/package.json b/packages/api-explorer/package.json
index 43a3efd7f..81e443d23 100644
--- a/packages/api-explorer/package.json
+++ b/packages/api-explorer/package.json
@@ -25,8 +25,7 @@
     "@readme/oas-form": "^10.0.0",
     "@readme/oas-to-har": "^10.0.0",
     "@readme/oas-to-snippet": "^10.0.1",
-    "@readme/syntax-highlighter": "^10.3.1",
-    "@readme/variable": "^10.0.0",
+    "@readme/syntax-highlighter": "^10.4.0",
     "classnames": "^2.2.5",
     "fetch-har": "^4.0.2",
     "js-cookie": "^2.1.4",
@@ -42,6 +41,7 @@
   "peerDependencies": {
     "@readme/markdown": "^6.21.0",
     "@readme/ui": "^1.16.1",
+    "@readme/variable": "^10.0.0",
     "react": "16.x",
     "react-dom": "16.x"
   },
@@ -50,6 +50,7 @@
     "@readme/markdown": "^6.21.0",
     "@readme/oas-examples": "^3.6.0",
     "@readme/ui": "^1.16.1",
+    "@readme/variable": "^10.0.0",
     "@testing-library/dom": "^7.26.3",
     "css-loader": "^4.3.0",
     "eslint": "^7.0.0",
diff --git a/packages/api-explorer/webpack.config.js b/packages/api-explorer/webpack.config.js
index d67cd0fce..4dc901bb6 100644
--- a/packages/api-explorer/webpack.config.js
+++ b/packages/api-explorer/webpack.config.js
@@ -4,6 +4,7 @@ module.exports = {
   entry: ['whatwg-fetch', './src/index.jsx'],
   externals: {
     '@readme/markdown': '@readme/markdown',
+    '@readme/variable': '@readme/variable',
     react: {
       root: 'React',
       commonjs: 'react',