window.google object is gone after unmount and mount the Lazy-loading Wrapper Component.

[jetstreamc]

I don't really sure why.
When the component is unmounted, the window.google is still. But, when the wrapper component is mounted again, the window.google becomes null for unknown reason.
I look through the implementation of wrapper and found that the ScriptCache.js loads the Google map script only once and no hope to reload it even if the window.google object is gone away from browser.
The solution I've temporally did is to recreate my own wrapper with this add-on function.

componentWillUnmount() {
  window._scriptMap.delete("google");
}

However, I don't think it is a good idea to do so.
Could you figure out why the window.google object is gone when remounting and fix it?

[Szarko]

I believe I might be facing a similar issue, I have a component on Page A that runs my map component using this module. When navigating to a link to Page B and coming back to Page A the map does not load as the google prop is set to null.

I notice the .loaded is still true though.

Is this what you are describing?

In the documentation when the author describes manually loading the window.google instance, I am not sure what he is referring to. I wonder if using this manual loading would be an alternative solution.

[auser]

Author here: Oh, interesting. I haven't seen this behavior myself. I hate to be "that guy," but is there anyway you can create a sample repo to demonstrate this bug, @Szarko or @jetstreamc?

UPDATE:
I just pushed a change to ScriptCache.js that might also fix this issue. Please let me know if the master branch fixes it.

[codewithcats]

Just try it today. I encounter the same behavior with @Szarko

[auser]

@tnwt7 interesting. With the latest master branch or with the npm module?

[codewithcats]

@auser npm module. I didn't realize they are not the same. Will try master then.

[codewithcats]

@auser I have tried on the master, still get the same result.
In my case, I have page A which contains Map. I go to A and it can display the map. Then, click on another page, go back to A. The second attempt to mount the Map component will not get google prop. In componentDidUpdate, props.google is always null so this.loadMap never get called.

[codewithcats]

It seems like window.google is reset every time. My current workaround is make a change in GoogleApi:
from

let google = window.google == null;

to

let google = window.google || null;

[auser]

@tnwt7 want to include that fix in the GoogleApi script in a PR?

[codewithcats]

Sure, will do very soon.

[auser]

Fixed by #13

[sinelanguage]

let google = window.google || null;

I believe this fix should make it into the gists and tutorials too maybe? Sorry I haven't double checked them all.