fix: avoid creating theme just by import

tolgee · Jun 12, 2024 · 5080c26 · 5080c26
1 parent de00adb
commit 5080c26
Showing 1 changed file with 55 additions and 46 deletions.
diff --git a/packages/web/src/package/ui/ThemeProvider.tsx b/packages/web/src/package/ui/ThemeProvider.tsx
@@ -1,6 +1,6 @@
 import React, { useRef } from 'react';
 import createCache from '@emotion/cache';
-import { CacheProvider } from '@emotion/react';
+import { CacheProvider, Theme } from '@emotion/react';
 import {
   createTheme,
   css,
@@ -11,61 +11,70 @@ import {
 import { DEVTOOLS_Z_INDEX } from '../constants';
 import { getRootElement } from './getRootElement';
 
-let theme = createTheme({
-  typography: {
-    fontFamily:
-      '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-    htmlFontSize: 0,
-  },
-  palette: {
-    primary: {
-      main: '#EC407A',
-    },
-    secondary: {
-      main: '#2B5582',
+let theme: Theme;
+
+// avoid creating theme in top level as it can fail when document is not defined
+const getTheme = () => {
+  if (theme) {
+    return theme;
+  }
+
+  theme = createTheme({
+    typography: {
+      fontFamily:
+        '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+      htmlFontSize: 0,
     },
-    text: {
-      secondary: '#808080',
+    palette: {
+      primary: {
+        main: '#EC407A',
+      },
+      secondary: {
+        main: '#2B5582',
+      },
+      text: {
+        secondary: '#808080',
+      },
+      background: {
+        default: 'rgb(255, 255, 255)',
+      },
     },
-    background: {
-      default: 'rgb(255, 255, 255)',
+    zIndex: {
+      modal: DEVTOOLS_Z_INDEX,
     },
-  },
-  zIndex: {
-    modal: DEVTOOLS_Z_INDEX,
-  },
-});
+  });
 
-theme = createTheme(theme, {
-  components: {
-    MuiButton: {
-      styleOverrides: {
-        root: {
-          whiteSpace: 'nowrap',
+  theme = createTheme(theme, {
+    components: {
+      MuiButton: {
+        styleOverrides: {
+          root: {
+            whiteSpace: 'nowrap',
+          },
         },
       },
-    },
-    MuiTooltip: {
-      styleOverrides: {
-        tooltip: {
-          fontSize: 12,
-          boxShadow: '1px 1px 6px rgba(0, 0, 0, 0.25)',
-          borderRadius: '11px',
-          color: 'black',
-          backgroundColor: 'white',
+      MuiTooltip: {
+        styleOverrides: {
+          tooltip: {
+            fontSize: 12,
+            boxShadow: '1px 1px 6px rgba(0, 0, 0, 0.25)',
+            borderRadius: '11px',
+            color: 'black',
+            backgroundColor: 'white',
+          },
         },
       },
-    },
-    MuiSvgIcon: {
-      styleOverrides: {
-        fontSizeSmall: {
-          width: '19px',
-          height: '19px',
+      MuiSvgIcon: {
+        styleOverrides: {
+          fontSizeSmall: {
+            width: '19px',
+            height: '19px',
+          },
         },
       },
     },
-  },
-});
+  });
+};
 
 const globalStyles = css`
   :host > * {
@@ -85,7 +94,7 @@ export function ThemeProvider({ children }: React.PropsWithChildren) {
   return (
     <CacheProvider value={cache.current!}>
       <GlobalStyles styles={globalStyles} />
-      <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>
+      <MuiThemeProvider theme={getTheme()}>{children}</MuiThemeProvider>
     </CacheProvider>
   );
 }