react 18

Author: q-nick

INFO

@@ -1,7 +1,10 @@
 <div>
   <p style="display:inline-block;color: red; font-weight: bold;">The new version of npm-gui is out now! Start it with:</p>
 
-  <pre style="display:inline-block; vertical-align: middle; color: white;">npx npm-gui@latest</pre> <span style="color: white;">Check it out!</span>
+  <pre style="display:inline-block; vertical-align: middle; color: white;">npx npm-gui@latest</pre>
+
+<span style="color: white;">Check it out!</span>
+
+<a href="https://npm-gui.nullapps.dev" style="colow:white; font-weight: bold;">Go to Documentation</a>
 
-  <a href="https://npm-gui.nullapps.dev">Go to Documentation</a>
 </div>

client/index.tsx

@@ -6,7 +6,7 @@ import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persist
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { persistQueryClient } from '@tanstack/react-query-persist-client';
 import React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import { App } from './components/App';
 
@@ -35,14 +35,19 @@ persistQueryClient({
   },
 });
 
-render(
-  <React.StrictMode>
-    <QueryClientProvider client={queryClient}>
-      <App />
-    </QueryClientProvider>
-  </React.StrictMode>,
-  document.querySelector('.npm-gui'),
-);
+const container = document.querySelector('.npm-gui');
+
+if (container) {
+  const root = createRoot(container);
+
+  root.render(
+    <React.StrictMode>
+      <QueryClientProvider client={queryClient}>
+        <App />
+      </QueryClientProvider>
+    </React.StrictMode>,
+  );
+}
 
 if (window.localStorage.getItem('npm-gui-id') === null) {
   window.localStorage.setItem('npm-gui-id', Date.now().toString());