fix: better dependency non-js type file handling

- avoid appending version query to externalized non-js dep files
vitejs · Feb 4, 2021 · 1fdc710 · 1fdc710
1 parent 3fad3ba
commit 1fdc710
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 11 deletions.
diff --git a/packages/vite/src/node/constants.ts b/packages/vite/src/node/constants.ts
@@ -2,6 +2,8 @@ import path from 'path'
 
 export const SUPPORTED_EXTS = ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']
 
+export const JS_TYPES_RE = /\.(j|t)sx?$|\.mjs$/
+
 export const SPECIAL_QUERY_RE = /[\?&](worker|raw|url)\b/
 
 export const DEP_CACHE_DIR = `.vite`

diff --git a/packages/vite/src/node/optimizer/scan.ts b/packages/vite/src/node/optimizer/scan.ts
@@ -3,7 +3,7 @@ import path from 'path'
 import glob from 'fast-glob'
 import { ResolvedConfig } from '..'
 import { Loader, Plugin } from 'esbuild'
-import { KNOWN_ASSET_TYPES, SPECIAL_QUERY_RE } from '../constants'
+import { KNOWN_ASSET_TYPES, JS_TYPES_RE, SPECIAL_QUERY_RE } from '../constants'
 import {
   createDebugger,
   emptyDir,
@@ -25,7 +25,6 @@ import { ensureService } from '../plugins/esbuild'
 
 const debug = createDebugger('vite:deps')
 
-const jsTypesRE = /\.(j|t)sx?$|\.mjs$/
 const htmlTypesRE = /\.(html|vue|svelte)$/
 
 export async function scanImports(
@@ -301,7 +300,7 @@ function esbuildScanPlugin(
       // for jsx/tsx, we need to access the content and check for
       // presence of import.meta.glob, since it results in import relationships
       // but isn't crawled by esbuild.
-      build.onLoad({ filter: jsTypesRE }, ({ path: id }) => {
+      build.onLoad({ filter: JS_TYPES_RE }, ({ path: id }) => {
         let ext = path.extname(id).slice(1)
         if (ext === 'mjs') ext = 'js'
 
@@ -363,7 +362,7 @@ export function shouldExternalizeDep(resolvedId: string, rawId?: string) {
     return true
   }
   // resovled is not a js type
-  if (!jsTypesRE.test(resolvedId)) {
+  if (!JS_TYPES_RE.test(resolvedId)) {
     return true
   }
 }
diff --git a/packages/vite/src/node/plugins/resolve.ts b/packages/vite/src/node/plugins/resolve.ts
@@ -2,7 +2,12 @@ import fs from 'fs'
 import path from 'path'
 import { Plugin } from '../plugin'
 import chalk from 'chalk'
-import { FS_PREFIX, SPECIAL_QUERY_RE, SUPPORTED_EXTS } from '../constants'
+import {
+  FS_PREFIX,
+  JS_TYPES_RE,
+  SPECIAL_QUERY_RE,
+  SUPPORTED_EXTS
+} from '../constants'
 import {
   isBuiltin,
   bareImportRE,
@@ -23,7 +28,6 @@ import slash from 'slash'
 import { createFilter } from '@rollup/pluginutils'
 import { PartialResolvedId } from 'rollup'
 import { resolve as _resolveExports } from 'resolve.exports'
-import { isCSSRequest } from './css'
 
 const altMainFields = [
   'module',
@@ -381,21 +385,22 @@ export function tryNodeResolve(
       return { id: resolved }
     }
     // if we reach here, it's a valid dep import that hasn't been optimzied.
+    const isJsType = JS_TYPES_RE.test(resolved)
     const exclude = server.config.optimizeDeps?.exclude
     if (
+      !isJsType ||
       importer?.includes('node_modules') ||
       exclude?.includes(pkgId) ||
       exclude?.includes(id) ||
-      isCSSRequest(resolved) ||
-      server.config.assetsInclude(resolved) ||
-      resolved.endsWith('.json') ||
       SPECIAL_QUERY_RE.test(resolved)
     ) {
       // excluded from optimization
       // Inject a version query to npm deps so that the browser
-      // can cache it without revalidation.
+      // can cache it without revalidation, but only do so for known js types.
+      // otherwise we may introduce duplicated modules for externalized files
+      // from pre-bundled deps.
       const versionHash = server._optimizeDepsMetadata?.browserHash
-      if (versionHash) {
+      if (versionHash && isJsType) {
         resolved = injectQuery(resolved, `v=${versionHash}`)
       }
     } else {