fix(vite): better dev build error detection

Author: wmertens

.changeset/bright-cloths-film.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+Fix: Better configuration of Vite's optimizeDeps, preventing false duplication warnings, and verifying that Qwik dependencies are not in optimizeDeps.

packages/qwik-router/src/adapters/shared/vite/index.ts

@@ -20,6 +20,7 @@ export function viteAdapter(opts: ViteAdapterPluginOptions) {
   let renderModulePath: string | null = null;
   let qwikRouterConfigModulePath: string | null = null;
   let isSsrBuild = false;
+  let viteCommand: string | undefined;
   const outputEntries: string[] = [];
 
   const plugin: Plugin<never> = {
@@ -40,6 +41,7 @@ export function viteAdapter(opts: ViteAdapterPluginOptions) {
 
     configResolved(config) {
       isSsrBuild = !!config.build.ssr;
+      viteCommand = config.command;
 
       if (isSsrBuild) {
         qwikRouterPlugin = config.plugins.find(
@@ -72,17 +74,19 @@ export function viteAdapter(opts: ViteAdapterPluginOptions) {
     buildStart() {
       if (isSsrBuild && opts.ssg !== null) {
         const { srcDir } = qwikVitePlugin!.api!.getOptions()!;
-        // TODO don't rely on entry points for SSG, somehow
-        this.emitFile({
-          id: '@qwik-router-config',
-          type: 'chunk',
-          fileName: '@qwik-router-config.js',
-        });
-        this.emitFile({
-          id: `${srcDir}/entry.ssr`,
-          type: 'chunk',
-          fileName: 'entry.ssr.js',
-        });
+        if (viteCommand === 'build' && serverOutDir && srcDir) {
+          // TODO don't rely on entry points for SSG, somehow
+          this.emitFile({
+            id: '@qwik-router-config',
+            type: 'chunk',
+            fileName: '@qwik-router-config.js',
+          });
+          this.emitFile({
+            id: `${srcDir}/entry.ssr`,
+            type: 'chunk',
+            fileName: 'entry.ssr.js',
+          });
+        }
       }
     },
     generateBundle(_, bundles) {

packages/qwik-router/src/buildtime/vite/dev-middleware.ts

@@ -53,6 +53,8 @@ export const makeRouterDevMiddleware =
       return;
     }
 
+    // We'll be reloading the Qwik module, that's fine, don't let it warn
+    (globalThis as any).__qwik = undefined;
     // Now we can stream the render
     const { createQwikRouter } = (await server.ssrLoadModule(
       '@qwik.dev/router/middleware/node'

packages/qwik-router/src/buildtime/vite/plugin.ts

@@ -99,6 +99,7 @@ function qwikRouterPlugin(userOpts?: QwikRouterVitePluginOptions): any {
             `${routesDir}/**/layout*`,
             `${serverPluginsDir}/plugin@*`,
           ],
+          // These need processing by the optimizer during dev
           exclude: [
             QWIK_ROUTER,
             QWIK_ROUTER_CONFIG_ID,

packages/qwik/src/core/index.ts

@@ -5,12 +5,20 @@ import { version } from './version';
 if ((globalThis as any).__qwik) {
   console.error(
     `==============================================\n` +
-      `Qwik version ${(globalThis as any).__qwik} already imported while importing ${version}. Verify external vs bundled imports etc. This can lead to issues due to duplicated shared structures.\n` +
+      `Qwik version ${(globalThis as any).__qwik} already imported while importing ${version}.\n` +
+      `This can lead to issues due to duplicated shared structures.\n` +
+      `Verify that the Qwik libraries you're using are in "resolve.noExternal[]" and in "optimizeDeps.exclude".\n` +
       `==============================================\n`
   );
 }
 (globalThis as any).__qwik = version;
 
+if (import.meta.hot) {
+  import.meta.hot.dispose(() => {
+    (globalThis as any).__qwik = undefined;
+  });
+}
+
 //////////////////////////////////////////////////////////////////////////////////////////
 // Developer Core API
 //////////////////////////////////////////////////////////////////////////////////////////

packages/qwik/src/optimizer/src/plugins/plugin.ts

@@ -709,6 +709,14 @@ export function createQwikPlugin(optimizerOptions: OptimizerOptions = {}) {
     return null;
   };
 
+  /** Optimized deps can contain Qwik libraries, process them too */
+  const isOptimizedQwikDep = (id: string, code: string) => {
+    if (devServer && id.includes('.vite/deps/') && code.slice(0, 10000).includes('qwik')) {
+      return true;
+    }
+    return false;
+  };
+
   let transformCount = 0;
   const transform = async function (
     ctx: Rollup.PluginContext,
@@ -735,7 +743,7 @@ export function createQwikPlugin(optimizerOptions: OptimizerOptions = {}) {
     const dir = parsedPathId.dir;
     const base = parsedPathId.base;
     const ext = parsedPathId.ext.toLowerCase();
-    if (ext in TRANSFORM_EXTS || TRANSFORM_REGEX.test(pathId)) {
+    if (ext in TRANSFORM_EXTS || TRANSFORM_REGEX.test(pathId) || isOptimizedQwikDep(id, code)) {
       /** Strip client|server code from qwik server|client, but not in lib/test */
       const strip = opts.target === 'client' || opts.target === 'ssr';
       debug(

packages/qwik/src/optimizer/src/plugins/vite.ts

@@ -245,10 +245,16 @@ export function qwikVite(qwikViteOpts: QwikVitePluginOptions = {}): any {
             QWIK_JSX_DEV_RUNTIME_ID,
             QWIK_BUILD_ID,
             QWIK_CLIENT_MANIFEST_ID,
-            // v1 imports, they are removed during transform but vite doesn't know that
             '@builder.io/qwik',
-            '@builder.io/qwik-city',
           ],
+          // Enforce scanning our input even when overridden later
+          entries:
+            input &&
+            (typeof input === 'string'
+              ? [input]
+              : typeof input === 'object'
+                ? Object.values(input)
+                : input),
         },
         build: {
           modulePreload: false,
@@ -402,6 +408,20 @@ export function qwikVite(qwikViteOpts: QwikVitePluginOptions = {}): any {
       if (id.startsWith('\0') || !fileFilter(id, 'transform') || id.includes('?raw')) {
         return null;
       }
+      if (
+        id.includes('.vite/deps/') &&
+        code.slice(0, 5000).includes('qwik') &&
+        /import[^\n]*qwik[^\n]*\n/.test(code)
+      ) {
+        const relPath = rootDir && id.startsWith(rootDir) ? id.slice(rootDir.length) : id;
+        throw new Error(
+          `\n==============\n` +
+            `This dependency was pre-bundled by Vite, but it seems to use Qwik, which needs processing by the optimizer.\n` +
+            `Please add the original modulename to the "optimizeDeps.exclude" array in your Vite config:\n` +
+            `${relPath}\n` +
+            `==============\n`
+        );
+      }
 
       return qwikPlugin.transform(this, code, id, transformOpts);
     },
@@ -660,7 +680,10 @@ async function checkExternals() {
           if (await isQwikDep(packageName, importer ? path.dirname(importer) : rootDir)) {
             // TODO link to docs
             throw new Error(
-              `\n==============\n${packageName} is being treated as an external dependency, but it should be included in the server bundle, because it uses Qwik.\nPlease add the package to "ssr.noExternal" in the Vite config. \n==============`
+              `\n==============\n` +
+                `${packageName} is being treated as an external dependency, but it should be included in the server bundle, because it uses Qwik and it needs to be processed by the optimizer.\n` +
+                `Please add the package to "ssr.noExternal[]" as well as "optimizeDeps.exclude[]" in the Vite config. \n` +
+                `==============\n`
             );
           }
         }

packages/qwik/src/optimizer/src/plugins/vite.unit.ts

@@ -53,7 +53,6 @@ const excludeDeps = [
   '@qwik.dev/core/build',
   '@qwik-client-manifest',
   '@builder.io/qwik',
-  '@builder.io/qwik-city',
 ];
 
 const getPlugin = (opts: QwikVitePluginOptions | undefined) =>