Uncaught TypeError: Cannot read property 'id' of null

My main app has an iframe within a component that looks as follows: <iframe id="frameId1" src="http://localhost:51219/" style="width: 100%;" scrolling="no"/> with plugins: [ broadcast('frameId1') ] within the store.

The localhost URL is obviously what the iframe is displaying. It displays it fine (it is also a Vue application) and I need to sync my Vuex state with it. (Is it possible to share state with a Vue application specified in the iframe as a URL like this??? I am trying to move towards microfrontends and thus want components to be deployable separately so they will live on a different server/domain.)

It has plugins: [ transfer() ]

Within its store in order to sync the Vuex state from the main app in to the child app.

However, I just get this same error on the frame app displayed in console:

vuex-iframe-sync.es.js?4ec3:1 Uncaught TypeError: Cannot read property ‘id’ of null at eval (vuex-iframe-sync.es.js?4ec3:1) at eval (vuex.esm.js?edaa:343) at Array.forEach (<anonymous>) at new Store (vuex.esm.js?edaa:343) at eval (store.js?ac69:12) at Object.<anonymous> (commons.js?v=636849159444181352:170) at webpack_require (commons.js?v=636849159444181352:55) at eval (layout.js?5b7c:1) at Object.9 (layout.js?v=636849159444111345:29) at webpack_require (commons.js?v=636849159444181352:55)

I cannot for the life of me figure out what is causing this error? Would really appreciate it if we could figure out the problem.

[rulrok]

@ogulcantumdogan Any more details of frameworks and libraries you are using? In my case, I am building an app with quasar framework for a spa+ssr (server side rendering). I just don’t run this code during the ssr phase, i.e, I don’t run this code on node.js which would throw an error because window object does not exist on node.js.

But running it on a browser I don’t remember having this problem.

Are you building your app with ssr?

Otherwise, I guess you could try something like

if(window !== void 0){
   // use the plugin here
}

[Rustery]

Based on plugin’s source code: https://github.com/L-Chris/vuex-iframe-sync/blob/6fddf4b353b96a1a4b75f9b60ec3c86655d492e3/src/index.js#L22-L28 you are able to pass an id of the child frame into the transfer() function. After that, the error is gone, but there appears another one with the browser’s CORS things.