From ea27750d7dc4c75fce885f2bf06646e3fc176bbd Mon Sep 17 00:00:00 2001
From: Dmitry Lyzo <ashephard0@gmail.com>
Date: Sat, 24 Aug 2024 12:23:46 +0300
Subject: [PATCH 1/2] Fix @tanstack/query-devtools on legacy browsers

---
 src/RootApp.tsx   |  4 +++-
 webpack.common.js | 17 +++++++++++++++++
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/RootApp.tsx b/src/RootApp.tsx
index ebfebc4252..5a0497d9d7 100644
--- a/src/RootApp.tsx
+++ b/src/RootApp.tsx
@@ -18,7 +18,9 @@ const RootApp = () => (
                 </WebConfigProvider>
             </UserSettingsProvider>
         </ApiProvider>
-        <ReactQueryDevtools initialIsOpen={false} />
+        {window.Proxy && ( // '@tanstack/query-devtools' requires 'Proxy', which cannot be polyfilled for legacy browsers
+            <ReactQueryDevtools initialIsOpen={false} />
+        )}
     </QueryClientProvider>
 );
 
diff --git a/webpack.common.js b/webpack.common.js
index efda98699a..734343813d 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -230,6 +230,23 @@ const config = {
                     }
                 }]
             },
+            // Strict EcmaScript modules require additional flags
+            {
+                test: /\.(js|jsx|mjs)$/,
+                include: [
+                    path.resolve(__dirname, 'node_modules/@tanstack/query-devtools')
+                ],
+                resolve: {
+                    fullySpecified: false
+                },
+                use: [{
+                    loader: 'babel-loader',
+                    options: {
+                        cacheCompression: false,
+                        cacheDirectory: true
+                    }
+                }]
+            },
             {
                 test: /\.worker\.ts$/,
                 exclude: /node_modules/,

From 0fbfda882d72b37f6cfb089cf5982335f1a9c661 Mon Sep 17 00:00:00 2001
From: Dmitry Lyzo <ashephard0@gmail.com>
Date: Thu, 5 Sep 2024 21:21:41 +0300
Subject: [PATCH 2/2] Don't use devtools on the TV as the navigation is weird

---
 src/RootApp.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/RootApp.tsx b/src/RootApp.tsx
index 5a0497d9d7..1caa2e2906 100644
--- a/src/RootApp.tsx
+++ b/src/RootApp.tsx
@@ -5,10 +5,14 @@ import React from 'react';
 import { ApiProvider } from 'hooks/useApi';
 import { UserSettingsProvider } from 'hooks/useUserSettings';
 import { WebConfigProvider } from 'hooks/useWebConfig';
+import browser from 'scripts/browser';
 import { queryClient } from 'utils/query/queryClient';
 
 import RootAppRouter from 'RootAppRouter';
 
+const useReactQueryDevtools = window.Proxy // '@tanstack/query-devtools' requires 'Proxy', which cannot be polyfilled for legacy browsers
+    && !browser.tv; // Don't use devtools on the TV as the navigation is weird
+
 const RootApp = () => (
     <QueryClientProvider client={queryClient}>
         <ApiProvider>
@@ -18,7 +22,7 @@ const RootApp = () => (
                 </WebConfigProvider>
             </UserSettingsProvider>
         </ApiProvider>
-        {window.Proxy && ( // '@tanstack/query-devtools' requires 'Proxy', which cannot be polyfilled for legacy browsers
+        {useReactQueryDevtools && (
             <ReactQueryDevtools initialIsOpen={false} />
         )}
     </QueryClientProvider>