From 967880054ffd4e442091e6cd9f6d69d721df06a0 Mon Sep 17 00:00:00 2001 From: CrispyBaguette Date: Mon, 18 Apr 2022 09:01:44 +0200 Subject: [PATCH] Fix rendering for react 18 --- client/package-lock.json | 16 +++++++++------- client/package.json | 2 +- client/src/index.tsx | 17 +++++++++-------- 3 files changed, 19 insertions(+), 16 deletions(-) diff --git a/client/package-lock.json b/client/package-lock.json index 8b954ee..188ce05 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -18,7 +18,6 @@ "@types/jest": "^26.0.24", "@types/node": "^12.20.37", "@types/react": "^17.0.37", - "@types/react-dom": "^17.0.11", "classnames": "^2.3.1", "file-saver": "^2.0.5", "react": "^18.0.0", @@ -30,6 +29,7 @@ "devDependencies": { "@tailwindcss/forms": "^0.4.0", "@types/file-saver": "^2.0.4", + "@types/react-dom": "^18.0.1", "autoprefixer": "^10.4.0", "postcss": "^8.4.4", "tailwindcss": "^3.0.1" @@ -3351,9 +3351,10 @@ } }, "node_modules/@types/react-dom": { - "version": "17.0.11", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.11.tgz", - "integrity": "sha512-f96K3k+24RaLGVu/Y2Ng3e1EbZ8/cVJvypZWd7cy0ofCBaf2lcM46xNhycMZ2xGwbBjRql7hOlZ+e2WlJ5MH3Q==", + "version": "18.0.1", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.1.tgz", + "integrity": "sha512-jCwTXvHtRLiyVvKm9aEdHXs8rflVOGd5Sl913JZrPshfXjn8NYsTNZOz70bCsA31IR0TOqwi3ad+X4tSCBoMTw==", + "dev": true, "dependencies": { "@types/react": "*" } @@ -16933,9 +16934,10 @@ } }, "@types/react-dom": { - "version": "17.0.11", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.11.tgz", - "integrity": "sha512-f96K3k+24RaLGVu/Y2Ng3e1EbZ8/cVJvypZWd7cy0ofCBaf2lcM46xNhycMZ2xGwbBjRql7hOlZ+e2WlJ5MH3Q==", + "version": "18.0.1", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.1.tgz", + "integrity": "sha512-jCwTXvHtRLiyVvKm9aEdHXs8rflVOGd5Sl913JZrPshfXjn8NYsTNZOz70bCsA31IR0TOqwi3ad+X4tSCBoMTw==", + "dev": true, "requires": { "@types/react": "*" } diff --git a/client/package.json b/client/package.json index 8d58ef3..6451fa1 100644 --- a/client/package.json +++ b/client/package.json @@ -14,7 +14,6 @@ "@types/jest": "^26.0.24", "@types/node": "^12.20.37", "@types/react": "^17.0.37", - "@types/react-dom": "^17.0.11", "classnames": "^2.3.1", "file-saver": "^2.0.5", "react": "^18.0.0", @@ -50,6 +49,7 @@ "devDependencies": { "@tailwindcss/forms": "^0.4.0", "@types/file-saver": "^2.0.4", + "@types/react-dom": "^18.0.1", "autoprefixer": "^10.4.0", "postcss": "^8.4.4", "tailwindcss": "^3.0.1" diff --git a/client/src/index.tsx b/client/src/index.tsx index ef2edf8..95f6a36 100644 --- a/client/src/index.tsx +++ b/client/src/index.tsx @@ -1,14 +1,15 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import './index.css'; -import App from './App'; -import reportWebVitals from './reportWebVitals'; +import React from "react"; +import "./index.css"; +import App from "./App"; +import reportWebVitals from "./reportWebVitals"; +import { createRoot } from "react-dom/client"; -ReactDOM.render( +const container = document.getElementById("root"); +const root = createRoot(container!); +root.render( - , - document.getElementById('root') + ); // If you want to start measuring performance in your app, pass a function