diff --git a/app/src/App/DesktopApp.tsx b/app/src/App/DesktopApp.tsx index 7004acf9723..029ec99ee26 100644 --- a/app/src/App/DesktopApp.tsx +++ b/app/src/App/DesktopApp.tsx @@ -1,4 +1,3 @@ -import { scan } from 'react-scan' import { useState, Fragment } from 'react' import { Navigate, Route, Routes, useMatch } from 'react-router-dom' import { ErrorBoundary } from 'react-error-boundary' @@ -52,11 +51,18 @@ export const DesktopApp = (): JSX.Element => { // note for react-scan const enableReactScan = useFeatureFlag('reactScan') - if (typeof window !== 'undefined') { - scan({ - enabled: enableReactScan, - log: true, - }) + // Dynamically import `react-scan` to avoid build errors + if (typeof window !== 'undefined' && enableReactScan) { + import('react-scan') + .then(({ scan }) => { + scan({ + enabled: enableReactScan, + log: true, + }) + }) + .catch(error => { + console.error('Failed to load react-scan:', error) + }) } const desktopRoutes: RouteProps[] = [ diff --git a/protocol-designer/src/ProtocolEditor.tsx b/protocol-designer/src/ProtocolEditor.tsx index d322bd9fb09..ec0a130abd5 100644 --- a/protocol-designer/src/ProtocolEditor.tsx +++ b/protocol-designer/src/ProtocolEditor.tsx @@ -1,4 +1,3 @@ -import { scan } from 'react-scan' import { DndProvider } from 'react-dnd' import { HashRouter } from 'react-router-dom' import { HTML5Backend } from 'react-dnd-html5-backend' @@ -16,11 +15,18 @@ import { getEnableReactScan } from './feature-flags/selectors' export function ProtocolEditor(): JSX.Element { // note for react-scan const enableReactScan = useSelector(getEnableReactScan) - if (typeof window !== 'undefined') { - scan({ - enabled: enableReactScan, - log: true, - }) + // Dynamically import `react-scan` to avoid build errors + if (typeof window !== 'undefined' && enableReactScan) { + import('react-scan') + .then(({ scan }) => { + scan({ + enabled: enableReactScan, + log: true, + }) + }) + .catch(error => { + console.error('Failed to load react-scan:', error) + }) } return (