Fix ImageZoom, Vencord Notifications & ReactErrorDecoder

Author: Nuckyz

src/api/Notifications/Notifications.tsx

@@ -18,7 +18,7 @@
 
 import { Settings } from "@api/Settings";
 import { Queue } from "@utils/Queue";
-import { ReactDOM } from "@webpack/common";
+import { createRoot } from "@webpack/common";
 import type { ReactNode } from "react";
 import type { Root } from "react-dom/client";
 
@@ -35,7 +35,7 @@ function getRoot() {
         const container = document.createElement("div");
         container.id = "vc-notification-container";
         document.body.append(container);
-        reactRoot = ReactDOM.createRoot(container);
+        reactRoot = createRoot(container);
     }
     return reactRoot;
 }

src/plugins/consoleShortcuts/index.ts

@@ -136,7 +136,7 @@ function makeShortcuts() {
                 });
             }
 
-            const root = Common.ReactDOM.createRoot(doc.body.appendChild(document.createElement("div")));
+            const root = Common.createRoot(doc.body.appendChild(document.createElement("div")));
             root.render(Common.React.createElement(component, props));
 
             doc.addEventListener("close", () => root.unmount(), { once: true });

src/plugins/imageZoom/index.tsx

@@ -23,7 +23,7 @@ import { debounce } from "@shared/debounce";
 import { Devs } from "@utils/constants";
 import { Logger } from "@utils/Logger";
 import definePlugin, { OptionType } from "@utils/types";
-import { Menu, ReactDOM } from "@webpack/common";
+import { createRoot, Menu } from "@webpack/common";
 import { JSX } from "react";
 import type { Root } from "react-dom/client";
 
@@ -242,7 +242,7 @@ export default definePlugin({
             if (instance.props.id === ELEMENT_ID) {
                 if (!this.currentMagnifierElement) {
                     this.currentMagnifierElement = <Magnifier size={settings.store.size} zoom={settings.store.zoom} instance={instance} />;
-                    this.root = ReactDOM.createRoot(this.element!);
+                    this.root = createRoot(this.element!);
                     this.root.render(this.currentMagnifierElement);
                 }
             }

src/plugins/reactErrorDecoder/index.ts

@@ -20,21 +20,20 @@ import { Devs } from "@utils/constants";
 import definePlugin from "@utils/types";
 import { React } from "@webpack/common";
 
-let ERROR_CODES: any;
+let ERROR_CODES: Record<string, string> | undefined;
 
 export default definePlugin({
     name: "ReactErrorDecoder",
     description: 'Replaces "Minifed React Error" with the actual error.',
     authors: [Devs.Cyn, Devs.maisymoe],
     patches: [
         {
-            find: '"https://reactjs.org/docs/error-decoder.html?invariant="',
+            find: "React has blocked a javascript: URL as a security precaution.",
             replacement: {
-                match: /(function .\(.\)){(for\(var .="https:\/\/reactjs\.org\/docs\/error-decoder\.html\?invariant="\+.,.=1;.<arguments\.length;.\+\+\).\+="&args\[\]="\+encodeURIComponent\(arguments\[.\]\);return"Minified React error #"\+.\+"; visit "\+.\+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings.")}/,
-                replace: (_, func, original) =>
-                    `${func}{var decoded=$self.decodeError.apply(null, arguments);if(decoded)return decoded;${original}}`,
-            },
-        },
+                match: /"https:\/\/react.dev\/errors\/"\+\i;/,
+                replace: "$&const vcDecodedError=$self.decodeError(...arguments);if(vcDecodedError)return vcDecodedError;"
+            }
+        }
     ],
 
     async start() {
@@ -56,5 +55,5 @@ export default definePlugin({
             index++;
             return arg;
         });
-    },
+    }
 });

src/webpack/common/react.ts

@@ -17,7 +17,7 @@
 */
 
 // eslint-disable-next-line path-alias/no-relative
-import { findByPropsLazy, waitFor } from "../webpack";
+import { findByCodeLazy, findByPropsLazy, waitFor } from "../webpack";
 
 export let React: typeof import("react");
 export let useState: typeof React.useState;
@@ -28,7 +28,9 @@ export let useRef: typeof React.useRef;
 export let useReducer: typeof React.useReducer;
 export let useCallback: typeof React.useCallback;
 
-export const ReactDOM: typeof import("react-dom") & typeof import("react-dom/client") = findByPropsLazy("createPortal");
+export const ReactDOM: typeof import("react-dom") = findByPropsLazy("createPortal");
+// 299 is an error code used in createRoot and createPortal
+export const createRoot: typeof import("react-dom/client").createRoot = findByCodeLazy("(299));", ".onRecoverableError");
 
 waitFor("useState", m => {
     React = m;