fix(dashboard): Fix some more build errors when packaged

packages/dashboard/src/lib/hooks/use-local-format.ts

@@ -21,9 +21,9 @@ import { useServerConfig } from './use-server-config.js';
  * ```
  */
 export function useLocalFormat() {
-    const { i18n } = useLingui();
     const { moneyStrategyPrecision } = useServerConfig() ?? { moneyStrategyPrecision: 2 };
     const precisionFactor = useMemo(() => Math.pow(10, moneyStrategyPrecision), [moneyStrategyPrecision]);
+    const locale = 'en';
 
     const toMajorUnits = useCallback(
         (value: number): number => {
@@ -41,34 +41,42 @@ export function useLocalFormat() {
 
     const formatCurrency = useCallback(
         (value: number, currency: string, precision?: number) => {
-            return i18n.number(toMajorUnits(value), {
+            return new Intl.NumberFormat(locale, {
                 style: 'currency',
                 currency,
                 minimumFractionDigits: precision ?? moneyStrategyPrecision,
                 maximumFractionDigits: precision ?? moneyStrategyPrecision,
-            });
+            }).format(toMajorUnits(value));
         },
-        [i18n, moneyStrategyPrecision, toMajorUnits],
+        [locale, moneyStrategyPrecision, toMajorUnits],
     );
 
-    const formatNumber = (value: number) => {
-        return i18n.number(value);
-    };
+    const formatNumber = useCallback(
+        (value: number) => {
+            return new Intl.NumberFormat(locale).format(value);
+        },
+        [locale],
+    );
 
-    const formatDate = (value: string | Date, options?: Intl.DateTimeFormatOptions) => {
-        return i18n.date(value, options);
-    };
+    const formatDate = useCallback(
+        (value: string | Date, options?: Intl.DateTimeFormatOptions) => {
+            return new Intl.DateTimeFormat(locale, options).format(new Date(value));
+        },
+        [locale],
+    );
 
-    const formatLanguageName = (value: string): string => {
-        try {
-            return (
-                new Intl.DisplayNames([i18n.locale], { type: 'language' }).of(value.replace('_', '-')) ??
-                value
-            );
-        } catch (e: any) {
-            return value;
-        }
-    };
+    const formatLanguageName = useCallback(
+        (value: string): string => {
+            try {
+                return (
+                    new Intl.DisplayNames([locale], { type: 'language' }).of(value.replace('_', '-')) ?? value
+                );
+            } catch (e: any) {
+                return value;
+            }
+        },
+        [locale],
+    );
 
     const formatCurrencyName = useCallback(
         (currencyCode: string, display: 'full' | 'symbol' | 'name' = 'full'): string => {
@@ -77,12 +85,12 @@ export function useLocalFormat() {
             try {
                 const name =
                     display === 'full' || display === 'name'
-                        ? (new Intl.DisplayNames([i18n.locale], { type: 'currency' }).of(currencyCode) ?? '')
+                        ? (new Intl.DisplayNames([locale], { type: 'currency' }).of(currencyCode) ?? '')
                         : '';
 
                 const symbol =
                     display === 'full' || display === 'symbol'
-                        ? (new Intl.NumberFormat(i18n.locale, {
+                        ? (new Intl.NumberFormat(locale, {
                               style: 'currency',
                               currency: currencyCode,
                               currencyDisplay: 'symbol',
@@ -96,7 +104,7 @@ export function useLocalFormat() {
                 return currencyCode;
             }
         },
-        [i18n.locale],
+        [locale],
     );
 
     return {

packages/dashboard/src/lib/providers/i18n-provider.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { i18n } from '@lingui/core';
-import { I18nProvider as LinguiI18nProvider } from '@lingui/react';
+// import { i18n } from '@lingui/core';
+// import { I18nProvider as LinguiI18nProvider } from '@lingui/react';
 
 export const locales = {
     en: 'English',
@@ -13,12 +13,16 @@ export const defaultLocale = 'en';
  * @param locale any locale string
  */
 export async function dynamicActivate(locale: string, onActivate?: () => void) {
-    const { messages } = await import(`../../i18n/locales/${locale}.po`);
-    i18n.load(locale, messages);
-    i18n.activate(locale);
+    // Temporarily disabled because Lingui macros do not work when the dashboard is packaged in an npm module.
+    // Related issue: https://github.com/kentcdodds/babel-plugin-macros/issues/87
+
+    // const { messages } = await import(`../../i18n/locales/${locale}.po`);
+    // i18n.load(locale, messages);
+    // i18n.activate(locale);
     onActivate?.();
 }
 
 export function I18nProvider({ children }: { children: React.ReactNode }) {
-    return <LinguiI18nProvider i18n={i18n}>{children}</LinguiI18nProvider>;
+    // return <LinguiI18nProvider i18n={i18n}>{children}</LinguiI18nProvider>;
+    return <>{children}</>;
 }

packages/dashboard/vite/vite-plugin-config.ts

@@ -0,0 +1,42 @@
+import path from 'path';
+import { Plugin, UserConfig } from 'vite';
+
+export function viteConfigPlugin({ packageRoot }: { packageRoot: string }): Plugin {
+    return {
+        name: 'vendure:vite-config-plugin',
+        config: (config: UserConfig) => {
+            config.root = packageRoot;
+            config.resolve = {
+                alias: {
+                    '@': path.resolve(packageRoot, './src/lib'),
+                },
+            };
+            // This is required to prevent Vite from pre-bundling the
+            // dashboard source when it resides in node_modules.
+            config.optimizeDeps = {
+                ...config.optimizeDeps,
+                exclude: [
+                    ...(config.optimizeDeps?.exclude || []),
+                    '@vendure/dashboard',
+                    '@/providers',
+                    '@/framework',
+                    '@/lib',
+                    '@/components',
+                    '@/hooks',
+                    'virtual:vendure-ui-config',
+                    'virtual:admin-api-schema',
+                    'virtual:dashboard-extensions',
+                ],
+                // We however do want to pre-bundle recharts, as it depends
+                // on lodash which is a CJS packages and _does_ require
+                // pre-bundling.
+                include: [
+                    ...(config.optimizeDeps?.include || []),
+                    '@/components > recharts',
+                    '@/components > react-dropzone',
+                ],
+            };
+            return config;
+        },
+    };
+}

packages/dashboard/vite/vite-plugin-set-root.ts

@@ -1,17 +0,0 @@
-import path from 'path';
-import { Plugin, UserConfig } from 'vite';
-
-export function setRootPlugin({ packageRoot }: { packageRoot: string }): Plugin {
-    return {
-        name: 'vendure:set-root-plugin',
-        config: (config: UserConfig) => {
-            config.root = packageRoot;
-            config.resolve = {
-                alias: {
-                    '@': path.resolve(packageRoot, './src/lib'),
-                },
-            };
-            return config;
-        },
-    };
-}

packages/dashboard/vite/vite-plugin-vendure-dashboard.ts

@@ -7,9 +7,9 @@ import { PluginOption } from 'vite';
 
 import { adminApiSchemaPlugin } from './vite-plugin-admin-api-schema.js';
 import { configLoaderPlugin } from './vite-plugin-config-loader.js';
+import { viteConfigPlugin } from './vite-plugin-config.js';
 import { dashboardMetadataPlugin } from './vite-plugin-dashboard-metadata.js';
 import { gqlTadaPlugin } from './vite-plugin-gql-tada.js';
-import { setRootPlugin } from './vite-plugin-set-root.js';
 import { UiConfigPluginOptions, uiConfigPlugin } from './vite-plugin-ui-config.js';
 
 /**
@@ -53,7 +53,7 @@ export function vendureDashboardPlugin(options: VitePluginVendureDashboardOption
 
     return [
         // TODO: solve https://github.com/kentcdodds/babel-plugin-macros/issues/87
-        lingui(),
+        // lingui(),
         ...(options.disableTansStackRouterPlugin
             ? []
             : [
@@ -65,13 +65,13 @@ export function vendureDashboardPlugin(options: VitePluginVendureDashboardOption
                   }),
               ]),
         react({
-            babel: {
-                plugins: ['@lingui/babel-plugin-lingui-macro'],
-            },
+            // babel: {
+            //     plugins: ['@lingui/babel-plugin-lingui-macro'],
+            // },
         }),
         tailwindcss(),
         configLoaderPlugin({ vendureConfigPath: normalizedVendureConfigPath, tempDir }),
-        setRootPlugin({ packageRoot }),
+        viteConfigPlugin({ packageRoot }),
         adminApiSchemaPlugin(),
         dashboardMetadataPlugin({ rootDir: tempDir }),
         uiConfigPlugin({ adminUiConfig: options.adminUiConfig }),