fix(app-shell-vite-plugin): cross-platform module resolution (#4760)

Co-authored-by: Bruno Henriques <[email protected]>

Author: zettca

package-lock.json

@@ -37,13 +37,12 @@
     "@rollup/plugin-terser": "^0.4.0",
     "@rollup/plugin-virtual": "^3.0.1",
     "es-module-shims": "^1.6.3",
-    "find-up-simple": "^1.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.9.0",
     "rollup": "^4.6.1",
     "ts-node": "^10.9.1",
-    "vite-plugin-static-copy": "^2.0.0"
+    "vite-plugin-static-copy": "^3.0.0"
   },
   "peerDependencies": {
     "vite": "^4.1.4 || ^5.0.4 || ^6.0.0"

packages/app-shell-vite-plugin/package.json

@@ -1,34 +1,16 @@
 import { createRequire } from "node:module";
-import { join } from "node:path";
-import { findUpSync } from "find-up-simple";
+import { dirname, join } from "node:path";
 
 export const require = createRequire(import.meta.url);
 
 /**
  * Resolves the module entrypoint by name and normalizes slashes to be posix/unix-like forward slashes.
  *
  * @param moduleName The name of the module to be searched for
- * @returns The module path normalized
- */
-export function resolveModule(moduleName: string) {
-  return require.resolve(moduleName).replace(/\\+/g, "/");
-}
-
-/** Resolves the module directory (where `package.json` is) by `moduleName` */
-function resolveModuleDirectory(moduleName: string) {
-  const moduleEntrypoint = resolveModule(moduleName);
-  const modulePackage = findUpSync("package.json", { cwd: moduleEntrypoint });
-  return modulePackage?.slice(0, modulePackage.lastIndexOf("/")) || "";
-}
-
-/**
- * This function will find out the module path using node `require.resolve` function
- * and add the suffix param after the folder with module name.
- *
- * @param moduleName "@module/name"
  * @param suffix to be added after the module path
- * @returns the /path/to/@module/name/<suffix>
+ * @returns The module path normalized
  */
-export function getModulePath(moduleName: string, suffix: string) {
-  return join(resolveModuleDirectory(moduleName), suffix);
+export function resolveModule(moduleName: string, suffix?: string) {
+  const entrypoint = require.resolve(moduleName);
+  return suffix ? join(dirname(entrypoint), suffix) : entrypoint;
 }

packages/app-shell-vite-plugin/src/nodeModule.ts

@@ -16,11 +16,6 @@ import {
   startsWithSelf,
 } from "./config-utils.js";
 
-enum ViteCommand {
-  BUILD = "build",
-  SERVE = "serve",
-}
-
 type BundleDefinition =
   | HvAppShellProvidersConfig
   | HvAppShellViewsConfig
@@ -114,7 +109,7 @@ export default function processConfiguration(
           },
         },
         // if serve (preview/dev) it uses the basePath. Otherwise(build), use ./
-        base: command === ViteCommand.SERVE ? basePath : "./",
+        base: command === "serve" ? basePath : "./",
       };
     },
 

packages/app-shell-vite-plugin/src/vite-configuration-processor-plugin.ts

@@ -15,7 +15,7 @@ import {
   getFinalModuleName,
   loadConfigFile,
 } from "./config-utils.js";
-import { getModulePath, resolveModule } from "./nodeModule.js";
+import { resolveModule } from "./nodeModule.js";
 import SHARED_DEPENDENCIES from "./shared-dependencies.js";
 import getVirtualEntrypoints from "./virtual-entrypoints.js";
 import processConfiguration from "./vite-configuration-processor-plugin.js";
@@ -28,10 +28,10 @@ import generateImportmap, {
 import injectMetadata from "./vite-metadata-plugin.js";
 import serveAppShellConfig from "./vite-watch-config-plugin.js";
 
-enum ViteBuildMode {
-  PRODUCTION = "production",
-  DEVELOPMENT = "development",
-}
+const ViteBuildMode = {
+  PRODUCTION: "production",
+  DEVELOPMENT: "development",
+} as const;
 
 export type ApplicationBundleType = "app" | "bundle";
 
@@ -199,17 +199,15 @@ export function HvAppShellVitePlugin(
       viteStaticCopy({
         targets: [
           {
-            src: getModulePath("es-module-shims", "dist/*"),
+            src: resolveModule("es-module-shims", "*"),
             dest: "bundles",
           },
           // copy the ui kit icons' sprites to the "icons" folder
           {
-            src: [
-              getModulePath(
-                "@hitachivantara/uikit-react-icons",
-                "dist/sprites/*.svg",
-              ),
-            ],
+            src: resolveModule(
+              "@hitachivantara/uikit-react-icons",
+              "../sprites/*.svg",
+            ),
             dest: "icons",
           },
           ...(!devMode && buildEntryPoint