Skip to content

fix: escape virtual module import paths with apostrophes #2143

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Arktomson wants to merge 2 commits into
base: main
Choose a base branch
from
Open

fix: escape virtual module import paths with apostrophes #2143

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
869bb1f
fix: escape virtual module import paths with apostrophes
Arktomson Feb 21, 2026
7e92908
Merge branch 'main' into fix-1697-virtual-module-quote
aklinker1 Feb 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 45 additions & 0 deletions packages/wxt/src/core/builders/vite/plugins/__tests__/resolveVirtualModules.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import fs from 'fs-extra';
import { tmpdir } from 'node:os';
import { join } from 'node:path';
import { afterEach, describe, expect, it } from 'vitest';
import { resolveVirtualModules } from '../resolveVirtualModules';
import { fakeResolvedConfig } from '../../../../utils/testing/fake-objects';

const tempDirs: string[] = [];

afterEach(async () => {
await Promise.all(tempDirs.splice(0).map((dir) => fs.remove(dir)));
});

describe('resolveVirtualModules', () => {
it.each([
`import definition from 'virtual:user-background-entrypoint';`,
`import definition from "virtual:user-background-entrypoint";`,
])(
'should escape input paths when template contains %s',
Copy link
Member

@aklinker1 aklinker1 Feb 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
'should escape input paths when template contains %s',
'should escape input paths with apostrophes when encountering: %s',

Mention that we're testing apostrophes specifically in this test.

async (template) => {
const wxtModuleDir = await fs.mkdtemp(join(tmpdir(), 'wxt-test-'));
tempDirs.push(wxtModuleDir);

await fs.outputFile(
join(wxtModuleDir, 'dist/virtual/background-entrypoint.mjs'),
template,
);

const plugin = resolveVirtualModules(
fakeResolvedConfig({ wxtModuleDir }),
).find(
(plugin) => plugin.name === 'wxt:resolve-virtual-background-entrypoint',
);

expect(plugin).toBeDefined();

const inputPath = `/tmp/foo'bar/background.ts`;
const code = await plugin!.load!(
'\0virtual:wxt-background-entrypoint?' + inputPath,
);

expect(code).toBe(`import definition from ${JSON.stringify(inputPath)};`);
Copy link
Member

@aklinker1 aklinker1 Feb 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should hardcode the expected path here so it's clear what's being escaped and so the test doesn't rely on the same API as the runtime code.

Is this correct? Or should there be one more \?

Suggested change
expect(code).toBe(`import definition from ${JSON.stringify(inputPath)};`);
expect(code).toBe(`import definition from "/tmp/foo\'bar/background.ts";`);

When I run it in the browser, I just get "/tmp/foo'bar/background.ts" without any escape characters...

> console.log(JSON.stringify(`/tmp/foo'bar/background.ts`))
"/tmp/foo'bar/background.ts"

Copy link
Member

@aklinker1 aklinker1 Feb 21, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh wait 🤦 I see, the problem is just that the string was defined with single quotes, so having another one in it is invalid:

'/tmp/foo'bar/background.ts'

Can you also add an expected test for when a project path has a double quote " in it?

Copy link
Contributor Author

@Arktomson Arktomson Feb 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok

},
);
});
12 changes: 11 additions & 1 deletion packages/wxt/src/core/builders/vite/plugins/resolveVirtualModules.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { resolve } from 'path';
export function resolveVirtualModules(config: ResolvedConfig): Plugin[] {
return virtualModuleNames.map((name) => {
const virtualId: `${VirtualModuleId}?` = `virtual:wxt-${name}?`;
const userVirtualId = `virtual:user-${name}`;
const resolvedVirtualId = '\0' + virtualId;
return {
name: `wxt:resolve-virtual-${name}`,
Expand All @@ -34,7 +35,16 @@ export function resolveVirtualModules(config: ResolvedConfig): Plugin[] {
resolve(config.wxtModuleDir, `dist/virtual/${name}.mjs`),
'utf-8',
);
return template.replace(`virtual:user-${name}`, inputPath);
const escapedPath = JSON.stringify(inputPath);
const code = template
.replace(`'${userVirtualId}'`, escapedPath)
.replace(`"${userVirtualId}"`, escapedPath);
if (code === template) {
throw Error(
`Failed to resolve virtual module "${name}": expected template import "${userVirtualId}"`,
);
}
return code;
},
};
});
Expand Down
Loading