importing `?script` from package doesn't work in dev, but works in build

[salmin89]

Build tool

Vite

Where do you see the problem?

• In the browser
• In the terminal

Describe the bug

when running in dev mode this code produces:

Error: Could not load javascript '' for script.

import scriptPath from '@scope/content/injected/myFeature?script';

console.log('path', scriptPath);
chrome.scripting
  .registerContentScripts([
    {
      id: 'myscript',
      js: [scriptPath],
      matches: ['<all_urls>'],
      runAt: 'document_start',
    },
  ])
  .then(() => {
    console.log('success reg');
  })
  .catch(console.error);

Reproduction

n/a

Logs

No response

System Info

System:
    OS: macOS 14.7
    CPU: (12) arm64 Apple M2 Pro
    Memory: 749.72 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.5.0 - ~/.nvm/versions/node/v18.20.0/bin/npm
    bun: 1.1.21 - /opt/homebrew/bin/bun
  Browsers:
    Brave Browser: 129.1.70.119
    Chrome: 129.0.6668.71
    Chrome Canary: 131.0.6750.0
    Edge: 129.0.2792.65
    Safari: 18.0

Severity

annoyance

[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]

this is still an issue for us. The workaround is to create a local file that you can import from background.ts, and let that local file import @scope/content/injected/myFeature

Importing from a package with ?script doesn't work in our monorepo setup.

[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.

[Toumash]

this is still an issue for us. The workaround is to create a local file that you can import from background.ts, and let that local file import @scope/content/injected/myFeature

Importing from a package with ?script doesn't work in our monorepo setup.

what do you mean by local file? If you mean just a ts file it still does not work
It stopped working in CI after i've updated chrome to the latest version #1016

output:

path src/content.ts-loader.js

from:

import contentScript from './content?script'

// chrome.runtime.onInstalled.addListener(({ reason }) => {
//   if (reason === 'install') {
console.log('path',contentScript);
    chrome.scripting
      .registerContentScripts([
        { id: 'contentScript', js: ['src/content.ts'], matches: ['<all_urls>'] },
      ])
      .catch(console.error)
//   }
// })

[Toumash]

The code works just fine

import contentScript from './content?script'

chrome.runtime.onInstalled.addListener(({ reason }) => {
  if (reason === 'install') {
console.log('Registering content script:', contentScript)

 chrome.scripting
      .registerContentScripts([
        { id: 'contentScript', js: [contentScript], matches: ['<all_urls>'] },
      ])
      .catch(console.error)      
  }
})

but only if i remove the imports from the content.ts

// content.tsx
// import './style.css'
// import { header } from './header'

const app = document.createElement('div')
app.id = 'app'
app.innerHTML = `
  <h1>${'asdsad'}</h1>
  <a href="https://vitejs.dev/guide/features.html" target="_blank">Documentation</a>
`
document.body.append(app)

chrome.runtime.sendMessage({ type: 'content-script-load' })

[salmin89]

I meant that if you want to import and register a dynamic content script, but from a package, I would need to create an entry-file.

E.g. I can create a file called content.ts and in that one I can add a single line:
import '@foo/bar/

[Toumash]

ok ok thank you for clarification.

That eror i was testing turns out was only related to chrome version that is relevant just in e2e tests, sorry