diff --git a/package.json b/package.json
index 8ef23ce7..6b4bb9e3 100644
--- a/package.json
+++ b/package.json
@@ -85,7 +85,7 @@
"jsdom": "^22.1.0",
"prettier": "3.0.3",
"react": "^18.2.0",
- "react-dom": "^18.2.0",
+ "react-dom": "^18.3.1",
"resize-observer-polyfill": "^1.5.1",
"rimraf": "^5.0.1",
"serve": "^14.2.1",
@@ -117,17 +117,12 @@
"@fontsource/inconsolata": "^5",
"@fontsource/inter": "^5",
"@types/react": "*",
- "@types/react-dom": "*",
"@vector-im/compound-design-tokens": ">=1.0.0 <2.0.0",
- "react": "^17 || ^18",
- "react-dom": "^17 || ^18"
+ "react": "^17 || ^18"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
- },
- "@types/react-dom": {
- "optional": true
}
},
"resolutions": {
diff --git a/src/components/Avatar/AvatarStack.tsx b/src/components/Avatar/AvatarStack.tsx
index 84ae46cd..e17684b1 100644
--- a/src/components/Avatar/AvatarStack.tsx
+++ b/src/components/Avatar/AvatarStack.tsx
@@ -16,10 +16,8 @@ limitations under the License.
import classnames from "classnames";
import React, { useEffect } from "react";
-import { renderToStaticMarkup } from "react-dom/server";
import styles from "./Avatar.module.css";
-
-import AvatarClipPath from "./avatar-clip.mask.svg";
+import clipMask from "./avatar-clip.mask.svg?raw";
type AvatarStackProps = {
className?: string;
@@ -51,9 +49,11 @@ export const AvatarStack: React.FC<
*/
useEffect(() => {
if (AvatarStackUsageCount === 0) {
- const svgMask = renderToStaticMarkup(
- ,
- );
+ const svgMask = `
+
+ ${clipMask}
+
+ `;
document.body.insertAdjacentHTML("beforeend", svgMask);
}
AvatarStackUsageCount++;
diff --git a/vite.config.ts b/vite.config.ts
index a9c8f64a..7804bc64 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -27,8 +27,6 @@ export default defineConfig({
// It includes all dependencies except @vector-im/compound-design-tokens
external: [
"react",
- "react-dom",
- "react-dom/server",
"react/jsx-runtime",
"react/jsx-dev-runtime",
"classnames",
diff --git a/yarn.lock b/yarn.lock
index ea31af9b..17decc04 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7909,7 +7909,8 @@ prelude-ls@^1.2.1:
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
-"prettier-fallback@npm:prettier@^3":
+"prettier-fallback@npm:prettier@^3", prettier@^3.1.1:
+ name prettier-fallback
version "3.2.5"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.2.5.tgz#e52bc3090586e824964a8813b09aba6233b28368"
integrity sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==
@@ -7926,11 +7927,6 @@ prettier@3.0.3:
resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.0.3.tgz#432a51f7ba422d1469096c0fdc28e235db8f9643"
integrity sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==
-prettier@^3.1.1:
- version "3.2.5"
- resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.2.5.tgz#e52bc3090586e824964a8813b09aba6233b28368"
- integrity sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==
-
pretty-format@^27.0.2:
version "27.5.1"
resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.5.1.tgz#2181879fdea51a7a5851fb39d920faa63f01d88e"
@@ -8124,7 +8120,7 @@ react-docgen@^7.0.0:
resolve "^1.22.1"
strip-indent "^4.0.0"
-"react-dom@^16.8.0 || ^17.0.0 || ^18.0.0":
+"react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", react-dom@^18.3.1:
version "18.3.1"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
@@ -8132,14 +8128,6 @@ react-docgen@^7.0.0:
loose-envify "^1.1.0"
scheduler "^0.23.2"
-react-dom@^18.2.0:
- version "18.2.0"
- resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
- integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
- dependencies:
- loose-envify "^1.1.0"
- scheduler "^0.23.0"
-
react-element-to-jsx-string@^15.0.0:
version "15.0.0"
resolved "https://registry.yarnpkg.com/react-element-to-jsx-string/-/react-element-to-jsx-string-15.0.0.tgz#1cafd5b6ad41946ffc8755e254da3fc752a01ac6"
@@ -8596,13 +8584,6 @@ saxes@^6.0.0:
dependencies:
xmlchars "^2.2.0"
-scheduler@^0.23.0:
- version "0.23.0"
- resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
- integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
- dependencies:
- loose-envify "^1.1.0"
-
scheduler@^0.23.2:
version "0.23.2"
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3"