Skip to content

Commit e7ba55e

Browse files
lukeedsapphi-red
andauthored
fix: ensure .[cm]?[tj]sx? static assets are JS mime (#19453)
Co-authored-by: sapphi-red <[email protected]>
1 parent edc65ea commit e7ba55e

File tree

7 files changed

+96
-12
lines changed

7 files changed

+96
-12
lines changed

packages/vite/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@
125125
"lightningcss": "^1.29.1",
126126
"magic-string": "^0.30.17",
127127
"mlly": "^1.7.4",
128-
"mrmime": "^2.0.0",
128+
"mrmime": "^2.0.1",
129129
"nanoid": "^5.0.9",
130130
"open": "^10.1.0",
131131
"parse5": "^7.2.1",

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import {
2626
withTrailingSlash,
2727
} from '../../../shared/utils'
2828

29-
const knownJavascriptExtensionRE = /\.[tj]sx?$/
29+
const knownJavascriptExtensionRE = /\.(?:[tj]sx?|[cm][tj]s)$/
3030

3131
const sirvOptions = ({
3232
getHeaders,
@@ -38,9 +38,9 @@ const sirvOptions = ({
3838
etag: true,
3939
extensions: [],
4040
setHeaders(res, pathname) {
41-
// Matches js, jsx, ts, tsx.
42-
// The reason this is done, is that the .ts file extension is reserved
43-
// for the MIME type video/mp2t. In almost all cases, we can expect
41+
// Matches js, jsx, ts, tsx, mts, mjs, cjs, cts, ctx, mtx
42+
// The reason this is done, is that the .ts and .mts file extensions are
43+
// reserved for the MIME type video/mp2t. In almost all cases, we can expect
4444
// these files to be TypeScript files, and for Vite to serve them with
4545
// this Content-Type.
4646
if (knownJavascriptExtensionRE.test(pathname)) {

playground/assets/__tests__/assets.spec.ts

+41
Original file line numberDiff line numberDiff line change
@@ -154,6 +154,47 @@ describe('asset imports from js', () => {
154154
'[success] Raw js from /public loaded'
155155
"
156156
`)
157+
expect(await page.textContent('.public-js-import-content-type')).toMatch(
158+
'text/javascript',
159+
)
160+
})
161+
162+
test('from /public (ts)', async () => {
163+
expect(await page.textContent('.public-ts-import')).toMatch(
164+
'/foo/bar/raw.ts',
165+
)
166+
expect(await page.textContent('.public-ts-import-content'))
167+
.toMatchInlineSnapshot(`
168+
"export default function other() {
169+
return 1 + 2
170+
}
171+
"
172+
`)
173+
// NOTE: users should configure the mime type for .ts files for preview server
174+
if (isServe) {
175+
expect(await page.textContent('.public-ts-import-content-type')).toMatch(
176+
'text/javascript',
177+
)
178+
}
179+
})
180+
181+
test('from /public (mts)', async () => {
182+
expect(await page.textContent('.public-mts-import')).toMatch(
183+
'/foo/bar/raw.mts',
184+
)
185+
expect(await page.textContent('.public-mts-import-content'))
186+
.toMatchInlineSnapshot(`
187+
"export default function foobar() {
188+
return 1 + 2
189+
}
190+
"
191+
`)
192+
// NOTE: users should configure the mime type for .ts files for preview server
193+
if (isServe) {
194+
expect(await page.textContent('.public-mts-import-content-type')).toMatch(
195+
'text/javascript',
196+
)
197+
}
157198
})
158199
})
159200

playground/assets/index.html

+38-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,18 @@ <h2>Asset Imports from JS</h2>
3838
</li>
3939
<li>
4040
From publicDir (js): <code class="public-js-import"></code> Content:
41-
<code class="public-js-import-content"></code>
41+
<code class="public-js-import-content"></code> Content-Type:
42+
<code class="public-js-import-content-type"></code>
43+
</li>
44+
<li>
45+
From publicDir (ts): <code class="public-ts-import"></code> Content:
46+
<code class="public-ts-import-content"></code> Content-Type:
47+
<code class="public-ts-import-content-type"></code>
48+
</li>
49+
<li>
50+
From publicDir (mts): <code class="public-mts-import"></code> Content:
51+
<code class="public-mts-import-content"></code> Content-Type:
52+
<code class="public-mts-import-content-type"></code>
4253
</li>
4354
</ul>
4455

@@ -494,6 +505,32 @@ <h3>assets in template</h3>
494505
;(async () => {
495506
const res = await fetch(publicJsUrl)
496507
text('.public-js-import-content', await res.text())
508+
text(
509+
'.public-js-import-content-type',
510+
await res.headers.get('Content-Type'),
511+
)
512+
})()
513+
514+
import publicTsUrl from '/raw.ts?url'
515+
text('.public-ts-import', publicTsUrl)
516+
;(async () => {
517+
const res = await fetch(publicTsUrl)
518+
text('.public-ts-import-content', await res.text())
519+
text(
520+
'.public-ts-import-content-type',
521+
await res.headers.get('Content-Type'),
522+
)
523+
})()
524+
525+
import publicMtsUrl from '/raw.mts?url'
526+
text('.public-mts-import', publicMtsUrl)
527+
;(async () => {
528+
const res = await fetch(publicMtsUrl)
529+
text('.public-mts-import-content', await res.text())
530+
text(
531+
'.public-mts-import-content-type',
532+
await res.headers.get('Content-Type'),
533+
)
497534
})()
498535

499536
import svgFrag from './nested/fragment.svg'

playground/assets/static/raw.mts

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default function foobar() {
2+
return 1 + 2
3+
}

playground/assets/static/raw.ts

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default function other() {
2+
return 1 + 2
3+
}

pnpm-lock.yaml

+6-6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)