diff --git a/src/RootApp.tsx b/src/RootApp.tsx index ebfebc42526..1caa2e29068 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 = () => ( @@ -18,7 +22,9 @@ const RootApp = () => ( - + {useReactQueryDevtools && ( + + )} ); diff --git a/webpack.common.js b/webpack.common.js index efda98699a9..734343813df 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/,