test(admin-vite-plugin): React Invalid hook call on Windows (#9647)

packages/admin/admin-bundler/src/lib/config.ts

@@ -28,7 +28,14 @@ export async function getViteConfig(
       outDir: path.resolve(process.cwd(), options.outDir),
     },
     optimizeDeps: {
-      include: ["react-dom/client", "@medusajs/ui", "@medusajs/dashboard"],
+      include: [
+        "react",
+        "react/jsx-runtime",
+        "react-dom/client",
+        "react-router-dom",
+        "@medusajs/ui",
+        "@medusajs/dashboard",
+      ],
       exclude: [...VIRTUAL_MODULES],
     },
     define: {

packages/admin/admin-vite-plugin/src/routes/__tests__/generate-routes.spec.ts

@@ -1,6 +1,5 @@
 import { describe, expect, it, vi } from "vitest"
 
-import { Stats } from "fs"
 import fs from "fs/promises"
 import * as utils from "../../utils"
 import { generateRoutes } from "../generate-routes"
@@ -55,27 +54,10 @@ const expectedRoutesWithoutLoaders = `
     routes: [
         {
             Component: RouteComponent0,
-            loader: undefined,
             path: "/one",
         },
         {
             Component: RouteComponent1,
-            loader: undefined,
-            path: "/two",
-        }
-    ]
-`
-
-const expectedRoutesWithLoaders = `
-    routes: [
-        {
-            Component: RouteComponent0,
-            loader: RouteLoader0,
-            path: "/one",
-        },
-        {
-            Component: RouteComponent1,
-            loader: RouteLoader1,
             path: "/two",
         }
     ]
@@ -102,26 +84,6 @@ describe("generateRoutes", () => {
       utils.normalizeString(expectedRoutesWithoutLoaders)
     )
   })
-  it("should generate routes with loaders", async () => {
-    const mockFiles = [
-      "Users/user/medusa/src/admin/routes/one/page.tsx",
-      "Users/user/medusa/src/admin/routes/two/page.tsx",
-    ]
-    vi.mocked(utils.crawl).mockResolvedValue(mockFiles)
-
-    vi.mocked(fs.readFile).mockImplementation(async (file) =>
-      Promise.resolve(mockFileContents[mockFiles.indexOf(file as string)])
-    )
-
-    vi.mocked(fs.stat).mockResolvedValue({} as Stats) // We just want to mock that the check passes
-
-    const result = await generateRoutes(
-      new Set(["Users/user/medusa/src/admin"])
-    )
-    expect(utils.normalizeString(result.code)).toEqual(
-      utils.normalizeString(expectedRoutesWithLoaders)
-    )
-  })
   it("should handle windows paths", async () => {
     const mockFiles = [
       "C:\\medusa\\src\\admin\\routes\\one\\page.tsx",

packages/admin/admin-vite-plugin/src/routes/generate-routes.ts

@@ -12,7 +12,6 @@ import { getRoute } from "./helpers"
 
 type Route = {
   Component: string
-  loader?: string
   path: string
 }
 
@@ -46,7 +45,6 @@ function generateCode(results: RouteResult[]): string {
 function formatRoute(route: Route): string {
   return `{
     Component: ${route.Component},
-    loader: ${route.loader ? route.loader : "undefined"},
     path: "${route.path}",
   }`
 }
@@ -77,11 +75,10 @@ async function parseFile(
     return null
   }
 
-  const loaderPath = await getLoader(file)
   const routePath = getRoute(file)
 
-  const imports = generateImports(file, loaderPath, index)
-  const route = generateRoute(routePath, loaderPath, index)
+  const imports = generateImports(file, index)
+  const route = generateRoute(routePath, index)
 
   return {
     imports,
@@ -103,45 +100,19 @@ async function isValidRouteFile(file: string): Promise<boolean> {
   }
 }
 
-async function getLoader(file: string): Promise<string | null> {
-  const loaderExtensions = ["ts", "js", "tsx", "jsx"]
-  for (const ext of loaderExtensions) {
-    const loaderPath = file.replace(/\/page\.(tsx|jsx)/, `/loader.${ext}`)
-    const exists = await fs.stat(loaderPath).catch(() => null)
-    if (exists) {
-      return loaderPath
-    }
-  }
-  return null
-}
-
-function generateImports(
-  file: string,
-  loader: string | null,
-  index: number
-): string[] {
+function generateImports(file: string, index: number): string[] {
   const imports: string[] = []
   const route = generateRouteComponentName(index)
   const importPath = normalizePath(file)
 
   imports.push(`import ${route} from "${importPath}"`)
 
-  if (loader) {
-    const loaderName = generateRouteLoaderName(index)
-    imports.push(`import ${loaderName} from "${normalizePath(loader)}"`)
-  }
-
   return imports
 }
 
-function generateRoute(
-  route: string,
-  loader: string | null,
-  index: number
-): Route {
+function generateRoute(route: string, index: number): Route {
   return {
     Component: generateRouteComponentName(index),
-    loader: loader ? generateRouteLoaderName(index) : undefined,
     path: route,
   }
 }
@@ -149,7 +120,3 @@ function generateRoute(
 function generateRouteComponentName(index: number): string {
   return `RouteComponent${index}`
 }
-
-function generateRouteLoaderName(index: number): string {
-  return `RouteLoader${index}`
-}

packages/admin/admin-vite-plugin/src/vmod.ts

@@ -55,7 +55,6 @@ export type VirtualModule =
   | typeof ROUTE_VIRTUAL_MODULE
   | typeof MENU_ITEM_VIRTUAL_MODULE
   | typeof WIDGET_VIRTUAL_MODULE
-
 const resolvedVirtualModuleIds = {
   link: RESOLVED_LINK_VIRTUAL_MODULE,
   form: RESOLVED_FORM_VIRTUAL_MODULE,

packages/admin/dashboard/src/extensions/routes/utils.ts

@@ -1,5 +1,5 @@
 import { ComponentType } from "react"
-import { LoaderFunction, RouteObject } from "react-router-dom"
+import { RouteObject } from "react-router-dom"
 import { ErrorBoundary } from "../../components/utilities/error-boundary"
 import { RouteExtension, RouteModule } from "../types"
 
@@ -30,8 +30,7 @@ export const createRouteMap = (
   const addRoute = (
     pathSegments: string[],
     Component: ComponentType,
-    currentLevel: RouteObject[],
-    loader?: LoaderFunction
+    currentLevel: RouteObject[]
   ) => {
     if (!pathSegments.length) {
       return
@@ -51,26 +50,22 @@ export const createRouteMap = (
         path: "",
         ErrorBoundary: ErrorBoundary,
         async lazy() {
-          if (loader) {
-            return { Component, loader }
-          }
-
           return { Component }
         },
       })
     } else {
       route.children ||= []
-      addRoute(remainingSegments, Component, route.children, loader)
+      addRoute(remainingSegments, Component, route.children)
     }
   }
 
-  routes.forEach(({ path, Component, loader }) => {
+  routes.forEach(({ path, Component }) => {
     // Remove the ignore segment from the path if it is provided
     const cleanedPath = ignore
       ? path.replace(ignore, "").replace(/^\/+/, "")
       : path.replace(/^\/+/, "")
     const pathSegments = cleanedPath.split("/").filter(Boolean)
-    addRoute(pathSegments, Component, root, loader)
+    addRoute(pathSegments, Component, root)
   })
 
   return root