Merge pull request #1517 from mchangrh/react-18

React 18
2024-11-10 01:01:55 +01:00 · 2022-10-07 22:54:51 -04:00 · 2022-10-07 22:54:51 -04:00 · 83ea183f58
commit 83ea183f58
parent 5c9e06468e 81e85c19ae
17 changed files with 112 additions and 96 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -27,15 +27,15 @@
      ],
      "license": "LGPL-3.0-or-later",
      "dependencies": {
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2"
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
      },
      "devDependencies": {
        "@types/chrome": "^0.0.197",
        "@types/firefox-webext-browser": "^94.0.1",
        "@types/jest": "^29.1.2",
-        "@types/react": "^17.0.47",
-        "@types/react-dom": "^17.0.17",
+        "@types/react": "^18.0.21",
+        "@types/react-dom": "^18.0.6",
        "@types/selenium-webdriver": "^4.1.5",
        "@types/wicg-mediasession": "^1.1.4",
        "@typescript-eslint/eslint-plugin": "^5.39.0",
@ -1942,9 +1942,9 @@
      "dev": true
    },
    "node_modules/@types/react": {
-      "version": "17.0.47",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.47.tgz",
-      "integrity": "sha512-mk0BL8zBinf2ozNr3qPnlu1oyVTYq+4V7WA76RgxUAtf0Em/Wbid38KN6n4abEkvO4xMTBWmnP1FtQzgkEiJoA==",
+      "version": "18.0.21",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.21.tgz",
+      "integrity": "sha512-7QUCOxvFgnD5Jk8ZKlUAhVcRj7GuJRjnjjiY/IUBWKgOlnvDvTMLD4RTF7NPyVmbRhNrbomZiOepg7M/2Kj1mA==",
      "dev": true,
      "dependencies": {
        "@types/prop-types": "*",
@ -1953,12 +1953,12 @@
      }
    },
    "node_modules/@types/react-dom": {
-      "version": "17.0.17",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.17.tgz",
-      "integrity": "sha512-VjnqEmqGnasQKV0CWLevqMTXBYG9GbwuE6x3VetERLh0cq2LTptFE73MrQi2S7GkKXCf2GgwItB/melLnxfnsg==",
+      "version": "18.0.6",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.6.tgz",
+      "integrity": "sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==",
      "dev": true,
      "dependencies": {
-        "@types/react": "^17"
+        "@types/react": "*"
      }
    },
    "node_modules/@types/responselike": {
@ -10299,6 +10299,7 @@
    "node_modules/object-assign": {
      "version": "4.1.1",
      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+      "dev": true,
      "engines": {
        "node": ">=0.10.0"
      }
@ -11071,26 +11072,26 @@
      }
    },
    "node_modules/react": {
-      "version": "17.0.2",
-      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
      "dependencies": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
+        "loose-envify": "^1.1.0"
      },
      "engines": {
        "node": ">=0.10.0"
      }
    },
    "node_modules/react-dom": {
-      "version": "17.0.2",
-      "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
      "dependencies": {
        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "scheduler": "^0.20.2"
+        "scheduler": "^0.23.0"
      },
      "peerDependencies": {
-        "react": "17.0.2"
+        "react": "^18.2.0"
      }
    },
    "node_modules/react-is": {
@ -11471,11 +11472,11 @@
      }
    },
    "node_modules/scheduler": {
-      "version": "0.20.2",
-      "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
      "dependencies": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
+        "loose-envify": "^1.1.0"
      }
    },
    "node_modules/schema-utils": {
@ -15065,9 +15066,9 @@
      "dev": true
    },
    "@types/react": {
-      "version": "17.0.47",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.47.tgz",
-      "integrity": "sha512-mk0BL8zBinf2ozNr3qPnlu1oyVTYq+4V7WA76RgxUAtf0Em/Wbid38KN6n4abEkvO4xMTBWmnP1FtQzgkEiJoA==",
+      "version": "18.0.21",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.21.tgz",
+      "integrity": "sha512-7QUCOxvFgnD5Jk8ZKlUAhVcRj7GuJRjnjjiY/IUBWKgOlnvDvTMLD4RTF7NPyVmbRhNrbomZiOepg7M/2Kj1mA==",
      "dev": true,
      "requires": {
        "@types/prop-types": "*",
@ -15076,12 +15077,12 @@
      }
    },
    "@types/react-dom": {
-      "version": "17.0.17",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.17.tgz",
-      "integrity": "sha512-VjnqEmqGnasQKV0CWLevqMTXBYG9GbwuE6x3VetERLh0cq2LTptFE73MrQi2S7GkKXCf2GgwItB/melLnxfnsg==",
+      "version": "18.0.6",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.6.tgz",
+      "integrity": "sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==",
      "dev": true,
      "requires": {
-        "@types/react": "^17"
+        "@types/react": "*"
      }
    },
    "@types/responselike": {
@ -21217,7 +21218,8 @@
    },
    "object-assign": {
      "version": "4.1.1",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+      "dev": true
    },
    "object-inspect": {
      "version": "1.12.0",
@ -21792,20 +21794,20 @@
      }
    },
    "react": {
-      "version": "17.0.2",
-      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
      "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
+        "loose-envify": "^1.1.0"
      }
    },
    "react-dom": {
-      "version": "17.0.2",
-      "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
      "requires": {
        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "scheduler": "^0.20.2"
+        "scheduler": "^0.23.0"
      }
    },
    "react-is": {
@ -22099,11 +22101,11 @@
      }
    },
    "scheduler": {
-      "version": "0.20.2",
-      "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
      "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
+        "loose-envify": "^1.1.0"
      }
    },
    "schema-utils": {
--- a/package.json
+++ b/package.json
@ -4,15 +4,15 @@
  "description": "",
  "main": "background.js",
  "dependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/chrome": "^0.0.197",
    "@types/firefox-webext-browser": "^94.0.1",
    "@types/jest": "^29.1.2",
-    "@types/react": "^17.0.47",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.21",
+    "@types/react-dom": "^18.0.6",
    "@types/selenium-webdriver": "^4.1.5",
    "@types/wicg-mediasession": "^1.1.4",
    "@typescript-eslint/eslint-plugin": "^5.39.0",
--- a/src/components/NoticeComponent.tsx
+++ b/src/components/NoticeComponent.tsx
@ -36,6 +36,7 @@ export interface NoticeProps {
    zIndex?: number,
    style?: React.CSSProperties
    biggerCloseButton?: boolean;
+    children?: React.ReactNode
 }

 export interface NoticeState {
--- a/src/components/NoticeTextSectionComponent.tsx
+++ b/src/components/NoticeTextSectionComponent.tsx
@ -4,7 +4,8 @@ export interface NoticeTextSelectionProps {
    icon?: string,
    text: string,
    idSuffix: string,
-    onClick?: (event: React.MouseEvent) => unknown
+    onClick?: (event: React.MouseEvent) => unknown,
+    children?: React.ReactNode
 }

 export interface NoticeTextSelectionState {
--- a/src/components/SponsorTimeEditComponent.tsx
+++ b/src/components/SponsorTimeEditComponent.tsx
@ -23,6 +23,7 @@ export interface SponsorTimeEditProps {
    submissionNotice: SubmissionNoticeComponent;
    categoryList?: Category[];
    categoryChangeListener?: (index: number, category: Category) => void;
+    children?: React.ReactNode;
 }

 export interface SponsorTimeEditState {
--- a/src/components/options/CategorySkipOptionsComponent.tsx
+++ b/src/components/options/CategorySkipOptionsComponent.tsx
@ -13,6 +13,7 @@ export interface CategorySkipOptionsProps {
    category: Category;
    defaultColor?: string;
    defaultPreviewColor?: string;
+    children?: React.ReactNode;
 }

 export interface CategorySkipOptionsState {
--- a/src/components/options/KeybindComponent.tsx
+++ b/src/components/options/KeybindComponent.tsx
@ -1,5 +1,5 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot, Root } from 'react-dom/client';
 import Config from "../../config";
 import { Keybind } from "../../types";
 import KeybindDialogComponent from "./KeybindDialogComponent";
@ -14,6 +14,7 @@ export interface KeybindState {
 }

 let dialog;
+let root: Root;

 class KeybindComponent extends React.Component<KeybindProps, KeybindState> {
    constructor(props: KeybindProps) {
@ -56,11 +57,12 @@ class KeybindComponent extends React.Component<KeybindProps, KeybindState> {
        dialog = parent.document.createElement("div");
        dialog.id = "keybind-dialog";
        parent.document.body.prepend(dialog);
-        ReactDOM.render(<KeybindDialogComponent option={this.props.option} closeListener={(updateWith) => this.closeEditDialog(updateWith)} />, dialog);
+        root = createRoot(dialog);
+        root.render(<KeybindDialogComponent option={this.props.option} closeListener={(updateWith) => this.closeEditDialog(updateWith)} />);
    }

    closeEditDialog(updateWith: Keybind): void {
-        ReactDOM.unmountComponentAtNode(dialog);
+        root.unmount();
        dialog.remove();
        if (updateWith != null)
            this.setState({keybind: updateWith});
--- a/src/components/options/UnsubmittedVideoListItem.tsx
+++ b/src/components/options/UnsubmittedVideoListItem.tsx
@ -5,6 +5,7 @@ import { exportTimes, exportTimesAsHashParam } from "../../utils/exporter";

 export interface UnsubmittedVideosListItemProps {
    videoID: string;
+    children?: React.ReactNode;
 }

 export interface UnsubmittedVideosListItemState {
--- a/src/options.ts
+++ b/src/options.ts
@ -1,5 +1,5 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot } from 'react-dom/client';

 import Config from "./config";
 import * as CompileConfig from "../config.json";
@ -258,7 +258,8 @@ async function init() {
                break;
            }
            case "keybind-change": {
-                ReactDOM.render(React.createElement(KeybindComponent, {option: option}), optionsElements[i].querySelector("div"));
+                const root = createRoot(optionsElements[i].querySelector("div"));
+                root.render(React.createElement(KeybindComponent, {option: option}));
                break;
            }
            case "display": {
--- a/src/render/CategoryChooser.tsx
+++ b/src/render/CategoryChooser.tsx
@ -1,5 +1,6 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot } from 'react-dom/client';
+
 import CategoryChooserComponent from "../components/options/CategoryChooserComponent";

 class CategoryChooser {
@ -9,9 +10,9 @@ class CategoryChooser {
    constructor(element: Element) {
        this.ref = React.createRef();

-        ReactDOM.render(
-            <CategoryChooserComponent ref={this.ref} />,
-            element
+        const root = createRoot(element);
+        root.render(
+            <CategoryChooserComponent ref={this.ref} />
        );
    }

--- a/src/render/ChapterVote.tsx
+++ b/src/render/ChapterVote.tsx
@ -1,5 +1,5 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot, Root } from 'react-dom/client';
 import ChapterVoteComponent, { ChapterVoteState } from "../components/ChapterVoteComponent";
 import { VoteResponse } from "../messageTypes";
 import { Category, SegmentUUID, SponsorTime } from "../types";
@ -7,6 +7,7 @@ import { Category, SegmentUUID, SponsorTime } from "../types";
 export class ChapterVote {
    container: HTMLElement;
    ref: React.RefObject<ChapterVoteComponent>;
+    root: Root;

    unsavedState: ChapterVoteState;

@ -19,10 +20,8 @@ export class ChapterVote {
        this.container.id = "chapterVote";
        this.container.style.height = "100%";

-        ReactDOM.render(
-            <ChapterVoteComponent ref={this.ref} vote={vote} />,
-            this.container
-        );
+        this.root = createRoot(this.container);
+        this.root.render(<ChapterVoteComponent ref={this.ref} vote={vote} />);
    }

    getContainer(): HTMLElement {
@ -30,7 +29,7 @@ export class ChapterVote {
    }

    close(): void {
-        ReactDOM.unmountComponentAtNode(this.container);
+        this.root.unmount();
        this.container.remove();
    }

--- a/src/render/GenericNotice.tsx
+++ b/src/render/GenericNotice.tsx
@ -1,5 +1,5 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot, Root } from 'react-dom/client';
 import NoticeComponent from "../components/NoticeComponent";

 import Utils from "../utils";
@ -35,6 +35,7 @@ export default class GenericNotice {
    noticeElement: HTMLDivElement;
    noticeRef: React.MutableRefObject<NoticeComponent>;
    idSuffix: string;
+    root: Root;

    constructor(contentContainer: ContentContainer, idSuffix: string, options: NoticeOptions) {
        this.noticeRef = React.createRef();
@ -49,11 +50,13 @@ export default class GenericNotice {

        referenceNode.prepend(this.noticeElement);

-        this.update(options);        
+        this.root = createRoot(this.noticeElement);
+
+        this.update(options);
    }

    update(options: NoticeOptions): void {
-        ReactDOM.render(
+        this.root.render(
            <NoticeComponent
                noticeTitle={options.title}
                idSuffix={this.idSuffix}
@ -92,8 +95,7 @@ export default class GenericNotice {
                        </>
                    : null}

-            </NoticeComponent>,
-            this.noticeElement
+            </NoticeComponent>
        );
    }

@ -137,7 +139,7 @@ export default class GenericNotice {
    }

    close(): void {
-        ReactDOM.unmountComponentAtNode(this.noticeElement);
+        this.root.unmount();

        this.noticeElement.remove();
    }
--- a/src/render/RectangleTooltip.tsx
+++ b/src/render/RectangleTooltip.tsx
@ -1,5 +1,5 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot, Root } from 'react-dom/client';

 export interface RectangleTooltipProps {
    text: string, 
@ -20,7 +20,7 @@ export interface RectangleTooltipProps {
 export class RectangleTooltip {
    text: string;   
    container: HTMLDivElement;
-
+    root: Root;
    timer: NodeJS.Timeout;
    
    constructor(props: RectangleTooltipProps) {
@ -47,7 +47,8 @@ export class RectangleTooltip {
            this.timer = setTimeout(() => this.close(), props.timeout * 1000);
        }

-        ReactDOM.render(
+        this.root = createRoot(this.container);
+        this.root.render(
            <div style={{
                bottom: props.bottomOffset, 
                left: props.leftOffset,
@ -81,13 +82,12 @@ export class RectangleTooltip {

                        {chrome.i18n.getMessage("GotIt")}
                    </button>
-            </div>,
-            this.container
+            </div>
        )
    }

    close(): void {
-        ReactDOM.unmountComponentAtNode(this.container);
+        this.root.unmount();
        this.container.remove();

        if (this.timer) clearTimeout(this.timer);
--- a/src/render/SkipNotice.tsx
+++ b/src/render/SkipNotice.tsx
@ -1,5 +1,5 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot, Root } from 'react-dom/client';

 import Utils from "../utils";
 const utils = new Utils();
@ -18,6 +18,7 @@ class SkipNotice {
    noticeElement: HTMLDivElement;

    skipNoticeRef: React.MutableRefObject<SkipNoticeComponent>;
+    root: Root;

    constructor(segments: SponsorTime[], autoSkip = false, contentContainer: ContentContainer, unskipTime: number = null, startReskip = false) {
        this.skipNoticeRef = React.createRef();
@ -41,7 +42,8 @@ class SkipNotice {

        referenceNode.prepend(this.noticeElement);

-        ReactDOM.render(
+        this.root = createRoot(this.noticeElement);
+        this.root.render(
            <SkipNoticeComponent segments={segments} 
                autoSkip={autoSkip} 
                startReskip={startReskip}
@ -50,8 +52,7 @@ class SkipNotice {
                closeListener={() => this.close()}
                smaller={Config.config.noticeVisibilityMode >= NoticeVisbilityMode.MiniForAll 
                    || (Config.config.noticeVisibilityMode >= NoticeVisbilityMode.MiniForAutoSkip && autoSkip)}
-                unskipTime={unskipTime} />,
-            this.noticeElement
+                unskipTime={unskipTime} />
        );
    }

@ -62,7 +63,7 @@ class SkipNotice {
    }

    close(): void {
-        ReactDOM.unmountComponentAtNode(this.noticeElement);
+        this.root.unmount();

        this.noticeElement.remove();

--- a/src/render/SubmissionNotice.tsx
+++ b/src/render/SubmissionNotice.tsx
@ -1,5 +1,5 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot, Root } from 'react-dom/client';

 import Utils from "../utils";
 const utils = new Utils();
@ -17,6 +17,8 @@ class SubmissionNotice {

    noticeElement: HTMLDivElement;

+    root: Root;
+
    constructor(contentContainer: ContentContainer, callback: () => unknown) {
        this.noticeRef = React.createRef();

@ -30,13 +32,13 @@ class SubmissionNotice {

        referenceNode.prepend(this.noticeElement);

-        ReactDOM.render(
+        this.root = createRoot(this.noticeElement);
+        this.root.render(
            <SubmissionNoticeComponent
                contentContainer={contentContainer}
                callback={callback} 
                ref={this.noticeRef}
-                closeListener={() => this.close(false)} />,
-            this.noticeElement
+                closeListener={() => this.close(false)} />
        );
    }

@ -46,7 +48,7 @@ class SubmissionNotice {

    close(callRef = true): void {
        if (callRef) this.noticeRef.current.cancel();
-        ReactDOM.unmountComponentAtNode(this.noticeElement);
+        this.root.unmount();

        this.noticeElement.remove();
    }
--- a/src/render/Tooltip.tsx
+++ b/src/render/Tooltip.tsx
@ -1,5 +1,5 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot, Root } from 'react-dom/client';
 import { ButtonListener } from "../types";

 export interface TooltipProps {
@ -26,6 +26,7 @@ export class Tooltip {
    container: HTMLDivElement;

    timer: NodeJS.Timeout;
+    root: Root;
    
    constructor(props: TooltipProps) {
        props.bottomOffset ??= "70px";
@ -54,8 +55,9 @@ export class Tooltip {
        }

        const backgroundColor = `rgba(28, 28, 28, ${props.opacity})`;
-        
-        ReactDOM.render(
+
+        this.root = createRoot(this.container);
+        this.root.render(
            <div style={{bottom: props.bottomOffset, left: props.leftOffset, right: props.rightOffset, backgroundColor}} 
                className={"sponsorBlockTooltip" + (props.displayTriangle ? " sbTriangle" : "") + ` ${props.extraClass}`}>
                <div>
@ -93,8 +95,7 @@ export class Tooltip {
                        {chrome.i18n.getMessage("GotIt")}
                    </button>
                : null}
-            </div>,
-            this.container
+            </div>
        )
    }

@ -120,7 +121,7 @@ export class Tooltip {
    }

    close(): void {
-        ReactDOM.unmountComponentAtNode(this.container);
+        this.root.unmount();
        this.container.remove();

        if (this.timer) clearTimeout(this.timer);
--- a/src/render/UnsubmittedVideos.tsx
+++ b/src/render/UnsubmittedVideos.tsx
@ -1,5 +1,5 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot } from 'react-dom/client';
 import UnsubmittedVideosComponent from "../components/options/UnsubmittedVideosComponent";

 class UnsubmittedVideos {
@ -9,9 +9,9 @@ class UnsubmittedVideos {
    constructor(element: Element) {
        this.ref = React.createRef();

-        ReactDOM.render(
-            <UnsubmittedVideosComponent ref={this.ref} />,
-            element
+        const root = createRoot(element);
+        root.render(
+            <UnsubmittedVideosComponent ref={this.ref} />
        );
    }