ERROR using SessionStorage, Cookies... in App Extension

Describe the bug SOMETIMES when using the SessionStorage, Cookies or other probably other (Quasar plugins) in an app extension I get this error:

TypeError: quasar_src_plugins_Cookies_js__WEBPACK_IMPORTED_MODULE_8__.default.remove is not a function
    at logout (actions.js?16db:137)

[edit] Quasar doesn’t complain during compilation. But if you run the app that is thrown as it tries to use non-existant props, eg Cookies.remove(...).

This error is sort of complier-intermittent; it sometimes disappears and comes back between compiles. The annoying thing is that it has appeared/disappeared out of different reasons and can’t really reproduce and pin-point the cause. EG: installation of “webpack-graphql-loader”, it then started. At one point I had installed “vuex-aspect” and it started, then I deleted all node_modules in the hosting app and the extension, yarn install and it worked, but for “webpack-graphql-loader” I did the same and the bug still persisted. There are many instances this happened I can’t reproduce or resolve the same way, even by undoing my actions. Some instances have nothing to do with installations. Just changing webpack configs to use a different loader, for instance: “graphql-tag/loader”.

However, this appears to be some race condition in the order webpack is packing the functions or something of that sort because in the hosting app these plugins work without this issue.

To Reproduce Steps to reproduce the behavior:

1. Create an app extension
2. Create a store in the app extension
3. Import Cookies or SessionsStorage using import { Cookies } from 'quasar' actions.js of the store
4. Try using the Cookies plugin Cookies.remove('token')
5. That MAY (remember, this is intermittent) result in the above error.

Expected behavior Just the normal plugin behaviour without any issues

Platform (please complete the following information): Quasar v1.0.5

Additional context if I log the imported Cookies plugin I only get:

{parseSSR: ƒ, install: ƒ}
install: ƒ install(_ref)
parseSSR: ƒ parseSSR( /* ssrContext */ ssr)
__proto__: Object

Those functions are truly not there yet. So got did a workaround whereby I installed it manually:

Cookies.install({ $q: {}})

and it works, note that I had to do this for SessionStorage as well, and it seems like all quasar plugins that follow this installation convention need this boot-up to work.

I think this needs to be documented or at least make it such that it is usable in extensions without doing this.

[rstoenescu]

Hi,

For App Extensions, please push Cookies, SessionStorage etc etc (Quasar Plugins) to quasar.conf.js > framework > plugins through AE’s extendQuasarConf. These need to be installed by Quasar itself, not manually.

[emahuni]

Notice I wrote this also:

However, this appears to be some race condition in the order webpack is packing the functions or something of that sort because in the hosting app these plugins work without this issue.

Notice I don’t have those plugins activated in the host app’s quasar config. When I use them in the hosting app without adding them in quasar.conf.js they work in the host app without any problem meaning the injection in the AE is working as intended. Therefore, somehow SOMETIMES the plugin is being used before being installed by Quasar, there is some race condition occurring.

This only happens after a compile, if it begins after a compile then it wont stop until another compile is done that somehow stops it (it doesn’t mean if I undo my previous actions or compile again it then stops, it may and most likely continues). This has something to do with webpack obviously.

I think you can have a good chance of reproducing this if you create a store in an app extension then use SessionStorage to get a saved state that you restore onto the store’s state. like this:

// quasar-app-extension-theAppExt/store/theStore/state.js
import {  SessionStorage } from 'quasar';
// I am currently doing this here to make sure it works (never had a single issue ever since I did that): 
// SessionStorage.install({ $q: {} });
export default {
  // quickly get a save state prop of a session at boot time
  aStateProp: JSON.parse(SessionStorage.getItem('savedStateProp')),
};

I know there is a better way to do this, but bare with me here, that should work and works most of the time.

If it doesn’t happen immediately, then modify the extension by adding other things in there, and compile each time you will eventually hit the bug sure enough.