fix: mime missing extensions (#8568)

packages/vite/src/node/constants.ts

@@ -62,7 +62,10 @@ export const CLIENT_DIR = path.dirname(CLIENT_ENTRY)
 
 // ** READ THIS ** before editing `KNOWN_ASSET_TYPES`.
 //   If you add an asset to `KNOWN_ASSET_TYPES`, make sure to also add it
-//   to the TypeScript declaration file `packages/vite/client.d.ts`.
+//   to the TypeScript declaration file `packages/vite/client.d.ts` and
+//   add a mime type to the `registerCustomMime` in
+//   `packages/vite/src/node/plugin/assets.ts` if mime type cannot be
+//   looked up by mrmime.
 export const KNOWN_ASSET_TYPES = [
   // images
   'png',

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

@@ -23,6 +23,18 @@ const assetHashToFilenameMap = new WeakMap<
 // save hashes of the files that has been emitted in build watch
 const emittedHashMap = new WeakMap<ResolvedConfig, Set<string>>()
 
+// add own dictionary entry by directly assigning mrmime
+export function registerCustomMime(): void {
+  // https://github.com/lukeed/mrmime/issues/3
+  mrmime.mimes['ico'] = 'image/x-icon'
+  // https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Containers#flac
+  mrmime.mimes['flac'] = 'audio/flac'
+  // mrmime and mime-db is not released yet: https://github.com/jshttp/mime-db/commit/c9242a9b7d4bb25d7a0c9244adec74aeef08d8a1
+  mrmime.mimes['aac'] = 'audio/aac'
+  // https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
+  mrmime.mimes['eot'] = 'application/vnd.ms-fontobject'
+}
+
 /**
  * Also supports loading plain strings with import text from './foo.txt?raw'
  */
@@ -31,9 +43,8 @@ export function assetPlugin(config: ResolvedConfig): Plugin {
   assetHashToFilenameMap.set(config, new Map())
   const relativeBase = isRelativeBase(config.base)
 
-  // add own dictionary entry by directly assigning mrmine
-  // https://github.com/lukeed/mrmime/issues/3
-  mrmime.mimes['ico'] = 'image/x-icon'
+  registerCustomMime()
+
   return {
     name: 'vite:asset',
 
@@ -338,8 +349,9 @@ async function fileToBuiltUrl(
     (!file.endsWith('.svg') &&
       content.length < Number(config.build.assetsInlineLimit))
   ) {
+    const mimeType = mrmime.lookup(file) ?? 'application/octet-stream'
     // base64 inlined as a string
-    url = `data:${mrmime.lookup(file)};base64,${content.toString('base64')}`
+    url = `data:${mimeType};base64,${content.toString('base64')}`
   } else {
     // emit as asset
     // rollup supports `import.meta.ROLLUP_FILE_URL_*`, but it generates code

playground/assets/__tests__/assets.spec.ts

@@ -218,6 +218,12 @@ describe('svg fragments', () => {
   })
 })
 
+test('Unknown extension assets import', async () => {
+  expect(await page.textContent('.unknown-ext')).toMatch(
+    isBuild ? 'data:application/octet-stream;' : '/nested/foo.unknown'
+  )
+})
+
 test('?raw import', async () => {
   expect(await page.textContent('.raw')).toMatch('SVG')
 })

playground/assets/index.html

@@ -166,6 +166,9 @@ <h2>SVG Fragments via JS Import</h2>
   <img class="svg-frag-import" alt="" />
 </div>
 
+<h2>Unknown extension assets import</h2>
+<code class="unknown-ext"></code>
+
 <h2>?raw import</h2>
 <code class="raw"></code>
 
@@ -318,6 +321,9 @@ <h3>style in svg</h3>
   text('.svg-frag-import-path', svgFrag)
   document.querySelector('.svg-frag-import').src = svgFrag + '#icon-heart-view'
 
+  import unknownExtUrl from './nested/foo.unknown'
+  text('.unknown-ext', unknownExtUrl)
+
   import rawSvg from './nested/fragment.svg?raw'
   text('.raw', rawSvg)
 

playground/assets/nested/foo.unknown

@@ -0,0 +1 @@
+custom file

playground/assets/vite.config.js

@@ -11,6 +11,7 @@ module.exports = {
       '@': path.resolve(__dirname, 'nested')
     }
   },
+  assetsInclude: ['**/*.unknown'],
   build: {
     outDir: 'dist/foo',
     assetsInlineLimit: 8192, // 8kb