JS module imported as url not handled correctly on build #19807
Description
Describe the bug
I have an SSR framework that has the following within.
Notice entryClientUrl part (both its import and reference site).
import type { RouteObject } from 'react-router'
import { createRoute } from '../lib/react-router-helpers.js'
import entryClientUrl from './entry.client.jsx?url'
export const Component = () => {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
</head>
<body>
<script type="module" src={entryClientUrl}></script>
</body>
</html>
)
}
export const root = createRoute({
path: `/`,
Component,
})
export const routes: RouteObject[] = [
root,
]When running a Vite build a few things happen that are unexpected to me, and appear to be a bug:
- The
srcvalue becomes inlined as:
data:text/jsx;base64,aW1wb3J0IHsgUm91dGVyUHJvdmlkZXIsIGNyZWF0ZUJyb3dzZXJSb3V0ZXIgfSBmcm9tICdyZWFjdC1yb3V0ZXInOwppbXBvcnQgeyByb3V0ZXMgfSBmcm9tICcuL3JvdXRlcy5qc3gnOwppbXBvcnQgeyBSZWFjdERvbUNsaWVudCB9IGZyb20gJy4uL2xpYi9yZWFjdC1kb20tY2xpZW50L19uYW1lc3BhY2UuanMnOwpjb25zdCByb3V0ZXIgPSBjcmVhdGVCcm93c2VyUm91dGVyKHJvdXRlcywgewogICAgLy8gQHRzLWV4cGVjdC1lcnJvciBpZ25vcmUKICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZQogICAgaHlkcmF0aW9uRGF0YTogd2luZG93Ll9fc3RhdGljUm91dGVySHlkcmF0aW9uRGF0YSwKfSk7ClJlYWN0RG9tQ2xpZW50Lmh5ZHJhdGVSb290KGRvY3VtZW50LCA8Um91dGVyUHJvdmlkZXIgcm91dGVyPXtyb3V0ZXJ9Lz4pOwo=
- The "client" environment build outputs the
entry.clientasset twice.
vite v6.2.4 building for production...
✓ 38 modules transformed.
dist/.vite/manifest.json 0.27 kB │ gzip: 0.17 kB
dist/assets/entry.client-Dzbc5IV8.jsx 0.42 kB
dist/assets/entry.client-CScTwu1U.js 715.68 kB │ gzip: 135.55 kB
✓ built in 578ms
vite v6.2.4 building SSR bundle for production...
✓ 6 modules transformed.
dist/entry.js 3.31 kB
✓ built in 18ms
Expectation
- Build outputs code with path to asset
- Asset is not output twice
Reproduction
https://github.com/the-guild-org/polen/tree/repro/vite-jsx-url
Steps to reproduce
- Import a JS module with
?url.
System Info
System:
OS: macOS 15.3.2
CPU: (8) arm64 Apple M1 Pro
Memory: 266.25 MB / 32.00 GB
Shell: 3.5.0 - /opt/homebrew/bin/fish
Binaries:
Node: 22.14.0 - ~/Library/pnpm/node
npm: 10.9.2 - ~/Library/pnpm/npm
pnpm: 9.15.5 - /opt/homebrew/bin/pnpm
Watchman: 2024.12.02.00 - /opt/homebrew/bin/watchman
Browsers:
Brave Browser: 114.1.52.122
Chrome: 134.0.6998.166
Safari: 18.3.1
npmPackages:
vite: ^6.2.4 => 6.2.4Used Package Manager
pnpm
Logs
GitHub gave me error about input being too long. So, I put it into the repro repo here: https://github.com/the-guild-org/polen/tree/repro/vite-jsx-url?tab=readme-ov-file#build-output
Validations
- Follow our Code of Conduct
- Read the Contributing Guidelines.
- Read the docs.
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
- Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
- The provided reproduction is a minimal reproducible example of the bug.