Uncaught ReferenceError: browser is not defined

[henry-bao]

I am using webextension-polyfill, and am getting the Uncaught ReferenceError: browser is not defined error when my load the unpacked web extension on to Chrome. This is what I see when I clicked on Errors in the chrome extension list page:

  if (typeof storeCreatorContainer2 !== "function")
    throw new Error(`Missing argument for 'storeCreatorContainer'`);
  const storage = browserNs || namespace === Namespace.browser ? new WrappedBrowserStorage({
    namespace: browserNs || browser, // this line is highlighted
   //                         ^ so probably the browser here is not defined?
    area: storageArea,
    key: storageKey
  }) : new WrappedChromeStorage({
    namespace: chromeNs || chrome,
    area: storageArea,
    key: storageKey
  });

and this is how I setup reduxed:

import { configureStore } from '@reduxjs/toolkit'
import { setupReduxed, ReduxedSetupOptions } from 'reduxed-chrome-storage'

const storeCreatorContainer = () => {
 const store = configureStore({
   reducer: {
         // reducers
   },
   middleware: // some middleware 
 })
 return store
}

const options: ReduxedSetupOptions = {
 namespace: 'browser',
 storageKey: 'redux-storage-key'
}

const instantiate = setupReduxed(storeCreatorContainer, options)

export default async () => {
 const store = await instantiate()
 const state = store.getState()
 return { store, state }
}

[hindmost]

I guess you use a module bundler like Webpack. If so, the above setup is wrong. With module bundlers the browser object defined by webextension-polyfill is not exposed globally. That's why you get "browser is not defined". You have to explicitly import browser from webextension-polyfill and pass it to dedicated option - browserNs (not namespace). Also, if you use Typescript, you have to cast browser to BrowserNamespace type exposed by this library.

So the final setup:

...
import { setupReduxed, ReduxedSetupOptions, BrowserNamespace } from 'reduxed-chrome-storage';
import browser from 'webextension-polyfill'; 
...

const options: ReduxedSetupOptions = {
 browserNs: browser as BrowserNamespace,
 ...
}

const instantiate = setupReduxed(storeCreatorContainer, options)

[hindmost]

I leave this issue opened to prevent duplicate ones

[henry-bao]

Stared!