fix: Vite production build errors with transitive dependencies (#15413)

Fixes #15395

Modifies the Vite stats.json plugin so that only direct dependencies are considered in `npmModules`, assuming that transitive dependency versions are not relevant.

In addition, includes integration testing setup up with a transitive dependency for Vite, in both development and production modes.

Author: platosha

flow-server/src/main/resources/vite.generated.ts

@@ -31,6 +31,7 @@ const generatedFlowImportsFolder = path.resolve(__dirname, settings.generatedFlo
 const themeResourceFolder = path.resolve(__dirname, settings.themeResourceFolder);
 const projectPackageJsonFile = path.resolve(__dirname, 'package.json');
 const statsFile = path.resolve(statsFolder, 'stats.json');
+const nodeModulesFolder = path.resolve(__dirname, 'node_modules');
 
 const projectStaticAssetsFolders = [
   path.resolve(__dirname, 'src', 'main', 'resources', 'META-INF', 'resources'),
@@ -171,10 +172,11 @@ function statsExtracterPlugin(): PluginOption {
     enforce: 'post',
     async writeBundle(options: OutputOptions, bundle: { [fileName: string]: AssetInfo | ChunkInfo }) {
       const modules = Object.values(bundle).flatMap((b) => (b.modules ? Object.keys(b.modules) : []));
-      const nodeModulesFolders = modules.filter((id) => id.includes('node_modules'));
+      const nodeModulesFolders = modules
+          .filter((id) => id.startsWith(nodeModulesFolder))
+          .map(id => id.substring(nodeModulesFolder.length + 1));
       const npmModules = nodeModulesFolders
         .map((id) => id.replace(/\\/g, '/'))
-        .map((id) => id.replace(/.*node_modules./, ''))
         .map((id) => {
           const parts = id.split('/');
           if (id.startsWith('@')) {
@@ -224,7 +226,7 @@ function vaadinBundlesPlugin(): PluginOption {
 
   const disabledMessage = 'Vaadin component dependency bundles are disabled.';
 
-  const modulesDirectory = path.resolve(__dirname, 'node_modules').replace(/\\/g, '/');
+  const modulesDirectory = nodeModulesFolder.replace(/\\/g, '/');
 
   let vaadinBundleJson: BundleJson;
 
@@ -476,7 +478,7 @@ let spaMiddlewareForceRemoved = false;
 const allowedFrontendFolders = [
   frontendFolder,
   path.resolve(generatedFlowImportsFolder), // Contains only generated-flow-imports
-  path.resolve(__dirname, 'node_modules')
+  nodeModulesFolder
 ];
 
 function setHmrPortToServerPort(): PluginOption {
@@ -649,7 +651,7 @@ export const overrideVaadinConfig = (customConfig: UserConfigFn) => {
   return defineConfig((env) => mergeConfig(vaadinConfig(env), customConfig(env)));
 };
 function getVersion(module: string):string {
-  const packageJson = `node_modules/${module}/package.json`;
+  const packageJson = path.resolve(nodeModulesFolder, module, 'package.json');
   return JSON.parse(readFileSync(packageJson, {encoding: 'utf-8'})).version;
 }
 

flow-tests/test-frontend/vite-basics/package-outside-npm/index.js

@@ -19,8 +19,8 @@
     "construct-style-sheets-polyfill": "3.1.0",
     "copy-to-clipboard": "^3.3.1",
     "lit": "2.4.1",
-    "package-outside-npm": "file:package-outside-npm",
-    "package2-outside-npm": "./package2-outside-npm"
+    "package-outside-npm": "file:../vite-test-assets/packages/package-outside-npm",
+    "package2-outside-npm": "../vite-test-assets/packages/package2-outside-npm"
   },
   "devDependencies": {
     "@rollup/plugin-replace": "3.1.0",
@@ -31,9 +31,9 @@
     "rollup-plugin-brotli": "3.1.0",
     "strip-css-comments": "5.0.0",
     "transform-ast": "2.4.4",
-    "typescript": "4.7.4",
-    "vite": "v3.2.3",
-    "vite-plugin-checker": "0.4.9",
+    "typescript": "4.9.3",
+    "vite": "v4.0.0-alpha.6",
+    "vite-plugin-checker": "0.5.1",
     "workbox-build": "6.5.0",
     "workbox-core": "6.5.0",
     "workbox-precaching": "6.5.0"
@@ -77,13 +77,13 @@
       "rollup-plugin-brotli": "3.1.0",
       "strip-css-comments": "5.0.0",
       "transform-ast": "2.4.4",
-      "typescript": "4.7.4",
-      "vite": "v3.2.3",
-      "vite-plugin-checker": "0.4.9",
+      "typescript": "4.9.3",
+      "vite": "v4.0.0-alpha.6",
+      "vite-plugin-checker": "0.5.1",
       "workbox-build": "6.5.0",
       "workbox-core": "6.5.0",
       "workbox-precaching": "6.5.0"
     },
-    "hash": "e754f39771a40db99825f9a1ac5f1b0410805614ed8d41076b74eb77a6693bd2"
+    "hash": "1dcb4cd20949590f5059908b48b415dc7a387bf0044f84e8eaf230d0fc54535a"
   }
 }

flow-tests/test-frontend/vite-basics/package.json

@@ -14,7 +14,9 @@
     "@vaadin/vaadin-text-field": "23.3.0-alpha2",
     "@vaadin/vaadin-themable-mixin": "23.3.0-alpha2",
     "construct-style-sheets-polyfill": "3.1.0",
-    "lit": "2.4.1"
+    "lit": "2.4.1",
+    "package-outside-npm": "file:../vite-test-assets/packages/package-outside-npm",
+    "package2-outside-npm": "../vite-test-assets/packages/package2-outside-npm"
   },
   "devDependencies": {
     "@rollup/plugin-replace": "3.1.0",
@@ -25,9 +27,9 @@
     "rollup-plugin-brotli": "3.1.0",
     "strip-css-comments": "5.0.0",
     "transform-ast": "2.4.4",
-    "typescript": "4.7.4",
-    "vite": "v3.2.3",
-    "vite-plugin-checker": "0.4.9",
+    "typescript": "4.9.3",
+    "vite": "v4.0.0-alpha.6",
+    "vite-plugin-checker": "0.5.1",
     "workbox-build": "6.5.0",
     "workbox-core": "6.5.0",
     "workbox-precaching": "6.5.0"
@@ -53,13 +55,13 @@
       "rollup-plugin-brotli": "3.1.0",
       "strip-css-comments": "5.0.0",
       "transform-ast": "2.4.4",
-      "typescript": "4.7.4",
-      "vite": "v3.2.3",
-      "vite-plugin-checker": "0.4.9",
+      "typescript": "4.9.3",
+      "vite": "v4.0.0-alpha.6",
+      "vite-plugin-checker": "0.5.1",
       "workbox-build": "6.5.0",
       "workbox-core": "6.5.0",
       "workbox-precaching": "6.5.0"
     },
-    "hash": "b61eb98027a28e8ca115264e78543abc1bf08c08c109f8c8cedbd17990281ab7"
+    "hash": "5f6b4e932fbbcc4dda9663ca11044b8bd2cfcdd282faee58f07a2d27a95f51d1"
   }
 }

flow-tests/test-frontend/vite-basics/package2-outside-npm/index.js

@@ -13,12 +13,16 @@
 @Route("")
 @JsModule("@testscope/button")
 @JsModule("@testscope/map")
+@JsModule("package-outside-npm/index.js")
+@JsModule("package2-outside-npm/index.js")
 @JsModule("./lit-invalid-imports.ts")
 @CssImport("./image.css")
 public class MainView extends Div {
 
     public static final String PLANT = "plant";
     public static final String HIDEPLANT = "hideplant";
+    public static final String OUTSIDE = "outsideButton";
+    public static final String OUTSIDE_RESULT = "outsideResult";
 
     public MainView() {
         Image img = new Image("themes/vite-production/images/plant.png",
@@ -38,6 +42,17 @@ public MainView() {
         setSizeFull();
         getStyle().set("text-align", "center");
 
+        NativeButton checkOutsideJs = new NativeButton("Check outside JS",
+                e -> {
+                    getElement().executeJs(OUTSIDE_RESULT
+                            + ".innerText = window.packageOutsideNpm() + ' - ' + window.package2OutsideNpm();");
+                });
+        checkOutsideJs.setId(OUTSIDE);
+        add(checkOutsideJs);
+        Paragraph outsideStatus = new Paragraph();
+        outsideStatus.setId(OUTSIDE_RESULT);
+        add(outsideStatus);
+
         add(new HtmlComponent("testscope-button"));
         add(new HtmlComponent("testscope-map"));
     }

flow-tests/test-frontend/vite-production/package.json

@@ -0,0 +1,27 @@
+package com.vaadin.viteapp;
+
+import com.vaadin.flow.component.html.testbench.NativeButtonElement;
+import com.vaadin.flow.component.html.testbench.ParagraphElement;
+import com.vaadin.flow.testutil.ChromeBrowserTest;
+import com.vaadin.viteapp.views.empty.MainView;
+import io.github.bonigarcia.wdm.WebDriverManager;
+import org.junit.Assert;
+import org.junit.BeforeClass;
+import org.junit.Test;
+
+public class ExternalPackageIT extends ChromeBrowserTest {
+
+    @BeforeClass
+    public static void driver() {
+        WebDriverManager.chromedriver().setup();
+    }
+
+    @Test
+    public void packageOutsideNpmWorks() {
+        getDriver().get(getRootURL());
+        waitForDevServer();
+        $(NativeButtonElement.class).id(MainView.OUTSIDE).click();
+        Assert.assertEquals("It works - It works", $(ParagraphElement.class)
+                .id(MainView.OUTSIDE_RESULT).getText());
+    }
+}

flow-tests/test-frontend/vite-production/src/main/java/com/vaadin/viteapp/views/empty/MainView.java

@@ -0,0 +1 @@
+!node_modules

flow-tests/test-frontend/vite-production/src/test/java/com/vaadin/viteapp/ExternalPackageIT.java

@@ -0,0 +1,3 @@
+import { packageTransitive } from 'package-transitive';
+
+window.packageOutsideNpm = packageTransitive;