diff --git a/packages/components/package.json b/packages/components/package.json
index c7ef4dc8..e6413a16 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -12,7 +12,6 @@
     "lodash": "^4.17.21",
     "react": "^18.1.0",
     "react-ace": "^10.1.0",
-    "react-dom": "^18.1.0",
     "react-hook-form": "^7.32.0",
     "react-use": "^17.4.0",
     "react-vega": "^7.5.1",
@@ -46,6 +45,8 @@
     "postcss-cli": "^9.1.0",
     "postcss-import": "^14.1.0",
     "postcss-loader": "^7.0.0",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "react-scripts": "^5.0.1",
     "style-loader": "^3.3.1",
     "tailwindcss": "^3.1.2",
@@ -57,6 +58,10 @@
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.9.2"
   },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17 || ^18",
+    "react-dom": "^16.8.0 || ^17 || ^18"
+  },
   "scripts": {
     "start": "cross-env REACT_APP_FAST_REFRESH=false && start-storybook -p 6006 -s public",
     "build": "tsc -b && postcss ./src/styles/main.css -o ./dist/main.css && build-storybook -s public",
diff --git a/packages/components/webpack.config.js b/packages/components/webpack.config.js
index 16898032..06980076 100644
--- a/packages/components/webpack.config.js
+++ b/packages/components/webpack.config.js
@@ -37,7 +37,17 @@ module.exports = {
     port: 9000,
   },
   externals: {
-    react: "React",
-    "react-dom": "ReactDOM",
+    react: {
+      commonjs: "react",
+      commonjs2: "react",
+      amd: "react",
+      root: "React",
+    },
+    "react-dom": {
+      commonjs: "react-dom",
+      commonjs2: "react-dom",
+      amd: "react-dom",
+      root: "ReactDOM",
+    },
   },
 };