fix(optimizer): incorrect incompatible error (#20439)

Author: sapphi-red

packages/vite/src/node/plugins/importAnalysis.ts

@@ -373,32 +373,8 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
           return [resolved.id, resolved.id]
         }
 
-        const isRelative = url[0] === '.'
-        const isSelfImport = !isRelative && cleanUrl(url) === cleanUrl(importer)
-
         url = normalizeResolvedIdToUrl(environment, url, resolved)
 
-        // make the URL browser-valid
-        if (environment.config.consumer === 'client') {
-          // mark non-js/css imports with `?import`
-          if (isExplicitImportRequired(url)) {
-            url = injectQuery(url, 'import')
-          } else if (
-            (isRelative || isSelfImport) &&
-            !DEP_VERSION_RE.test(url)
-          ) {
-            // If the url isn't a request for a pre-bundled common chunk,
-            // for relative js/css imports, or self-module virtual imports
-            // (e.g. vue blocks), inherit importer's version query
-            // do not do this for unknown type imports, otherwise the appended
-            // query can break 3rd party plugin's extension checks.
-            const versionMatch = DEP_VERSION_RE.exec(importer)
-            if (versionMatch) {
-              url = injectQuery(url, versionMatch[1])
-            }
-          }
-        }
-
         try {
           // delay setting `isSelfAccepting` until the file is actually used (#7870)
           // We use an internal function to avoid resolving the url again
@@ -423,6 +399,31 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
           throw e
         }
 
+        // make the URL browser-valid
+        if (environment.config.consumer === 'client') {
+          const isRelative = url[0] === '.'
+          const isSelfImport =
+            !isRelative && cleanUrl(url) === cleanUrl(importer)
+
+          // mark non-js/css imports with `?import`
+          if (isExplicitImportRequired(url)) {
+            url = injectQuery(url, 'import')
+          } else if (
+            (isRelative || isSelfImport) &&
+            !DEP_VERSION_RE.test(url)
+          ) {
+            // If the url isn't a request for a pre-bundled common chunk,
+            // for relative js/css imports, or self-module virtual imports
+            // (e.g. vue blocks), inherit importer's version query
+            // do not do this for unknown type imports, otherwise the appended
+            // query can break 3rd party plugin's extension checks.
+            const versionMatch = DEP_VERSION_RE.exec(importer)
+            if (versionMatch) {
+              url = injectQuery(url, versionMatch[1])
+            }
+          }
+        }
+
         // prepend base
         if (!ssr) url = joinUrlSegments(base, url)
 

packages/vite/src/node/plugins/optimizedDeps.ts

@@ -42,7 +42,7 @@ export function optimizedDepsPlugin(): Plugin {
       if (depsOptimizer?.isOptimizedDepFile(id)) {
         const metadata = depsOptimizer.metadata
         const file = cleanUrl(id)
-        const versionMatch = DEP_VERSION_RE.exec(file)
+        const versionMatch = DEP_VERSION_RE.exec(id)
         const browserHash = versionMatch
           ? versionMatch[1].split('=')[1]
           : undefined
@@ -77,9 +77,8 @@ export function optimizedDepsPlugin(): Plugin {
         try {
           return await fsp.readFile(file, 'utf-8')
         } catch {
-          const newMetadata = depsOptimizer.metadata
-          if (optimizedDepInfoFromFile(newMetadata, file)) {
-            // Outdated non-entry points (CHUNK), loaded after a rerun
+          if (browserHash) {
+            // Outdated optimized files loaded after a rerun
             throwOutdatedRequest(id)
           }
           throwFileNotFoundInOptimizedDep(id)