How to use with .svelte files, get error with webextension-polyfill

[steddyman]

Using browser / .chrome in .svelte files not working

I am trying to user the chrome.storage api within my .svelte files. I have tried using vite-plugin-web-extension along with the polyfill support described here: https://vite-plugin-web-extension.aklinker1.io/guide/supporting-multiple-browsers.html

In my +page.svelte, I am trying to import this library

    import browser from "webextension-polyfill";

    onMount(() => {
        browser.storage.onChanged.addListener((changes, area) => {
                // console.log('Storage changed:', changes, area);
                if (area === 'sync' && changes.playerName?.newValue) {
                    console.log('Svelte: Player name changed:', changes.playerName.newValue);
                }
            });

But when I do, even though all the configuration has been setup correctly, the above code fails with the following error:

node:internal/event_target:1088
  process.nextTick(() => { throw err; });
                           ^
Error: This script should only be loaded in a browser extension.
    at /Users/stepheneddy/Dropbox/Dev/Crypto/Pixels-Extension/src/node_modules/webextension-polyfill/dist/browser-polyfill.js:23:11
    at /Users/stepheneddy/Dropbox/Dev/Crypto/Pixels-Extension/src/node_modules/webextension-polyfill/dist/browser-polyfill.js:5:5

This is an existing svelte project, I had written my own webpack configuration for to package and build the extension, and I am now switching to using vite-plugin-web-extension because of the need to access chrome.storage.

[kepi]

It might not be what you need and be aware that I'm complete Svelte noob, but I'm using synced storage through Svelte writable store.

You can check my synced writable implementation, initialization and using it in Svelte component (for selectedColor).