Skip to content

?raw imports work in vp dev but fail in vp pack, from the same vite.config.ts #2796

Description

@dynamsoft-h

Describe the bug

Disclaimer: I formatted this with an LLM.

My library inlines an HTML template and some SVG icons as strings with ?raw:

import svg from "./x.svg?raw";

vp dev serves the file contents, as plain Vite does. vp pack stops with
UNLOADABLE_DEPENDENCY, because it tries to open a file literally named
x.svg?raw. An ?inline CSS import in the same file packs fine, so pack
handles some asset queries and not others, and the
pack guide does not say which.

I am filing this here rather than with tsdown because what breaks is the Vite+
promise that one config means the same thing to vp dev and vp pack. Nothing
in the config warns that the two commands read this import differently.

The gap looks small. Rolldown already resolves the import: a plugin's load
hook receives the absolute path with ?raw still attached. Only the default
file reader fails. This plugin in pack.plugins fixes it:

import { readFileSync } from "node:fs";
import type { Plugin } from "vite-plus";

function rawImports(): Plugin {
	const RAW = /\?raw$/;
	return {
		name: "raw-imports",
		load: {
			filter: { id: RAW },
			handler: (id) =>
				`export default ${JSON.stringify(readFileSync(id.replace(RAW, ""), "utf-8"))};`,
		},
	};
}

pack: { loader: { ".svg": "text" } } does not fix it. It matches on file
extension, so the source has to drop ?raw, and then vp dev returns a URL for
the import instead of the contents. That swaps a build error for a silent
difference between dev and the published build.

What I would like:

  1. vp pack handles the asset queries vp dev handles, ?raw at least.
  2. Failing that, the pack guide lists the queries pack supports, and the error
    names the query and points at loader or a plugin.

A related question: tsdown's guide says it "is positioned to become the
foundation for Rolldown Vite's Library Mode". Should library authors on
vp pack expect Vite's asset queries to arrive there eventually, or plan on
keeping their own plugins for them? Either answer is fine to build against. The
closest existing thread is tsdown discussion
#631.

Reproduction

No URL, follow reproduction steps below.

Steps to reproduce

Create the project:

mkdir vp-raw-repro && cd vp-raw-repro && mkdir src
cat > package.json <<'EOF'
{
	"name": "vp-raw-repro",
	"private": true,
	"type": "module",
	"devDependencies": { "vite-plus": "1.0.0-rc.0" }
}
EOF
cat > vite.config.ts <<'EOF'
import { defineConfig } from "vite-plus";

export default defineConfig({
	pack: { entry: "src/index.ts" },
});
EOF
cat > src/index.ts <<'EOF'
import svg from "./x.svg?raw";
import css from "./y.css?inline";

export { svg, css };
EOF
echo '<svg xmlns="http://www.w3.org/2000/svg"/>' > src/x.svg
echo 'p { color: red; }' > src/y.css
npm install
  1. Run npx vp dev. In a second terminal, fetch the URL the dev server rewrites
    the import to:

    curl -s 'http://localhost:5173/src/x.svg?import&raw'

    It prints export default "<svg xmlns=\"http://www.w3.org/2000/svg\"/>\n".

  2. Stop the dev server and run npx vp pack. It fails with
    UNLOADABLE_DEPENDENCY (log below).

  3. Remove the ?raw import and pack again:

    printf 'import css from "./y.css?inline";\n\nexport { css };\n' > src/index.ts
    npx vp pack

    It builds, and dist/index.mjs holds the CSS as a string.

System Info

$ vp env current
Node.js:
  Version    24.11.0
  Source     system PATH
  Bin Path   /home/myuser/.local/share/zed/node/node-v24.11.0-linux-x64/bin/node
  Installed  true
  Mode       system_first

Package Manager:
  Name       npm
  Version    11.6.1
  Source     system PATH
  Bin Paths
    npm      /home/myuser/.local/share/zed/node/node-v24.11.0-linux-x64/bin/npm
    npx      /home/myuser/.local/share/zed/node/node-v24.11.0-linux-x64/bin/npx
  Installed  true
  Mode       system_first

$ vp --version
vp v1.0.0-rc.0

Local vite-plus:
  vite-plus  v1.0.0-rc.0

Tools:
  vite             v8.3.0
  rolldown         v1.2.9
  vitest           v5.0.1
  oxfmt            v0.70.0
  oxlint           v1.85.0
  oxlint-tsgolint  v7.0.2002
  tsdown           v0.23.0

Environment:
  Package manager  npm default
  Node.js          v24.21.0

Used Package Manager

npm

Logs

$ npx vp pack
ℹ entry: src/index.ts
ℹ Build start
error: Build failed with 1 error:

[UNLOADABLE_DEPENDENCY] Could not load src/x.svg?raw
   ╭─[ src/index.ts:1:17 ]
   │
 1 │ import svg from "./x.svg?raw";
   │                 ──────┬──────
   │                       ╰──────── No such file or directory (os error 2)
───╯

    at aggregateBindingErrorsIntoJsError (file:///tmp/vp-issue-repro/verify/vp-raw-repro/node_modules/vite-plus/node_modules/vite/dist/rolldown/shared/error-CGhV1ebk.mjs:48:18)
    at unwrapBindingResult (file:///tmp/vp-issue-repro/verify/vp-raw-repro/node_modules/vite-plus/node_modules/vite/dist/rolldown/shared/error-CGhV1ebk.mjs:18:128)
    at #build (file:///tmp/vp-issue-repro/verify/vp-raw-repro/node_modules/vite-plus/node_modules/vite/dist/rolldown/shared/rolldown-DZGaRc5R.mjs:133:34)
    at async build (file:///tmp/vp-issue-repro/verify/vp-raw-repro/node_modules/vite-plus/node_modules/vite/dist/rolldown/index.mjs:48:22)
    at async Promise.all (index 0)
    at async buildSingle (file:///tmp/vp-issue-repro/verify/vp-raw-repro/node_modules/vite-plus/node_modules/vite/dist/tsdown/build-JVmLFaZt-BN9yuB6k.js:6380:19)
    at async Promise.all (index 0)
    at async buildWithConfigs (file:///tmp/vp-issue-repro/verify/vp-raw-repro/node_modules/vite-plus/node_modules/vite/dist/tsdown/build-JVmLFaZt-BN9yuB6k.js:6327:18)
    at async CAC.<anonymous> (file:///tmp/vp-issue-repro/verify/vp-raw-repro/node_modules/vite-plus/dist/pack-bin.js:87:2)
    at async runCLI (file:///tmp/vp-issue-repro/verify/vp-raw-repro/node_modules/vite-plus/dist/pack-bin.js:93:3)

Validations

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    Fields

    Priority

    None yet

    Effort

    None yet

    Target date

    None yet

    Start date

    None yet

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions