Change to use the new API for the root render call reqired in version 18

src/Tools/chat/index.jsx

@@ -1,14 +1,14 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
-import { Route, Router, Switch } from 'react-router';
+import { createRoot } from 'react-dom/client';
 import { RecoilRoot } from 'recoil';
 import ToolRoot from '@ToolRoot';
 
 import Chat from './Chat';
 import { MathJaxContext } from 'better-react-mathjax';
 import { mathjaxConfig } from '../../Core/utils/math';
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('root'));
+root.render(
   <RecoilRoot>
     <MathJaxContext
       version={2}
@@ -17,6 +17,5 @@ ReactDOM.render(
     >
       <ToolRoot tool={<Chat key={'BaseTool'} />} />
     </MathJaxContext>
-  </RecoilRoot>,
-  document.getElementById('root'),
+  </RecoilRoot>
 );

src/Tools/cypressTest/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import CypressTest from './CypressTest.jsx';
 import axios from 'axios';
 import { RecoilRoot } from 'recoil';
@@ -14,7 +14,8 @@ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 //   return <p>test</p>
 // }
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('root'));
+root.render(
   <RecoilRoot>
     <Router>
       <Routes>
@@ -31,8 +32,7 @@ ReactDOM.render(
           } />
       </Routes>
     </Router>
-  </RecoilRoot>,
-  document.getElementById('root'),
+  </RecoilRoot>
 );
 
 // Hot Module Replacement (HMR) - Remove this snippet to remove HMR.

src/Tools/singlepage/index.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import { RecoilRoot } from 'recoil';
 
@@ -8,7 +8,8 @@ import { MathJaxContext } from 'better-react-mathjax';
 import { mathjaxConfig } from '../../Core/utils/math';
 import DarkmodeController from '../_framework/DarkmodeController';
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('root'));
+root.render(
   <RecoilRoot>
     <Router>
       <Routes>
@@ -28,6 +29,5 @@ ReactDOM.render(
         />
       </Routes>
     </Router>
-  </RecoilRoot>,
-  document.getElementById('root'),
+  </RecoilRoot>
 );

src/Tools/temp/index.jsx

@@ -1,12 +1,10 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
-
-
-ReactDOM.render(
+const root = createRoot(document.getElementById('root'));
+root.render(
   <>
   test here
-  </>,
-  document.getElementById('root'),
+  </>
 );
 

src/Tools/test/index.jsx

@@ -1,10 +1,12 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import DoenetTest from './DoenetTest.jsx';
 import { RecoilRoot } from 'recoil';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 
-ReactDOM.render(
+
+const root = createRoot(document.getElementById('root'));
+root.render(
   <RecoilRoot>
     <Router>
       <Routes>
@@ -15,6 +17,5 @@ ReactDOM.render(
           } />
       </Routes>
     </Router>
-  </RecoilRoot>,
-  document.getElementById('root'),
+  </RecoilRoot>
 );

src/Tools/uiDocs/index.jsx

@@ -1,19 +1,20 @@
 import { MathJaxContext } from 'better-react-mathjax';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { mathjaxConfig } from '../../Core/utils/math.js';
 
 import UIDocs from './uiDocs.jsx';
 
 // import { initialize } from '../imports/courseInfo';
 // initialize();
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('root'));
+root.render(
   <MathJaxContext
     version={2}
     config={mathjaxConfig}
     onStartup={(mathJax) => (mathJax.Hub.processSectionDelay = 0)}
   >
     <UIDocs />
   </MathJaxContext>
-  , document.getElementById('root')); 
+); 

src/Tools/umn/index.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import { RecoilRoot } from 'recoil';
 
@@ -8,7 +8,8 @@ import { MathJaxContext } from 'better-react-mathjax';
 import { mathjaxConfig } from '../../Core/utils/math';
 import DarkmodeController from '../_framework/DarkmodeController';
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('root'));
+root.render(
   <RecoilRoot>
     <Router>
       <Routes>
@@ -28,6 +29,5 @@ ReactDOM.render(
         />
       </Routes>
     </Router>
-  </RecoilRoot>,
-  document.getElementById('root'),
+  </RecoilRoot>
 );