fix: import .css in SSR

vitejs · Jun 28, 2022 · b6cbf82 · b6cbf82
1 parent 10936cd
commit b6cbf82
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 4 deletions.
diff --git a/packages/vite/src/node/plugins/resolve.ts b/packages/vite/src/node/plugins/resolve.ts
@@ -690,7 +690,7 @@ export function tryNodeResolve(
     // otherwise we may introduce duplicated modules for externalized files
     // from pre-bundled deps.
     if (!isBuild) {
-      const versionHash = depsOptimizer.metadata({ ssr }).browserHash
+      const versionHash = depsOptimizer.metadata({ ssr })?.browserHash
       if (versionHash && isJsType) {
         resolved = injectQuery(resolved, `v=${versionHash}`)
       }

diff --git a/packages/vite/src/node/ssr/ssrModuleLoader.ts b/packages/vite/src/node/ssr/ssrModuleLoader.ts
@@ -5,6 +5,7 @@ import {
   bareImportRE,
   dynamicImport,
   isBuiltin,
+  isDirectlyImportable,
   unwrapId,
   usingDynamicImport
 } from '../utils'
@@ -135,7 +136,10 @@ async function instantiateModule(
 
   const ssrImport = async (dep: string) => {
     if (dep[0] !== '.' && dep[0] !== '/') {
-      return nodeImport(dep, mod.file!, resolveOptions)
+      const imported = await nodeImport(dep, mod.file!, resolveOptions)
+      if (imported !== undefined) {
+        return imported
+      }
     }
     dep = unwrapId(dep)
     if (!isCircular(dep) && !pendingImports.get(dep)?.some(isCircular)) {
@@ -297,8 +301,10 @@ async function nodeImport(
   }
 
   try {
-    const mod = await dynamicImport(url)
-    return proxyESM(mod)
+    if (isDirectlyImportable(url)) {
+      const mod = await dynamicImport(url)
+      return proxyESM(mod)
+    }
   } finally {
     unhookNodeResolve()
   }

diff --git a/packages/vite/src/node/utils.ts b/packages/vite/src/node/utils.ts
@@ -244,6 +244,18 @@ export const isDataUrl = (url: string): boolean => dataUrlRE.test(url)
 export const virtualModuleRE = /^virtual-module:.*/
 export const virtualModulePrefix = 'virtual-module:'
 
+const directlyImportableRE = /\.(js|mjs|cjs)($|\?)/
+export const isDirectlyImportable = (url: string): boolean => {
+  url = cleanUrl(url)
+  if (directlyImportableRE.test(url)) {
+    return true
+  }
+  if (!path.extname(url) && !url.endsWith('/')) {
+    return true
+  }
+  return false
+}
+
 const knownJsSrcRE = /\.((j|t)sx?|mjs|vue|marko|svelte|astro)($|\?)/
 export const isJSRequest = (url: string): boolean => {
   url = cleanUrl(url)