fix: ensure .[cm]?[tj]sx? static assets are JS mime (#19453)

Co-authored-by: sapphi-red <49056869+sapphi-red@users.noreply.github.com>

Author: lukeed

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
+}