error on openOptionsPage

[Mia Zhao]

Describe the bug

When clicking the "Open Options" button of pop up, error Uncaught TypeError: Cannot read properties of undefined (reading 'openOptionsPage') is thrown on browser.runtime.openOptionsPage().

Reproduction

1. pnpm dev 2. open extension pop up 3. click "Open Options" 4. option page won't open, observed error Uncaught TypeError: Cannot read properties of undefined (reading 'openOptionsPage')

System Info

System:
    OS: Linux 6.5 Manjaro Linux
    CPU: (4) x64 Intel(R) Core(TM) i5-6200U CPU @ 2.30GHz
    Memory: 504.36 MB / 7.66 GB
    Container: Yes
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.6.2 - /usr/bin/node
    Yarn: 1.22.21 - /usr/bin/yarn
    npm: 10.5.0 - /usr/bin/npm
    pnpm: 8.15.2 - /usr/bin/pnpm
    bun: 1.0.35 - ~/.bun/bin/bun
  Browsers:
    Chromium: 123.0.6312.86

Used Package Manager

pnpm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

[Mia Zhao]

I don't quite understand the error behind. But I played around a bit, manually importing import browser from 'webextension-polyfill' in Popup.vue or updating the auto import config 'webextension-polyfill': [ ['*', 'browser'], ], to 'webextension-polyfill': [ ['default', 'browser'], ], seems to fix the undefined error

[Tmk]

updating the auto import config 'webextension-polyfill': [ ['*', 'browser'], ], to 'webextension-polyfill': [ ['default', 'browser'], ], works in dev, but breaks in production.

it seems like a bug in the unplugin-auto-import (not sure), PRs welcome :)

[Mia Zhao]

hi @tmkx thanks for following up. It does look like a limitation of unplugin-auto-import.

Based on the generated code from unplugin-auto-import, when 'webextension-polyfill': [ ['*', 'browser'] ] is configured, the Browser type is generated correctly (however, the browser object imported is not - the actual browser alias needed is in fact browser.default, and thus the reason browser.runtime is undefined). Likewise, if 'webextension-polyfill': [ ['default', 'browser'] ] is used, the imported object is correct (while Browser type is not).

[Opacity]

updating the auto import config 'webextension-polyfill': [ ['*', 'browser'], ], to 'webextension-polyfill': [ ['default', 'browser'], ], works in dev, but breaks in production.

it seems like a bug in the unplugin-auto-import (not sure), PRs welcome :)

That works for me