Dynamic Scripts break with vite build --watch

[salmin89]

Build tool

rollup

Where do you see the problem?

• In the browser
• In the terminal

Describe the bug

When developing for Firefox and Safari I use vite build --watch
The initial build works, but once you make a change and save, it breaks in terminal.

[crx:content-scripts] Plugin error - Unable to get file name for unknown file "CjI6$MfX".

Reproduction

• everything vanilla
• package.json

"scripts": {
    "dev": "vite build --watch",
},

• content.ts (content script or background doesn't matter).

import foo from './foo?script'

run once, then edit a file and save.

Logs

System Info

System:
    OS: macOS 14.7.4
    CPU: (12) arm64 Apple M2 Pro
    Memory: 178.16 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.20.0 - ~/.nvm/versions/node/v18.20.0/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v18.20.0/bin/yarn
    npm: 10.9.0 - ~/.nvm/versions/node/v18.20.0/bin/npm
    pnpm: 10.4.1 - ~/.nvm/versions/node/v18.20.0/bin/pnpm
    bun: 1.1.21 - /opt/homebrew/bin/bun
  Browsers:
    Brave Browser: 133.1.75.181
    Chrome: 133.0.6943.142
    Chrome Canary: 135.0.7043.0
    Edge: 133.0.3065.92
    Safari: 18.3
  npmPackages:
    @crxjs/vite-plugin: ^2.0.0-beta.31 => 2.0.0-beta.31 
    vite: ^6.1.0 => 6.2.0

Severity

annoyance

[github-actions]

⚠️ Important Notice: CRXJS is seeking new maintainers.

• New issues and PRs may not receive immediate attention
• A new maintenance team must establish itself by March 31, 2025 or this repository will be archived on June 1, 2025
• Learn more about the transition

---

This is an automated message. Please do not reply to this comment.

[github-actions]

Thanks for contributing to CRXJS! This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs within 7 days.

[salmin89]

can I keep this issue open? I can try and fix it myself but want to keep it open for visibility

[Toumash]

@salmin89 yes, it is open. I've added not-stale label so it is not going to be closed automatically

[Toumash]

@salmin89 could you please post a more broad example for the dynamic
scripts here?

Why do you need a url to the script in the content.js?

import foo from './foo?script'

await import("./foo") does not work?

[salmin89]

I use ?script to get the url to a JS file, in order to use registerContentScripts to run my JS in the main world.
This is something Jack implemented and shared in this blog post: https://dev.to/jacksteamdev/advanced-config-for-rpce-3966

This works fine in dev mode, but when I work with Firefox, I need to use build --watch to re-build the files, causing the error to occur.

[Toumash]

@salmin89 oh ok, it was mentioned recently on the discord channel

i've found this test case but it was no tested by the OP yet
https://github.com/crxjs/chrome-extension-tools/blob/db24433272bd74b5c7b734d31f85d4c87f0f13e6/packages/vite-plugin/tests/e2e/mv3-dynamic-script/src/content2.ts

There was also this issue here with some workarounds #695

[salmin89]

I believe that is a slightly different issue than mine. To replicate this all you need to do is change the dev-script to:

"scripts": {
    "dev": "vite build --watch",
},

then try to get the script-url (either from background or content)

import foo from './foo?script'
console.log(foo)

this works initially, but then when you make a change the build will error out

[salmin89]

I made a PR with a test for this use case. Let me know if I can help with anything else.

[Toumash]

Ok, now im interested. Why dont you use vite dev? It doesnt work with this scenario?

I didnt know how to run any extension in firefox because the setup is confusing (button name) so i took it from here

1. create a new react ts extension

npm create crxjs@latest

1. Run it npm run dev
2. install and run firefox
3. open about:extensions
4. click debug addon
5. click load temporary
6. select a file from dist/
7. go to example.com
8. see the content script working
9. update the content script file
10. refresh the page
11. see the change

[salmin89]

Ok, now im interested. Why dont you use vite dev? It doesnt work with this scenario?

I only use build --watch for Firefox and Safari.

The issue with dev for Firefox is CSP.

Content-Security-Policy: The page’s settings blocked a script (script-src-elem) at http://localhost:5174/@vite/env from being executed because it violates the following directive: “script-src 'self' 'wasm-unsafe-eval'”

If there is a way to configure Firefox to bypass this - I'd be interested :)