Fix webpack compilation errors

Author: paulpopus

demo/src/payload.config.ts

@@ -6,8 +6,7 @@ import Tags from "./collections/Tags";
 import Users from "./collections/Users";
 import Media from "./collections/Media";
 import Homepage from "./globals/Homepage";
-import dashboardAnalytics from "../../src/index";
-import { PlausibleProvider, GoogleProvider } from "../../src/types/providers";
+import dashboardAnalytics from "../../dist/index";
 
 const PLAUSIBLE_API_KEY = process.env.PLAUSIBLE_API_KEY;
 const PLAUSIBLE_HOST = process.env.PLAUSIBLE_HOST;
@@ -16,14 +15,14 @@ const PLAUSIBLE_SITE_ID = process.env.PLAUSIBLE_SITE_ID;
 const GOOGLE_PROPERTY_ID = process.env.GOOGLE_PROPERTY_ID;
 const GOOGLE_CREDENTIALS_FILE = process.env.GOOGLE_CREDENTIALS_FILE;
 
-const plausibleProvider: PlausibleProvider = {
+const plausibleProvider = {
   source: "plausible",
   apiSecret: PLAUSIBLE_API_KEY,
   siteId: PLAUSIBLE_SITE_ID,
   host: PLAUSIBLE_HOST,
 };
 
-const googleProvider: GoogleProvider = {
+const googleProvider = {
   source: "google",
   //credentials: GOOGLE_CREDENTIALS_FILE,
   propertyId: GOOGLE_PROPERTY_ID,
@@ -61,7 +60,7 @@ export default buildConfig({
   },
   plugins: [
     dashboardAnalytics({
-      provider: googleProvider,
+      provider: plausibleProvider,
       access: (user: any) => {
         return Boolean(user);
       },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nouance/payload-dashboard-analytics",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "homepage:": "https://nouance.io",
   "repository": "git@github.com:NouanceLabs/payload-dashboard-analytics.git",
   "description": "Dashboard analytics integration plugin for Payload CMS",

src/components/Aggregates/AggregateDataWidget.tsx

@@ -90,25 +90,30 @@ const AggregateDataWidget: React.FC<Props> = ({ options, metricsMap }) => {
         {isLoading ? (
           <>Loading...</>
         ) : (
-          <ul style={{ margin: "0", listStyle: "none", padding: "0" }}>
-            {data.map((item, index) => {
-              const value =
-                typeof item.value === "string"
-                  ? Math.floor(parseInt(item.value))
-                  : Math.floor(item.value);
-              return (
-                <li
-                  key={index}
-                  style={{ display: "flex", justifyContent: "space-between" }}
-                >
-                  <div style={{ fontWeight: "700" }}>
-                    {metricsMap ? metricsMap[item.label].label : item.label}
-                  </div>
-                  <div>{value}</div>
-                </li>
-              );
-            })}
-          </ul>
+          data.length > 0 && (
+            <ul style={{ margin: "0", listStyle: "none", padding: "0" }}>
+              {data.map((item, index) => {
+                const value =
+                  typeof item.value === "string"
+                    ? Math.floor(parseInt(item.value))
+                    : Math.floor(item.value);
+
+                const itemLabel = item.label;
+
+                const label = metricsMap?.[itemLabel] ?? itemLabel;
+
+                return (
+                  <li
+                    key={index}
+                    style={{ display: "flex", justifyContent: "space-between" }}
+                  >
+                    <div style={{ fontWeight: "700" }}>{label}</div>
+                    <div>{value}</div>
+                  </li>
+                );
+              })}
+            </ul>
+          )
         )}
       </div>
     </section>

src/extendWebpackConfig.ts

@@ -6,26 +6,22 @@ import type { Provider } from "./types";
 const mockModulePath = path.resolve(__dirname, "mocks/serverModule.js");
 
 /* Some providers may need their own list of mocked modules to avoid react errors and bundling of node modules */
-const aliasMap: Record<Provider["source"], any> = {
-  google: {
-    [path.resolve(__dirname, "./providers/google/client")]: mockModulePath,
-    [path.resolve(__dirname, "./providers/google/getLiveData")]: mockModulePath,
-    "@google-analytics/data": mockModulePath,
-    url: mockModulePath,
-    querystring: mockModulePath,
-    fs: mockModulePath,
-    os: mockModulePath,
-    stream: mockModulePath,
-    child_process: mockModulePath,
-    util: mockModulePath,
-    net: mockModulePath,
-    tls: mockModulePath,
-    assert: mockModulePath,
-    request: mockModulePath,
-  },
-  plausible: {
-    [path.resolve(__dirname, "./providers/plausible/client")]: mockModulePath,
-  },
+const aliasMap /* : Record<Provider["source"], any> */ = {
+  [path.resolve(__dirname, "./providers/google/client")]: mockModulePath,
+  [path.resolve(__dirname, "./providers/google/getLiveData")]: mockModulePath,
+  "@google-analytics/data": mockModulePath,
+  url: mockModulePath,
+  querystring: mockModulePath,
+  fs: mockModulePath,
+  os: mockModulePath,
+  stream: mockModulePath,
+  child_process: mockModulePath,
+  util: mockModulePath,
+  net: mockModulePath,
+  tls: mockModulePath,
+  assert: mockModulePath,
+  request: mockModulePath,
+  [path.resolve(__dirname, "./providers/plausible/client")]: mockModulePath,
 };
 
 export const extendWebpackConfig =
@@ -48,7 +44,7 @@ export const extendWebpackConfig =
             ? existingWebpackConfig.resolve.alias
             : {}),
           express: mockModulePath,
-          ...aliasMap[provider],
+          ...aliasMap,
         },
       },
     };

src/types/index.ts

@@ -39,3 +39,5 @@ export type DashboardAnalyticsConfig = {
     afterDashboard?: DashboardWidgets[];
   };
 };
+
+export { PlausibleProvider, GoogleProvider };