fix: dynamic mui broken after build

Dabolus · Apr 25, 2024 · 3d47623 · 3d47623
1 parent 9fb6b7e
commit 3d47623
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 11 deletions.
diff --git a/app/entry.client.tsx b/app/entry.client.tsx
@@ -23,9 +23,10 @@ import createTheme from './src/theme';
 import PageStyles from './src/PageStyles';
 import Backend from './i18next-fetch-backend';
 import i18n from './i18n';
+import { muiLicenseKey } from './muiLicenseHandler';
 
-if (import.meta.env.VITE_MUI_LICENSE_KEY) {
-  LicenseInfo.setLicenseKey(import.meta.env.VITE_MUI_LICENSE_KEY);
+if (muiLicenseKey) {
+  LicenseInfo.setLicenseKey(muiLicenseKey);
 }
 
 interface ClientCacheProviderProps {

diff --git a/app/entry.server.tsx b/app/entry.server.tsx
@@ -17,10 +17,7 @@ import createTheme from './src/theme';
 import PageStyles from './src/PageStyles';
 import i18next, { localesDirectory } from './i18next.server';
 import i18n from './i18n';
-
-if (import.meta.env.VITE_MUI_LICENSE_KEY) {
-  LicenseInfo.setLicenseKey(import.meta.env.VITE_MUI_LICENSE_KEY);
-}
+import { muiLicenseKey } from './muiLicenseHandler';
 
 // Reject all pending promises from handler functions after 5 seconds
 export const streamTimeout = 5000;
@@ -115,6 +112,20 @@ export default async function handleRequest(
 
   responseHeaders.set('Content-Type', 'text/html');
 
+  if (muiLicenseKey) {
+    LicenseInfo.setLicenseKey(muiLicenseKey);
+    responseHeaders.set(
+      'Set-Cookie',
+      `mui-license-key=${muiLicenseKey}; Path=/`,
+    );
+  } else {
+    // Clear the license key cookie if it was removed for some reason, just in case
+    responseHeaders.set(
+      'Set-Cookie',
+      'mui-license-key=; Path=/; Expires=Thu, 01 Jan 1970 00:00:00 GMT',
+    );
+  }
+
   return new Response(markup, {
     status: responseStatusCode,
     headers: responseHeaders,

diff --git a/app/muiLicenseHandler.ts b/app/muiLicenseHandler.ts
@@ -0,0 +1,4 @@
+export const muiLicenseKey =
+  'document' in globalThis
+    ? document.cookie.match(/(?:^|;) ?mui-license-key=([^;]*)(?:;|$)/)?.[1]
+    : process?.env?.MUI_LICENSE_KEY;
diff --git a/app/src/components/DataGrid.tsx b/app/src/components/DataGrid.tsx
@@ -1,7 +1,8 @@
+import { muiLicenseKey } from '~/muiLicenseHandler';
+import { DataGrid as DataGridBase } from '@mui/x-data-grid';
+import { DataGridPro } from '@mui/x-data-grid-pro';
 export type * from '@mui/x-data-grid';
 
-export const DataGrid = import.meta.env.VITE_MUI_LICENSE_KEY
-  ? await import('@mui/x-data-grid-pro').then(imp => imp.DataGridPro)
-  : await import('@mui/x-data-grid').then(imp => imp.DataGrid);
+export const DataGrid = muiLicenseKey ? DataGridPro : DataGridBase;
 
 export default DataGrid;
diff --git a/vite.config.ts b/vite.config.ts
@@ -16,8 +16,6 @@ export default defineConfig(({ mode }) => ({
   ],
   build: {
     sourcemap: true,
-    // Browsers with top-level await support
-    target: ['chrome89', 'edge89', 'firefox89', 'safari15', 'opera75'],
     rollupOptions: {
       onwarn(warning, warn) {
         // Ignore warnings related to "use client" directives