Dynamic module import in content script tries to load from website instead of extension (web components polyfill)

[devidw]

Build tool

Vite

Where do you see the problem?

• [X] In the browser
• [ ] In the terminal

Describe the bug

I have got a content script with something like:

content script content.ts

await import('@webcomponents/webcomponentsjs')

On build, this generates into:

 await c(
    () => import('./webcomponents-bundle.b61d43ec.js').then((s) => s.w),
    [
      'assets/webcomponents-bundle.b61d43ec.js',
      'assets/_commonjsHelpers.4e997714.js',
    ]
  ),

Here, the last two paths are problematic, since they are tried to be loaded from the website the content scripts run on.

<link rel="modulepreload" as="script" crossorigin="" href="/assets/webcomponents-bundle.b61d43ec.js">
<link rel="modulepreload" as="script" crossorigin="" href="/assets/_commonjsHelpers.4e997714.js">

Which results in them not being found:

---

However, removing the extra paths and putting an empty array into the generated files does work, the extension seems to work without these available.

Reproduction

https://github.com/devidw/crxjs-issue

Seems to be in combination with other package imports that let the tooling generate these helper files like _commonjsHelpers.

In this example, importing extpay, without this, there are no such helper files generated and no loading problems.

However, trying to get things working with such imports.

Thanks a lot 🙏

Logs

GET https://stackoverflow.com/assets/_commonjsHelpers.4e997714.js net::ERR_ABORTED 404
GET https://stackoverflow.com/assets/webcomponents-bundle.b61d43ec.js net::ERR_ABORTED 404

System Info

System:
    OS: macOS 13.0.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 1.50 GB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 19.1.0 - /opt/homebrew/bin/node
    Yarn: 1.22.17 - /opt/homebrew/bin/yarn
    npm: 8.19.3 - /opt/homebrew/bin/npm
  Browsers:
    Brave Browser: 107.1.45.133
    Chrome: 107.0.5304.110
    Safari: 16.1

Severity

annoyance

[Whoaa512]

This is something with Vite itself not the plugin. I worked around by adding build.modulePreload = false in my vite.config.ts

[Toumash]

@Whoaa512 thank you so much for this contribution works in my project with "vite": "^5.2.11",! Maybe we could add it to the docs and close the thread. Where should we put it? Here https://crxjs.dev/vite-plugin/concepts/content-scripts?

[alexdymov]

It wasn't enough for my setup with Vite 4.4.5 to just modulePreload = false. Vite was still adding a preloader function with preloading a single CSS file. The only way to remove it was to remove the whole vite:build-import-analysis plugin:

function viteDisablePlugins(list: string[]): Plugin {
  return {
    name: 'vite-disable-plugins',
    configResolved(config) {
      const pls: Plugin[] = config.plugins as any;
      list.forEach(torem => {
        const idx = pls.findIndex(pl => pl.name === torem);
        idx >= 0 && pls.splice(idx, 1);
      })
    },
  }
}

export default defineConfig(({ command }) => ({
  plugins: [
    viteDisablePlugins(['vite:build-import-analysis']),
  ]
}))

[Toumash]

Ok, im using the newest "vite": "^5.2.11",