Uncaught TypeError: Cannot read property 'id' of null

[karam94]

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 ()
at new Store (vuex.esm.js?edaa:343)
at eval (store.js?ac69:12)
at Object. (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.

[ehrig]

I have got the same issue. Can anyone report any progress on this?

[karam94]

I have got the same issue. Can anyone report any progress on this?

I'm starting to think that the plugin doesn't intend on being able to actually share state between Vue apps, running on different servers/that have different URLs - despite state being stored client side - as the examples he's given use iframes that are hosted on the same server.

Would be great if @L-Chris could chime in.

[rulrok]

Hi @karam94, I was having a very similar issue and in my case it turned out I was installing the plugin during the ssr phase of my app and the code uses window. internally.
So I have to change the logic of when the plugin would be injected.

I hope it helps anybody.

[ogulcantumdogan]

Hi @rulrok , I am using a standard SPA build with Vue, yet still getting this error. Can you let me know how you changed the logic to make this library detect the window object?

Thanks

[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
}

[ogulcantumdogan]

@rulrok I am using the standard setup with webpack build, Vue.js v2.6.12, Vuex and Vue router. I don't think the issue would be about window not existing when the plugin is initialized in Vuex. Can you maybe share how you initialized the plugin inside your child and parent projects?

Here's my store.js in the parent project:

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
import { getField, updateField } from 'vuex-map-fields'
import { auth, db, firestore, functions, GoogleProvider } from './firebaseConfig'

import {broadcast} from "vuex-iframe-sync";

Vue.use(Vuex)



export default new Vuex.Store({
    plugins:[broadcast("flowFrame")],
state: {
... }
... })

here's my store.js in the child project:

import Vue from 'vue'
import Vuex from 'vuex'
import {transfer} from 'vuex-iframe-sync'
Vue.use(Vuex)

export default new Vuex.Store({
  plugins: [
    transfer()
  ],
  getters:{
  },
  state: {
}
.....})

Do you think there could be a problem about dependencies of this project, since apparently it is not maintained anymore by @L-Chris ?

[Rustery]

Based on plugin's source code:

vuex-iframe-sync/src/index.js

Lines 22 to 28 in 6fddf4b

	return new Observer({
	id: options.id || window.frameElement.id,
	store,
	convert,
	created,
	destroyed
	})

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.

[Leozhangshouhai]

可以尝试 看下，是否window.$vm 未挂载vue 实例