fix(protocol-designer,app): use dynamic import for react-scan to avoi…

…d build issue (#17087) * fix(protocol-designer,app): use dynamic import for react-scan to avoid build issue
Opentrons · Dec 11, 2024 · 96fc13e · 96fc13e
1 parent b32aa12
commit 96fc13e
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 12 deletions.
diff --git 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
@@ -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 (