fix: ensure .[cm]?[tj]sx? static assets are JS mime

packages/vite/package.json

@@ -125,7 +125,7 @@
     "lightningcss": "^1.29.1",
     "magic-string": "^0.30.17",
     "mlly": "^1.7.4",
-    "mrmime": "^2.0.0",
+    "mrmime": "^2.0.1",
     "nanoid": "^5.0.9",
     "open": "^10.1.0",
     "parse5": "^7.2.1",

packages/vite/src/node/server/middlewares/static.ts

@@ -26,7 +26,7 @@ import {
   withTrailingSlash,
 } from '../../../shared/utils'
 
-const knownJavascriptExtensionRE = /\.[tj]sx?$/
+const knownJavascriptExtensionRE = /\.(?:[tj]sx?|[cm][tj]s)$/
 
 const sirvOptions = ({
   getHeaders,
@@ -38,9 +38,9 @@ const sirvOptions = ({
     etag: true,
     extensions: [],
     setHeaders(res, pathname) {
-      // Matches js, jsx, ts, tsx.
-      // The reason this is done, is that the .ts file extension is reserved
-      // for the MIME type video/mp2t. In almost all cases, we can expect
+      // Matches js, jsx, ts, tsx, mts, mjs, cjs, cts, ctx, mtx
+      // The reason this is done, is that the .ts and .mts file extensions are
+      // reserved for the MIME type video/mp2t. In almost all cases, we can expect
       // these files to be TypeScript files, and for Vite to serve them with
       // this Content-Type.
       if (knownJavascriptExtensionRE.test(pathname)) {

playground/assets/__tests__/assets.spec.ts

@@ -154,6 +154,47 @@ describe('asset imports from js', () => {
           '[success] Raw js from /public loaded'
         "
       `)
+    expect(await page.textContent('.public-js-import-content-type')).toMatch(
+      'text/javascript',
+    )
+  })
+
+  test('from /public (ts)', async () => {
+    expect(await page.textContent('.public-ts-import')).toMatch(
+      '/foo/bar/raw.ts',
+    )
+    expect(await page.textContent('.public-ts-import-content'))
+      .toMatchInlineSnapshot(`
+      "export default function other() {
+        return 1 + 2
+      }
+      "
+    `)
+    // NOTE: users should configure the mime type for .ts files for preview server
+    if (isServe) {
+      expect(await page.textContent('.public-ts-import-content-type')).toMatch(
+        'text/javascript',
+      )
+    }
+  })
+
+  test('from /public (mts)', async () => {
+    expect(await page.textContent('.public-mts-import')).toMatch(
+      '/foo/bar/raw.mts',
+    )
+    expect(await page.textContent('.public-mts-import-content'))
+      .toMatchInlineSnapshot(`
+      "export default function foobar() {
+        return 1 + 2
+      }
+      "
+    `)
+    // NOTE: users should configure the mime type for .ts files for preview server
+    if (isServe) {
+      expect(await page.textContent('.public-mts-import-content-type')).toMatch(
+        'text/javascript',
+      )
+    }
   })
 })
 

playground/assets/index.html

@@ -38,7 +38,18 @@ <h2>Asset Imports from JS</h2>
   </li>
   <li>
     From publicDir (js): <code class="public-js-import"></code> Content:
-    <code class="public-js-import-content"></code>
+    <code class="public-js-import-content"></code> Content-Type:
+    <code class="public-js-import-content-type"></code>
+  </li>
+  <li>
+    From publicDir (ts): <code class="public-ts-import"></code> Content:
+    <code class="public-ts-import-content"></code> Content-Type:
+    <code class="public-ts-import-content-type"></code>
+  </li>
+  <li>
+    From publicDir (mts): <code class="public-mts-import"></code> Content:
+    <code class="public-mts-import-content"></code> Content-Type:
+    <code class="public-mts-import-content-type"></code>
   </li>
 </ul>
 
@@ -494,6 +505,32 @@ <h3>assets in template</h3>
   ;(async () => {
     const res = await fetch(publicJsUrl)
     text('.public-js-import-content', await res.text())
+    text(
+      '.public-js-import-content-type',
+      await res.headers.get('Content-Type'),
+    )
+  })()
+
+  import publicTsUrl from '/raw.ts?url'
+  text('.public-ts-import', publicTsUrl)
+  ;(async () => {
+    const res = await fetch(publicTsUrl)
+    text('.public-ts-import-content', await res.text())
+    text(
+      '.public-ts-import-content-type',
+      await res.headers.get('Content-Type'),
+    )
+  })()
+
+  import publicMtsUrl from '/raw.mts?url'
+  text('.public-mts-import', publicMtsUrl)
+  ;(async () => {
+    const res = await fetch(publicMtsUrl)
+    text('.public-mts-import-content', await res.text())
+    text(
+      '.public-mts-import-content-type',
+      await res.headers.get('Content-Type'),
+    )
   })()
 
   import svgFrag from './nested/fragment.svg'

playground/assets/static/raw.mts

@@ -0,0 +1,3 @@
+export default function foobar() {
+  return 1 + 2
+}

playground/assets/static/raw.ts

@@ -0,0 +1,3 @@
+export default function other() {
+  return 1 + 2
+}