Importing content script URL with `?script` fails after update

Build tool

Vite

Where do you see the problem?

[ ] In the browser
[X] In the terminal

Describe the bug

I'm using the vite plugin with Vite 4.4.9. I want to inject a content script when the user clicks on the action button:

import contentScript from './contentScript.tsx?script';

chrome.action.onClicked.addListener(async () => {
  const [tab] = await chrome.tabs.query({ active: true, lastFocusedWindow: true });

  await chrome.scripting.executeScript({
    target: { tabId: tab.id, allFrames: false },
    files: [contentScript],
  });
}

I haven't added the content script to the manifest.json because it shouldn't be injected by default, only when the user clicks on the action button.

The above works, but whenever I change the file while vite is running with --watch, I get an error (see below) and the build fails.

Reproduction

Unfortunately the repo is private, but it can be reproduced with the above service worker script and an empty content script.

manifest.json:

```json { "manifest_version": 3, "version": "1.0.0", "name": "Draw on page", "description": "Add drawings on the page", "icons": { "16": "assets/icon.png", "48": "assets/icon.png", "128": "assets/icon.png" }, "background": { "service_worker": "src/background.ts" }, "action": { "default_title": "Draw" }, "permissions": ["scripting"], "host_permissions": [""] } ```

vite.config.ts:

```ts import { defineConfig } from 'vite'; import { crx } from '@crxjs/vite-plugin'; import manifest from './manifest.json'; export default defineConfig(config => ({ plugins: [crx({ manifest })], })); ```

Logs

[crx:web-accessible-resources] Error: Content script filename is undefined for "/src/contentScript.tsx"
    at Object.renderCrxManifest (file://.../node_modules/@crxjs/vite-plugin/dist/index.mjs:1851:25)
    at Object.generateBundle (file://.../node_modules/@crxjs/vite-plugin/dist/index.mjs:1629:60)
    at async Bundle.generate (file://.../node_modules/rollup/dist/es/shared/node-entry.js:17806:9)
    at async file://.../node_modules/rollup/dist/es/shared/node-entry.js:26652:27
    at async catchUnfinishedHookActions (file://.../node_modules/rollup/dist/es/shared/node-entry.js:25785:16)
    at async Promise.all (index 0)
    at async Task.run (file://.../node_modules/rollup/dist/es/shared/watch.js:4798:32)       
    at async Watcher.run (file://.../node_modules/rollup/dist/es/shared/watch.js:4725:13)    
[crx:manifest-post] Error in crx:web-accessible-resources.renderCrxManifest

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz
    Memory: 1.29 GB / 15.78 GB
  Binaries:
    Node: 18.17.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.18 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 9.6.7 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (117.0.2045.36)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @crxjs/vite-plugin: ^2.0.0-beta.18 => 2.0.0-beta.18
    vite: ^4.4.9 => 4.4.9

Severity

annoyance

crxjs / chrome-extension-tools