0

Trying to access the localStorage when the page completely loads. Since it was showing null, I used settimeout to fetch the data after 500sec, later I tried to load the page and got the below error.

Error while loading

Cannot set properties of null (setting 'innerHTML')
TypeError: Cannot set properties of null (setting 'innerHTML')
    at http://localhost:9000/root-config.js:241:26

if I refresh the page it works fine

LoginMfe.js

navigate("/home");
const customEvent = new CustomEvent('sharedAvatarText');
window.dispatchEvent(customEvent);

Root-config.js

import { registerApplication, start, navigateToUrl } from "single-spa";
import * as singleSpa from 'single-spa';
import {
  constructApplications,
  constructRoutes,
  constructLayoutEngine,
} from "single-spa-layout";
import microfrontendLayout from "./microfrontend-layout.html";

const routes = constructRoutes(microfrontendLayout);
const applications = constructApplications({
  routes,
  loadApp({ name }) {
    return System.import(name);
  },
});
const layoutEngine = constructLayoutEngine({ routes, applications });
applications.forEach(registerApplication);

window.addEventListener('sharedAvatarText',getAvatarText );
function getAvatarText() {
  const givenName = (
    JSON.parse(JSON.parse(localStorage.getItem("user")).result).given_name[0] +
    JSON.parse(JSON.parse(localStorage.getItem("user")).result).family_name[0]).toUpperCase();
    setTimeout( () => {
      const avatarText = document.getElementById("avatar_text");
      console.log("text",avatarText)//null for the first load;
      avatarText.innerHTML = givenName;
    },200)
  }
  layoutEngine.activate();
  start();

  const button = document.getElementById("logout_Button") ;
  if (button) {
    button.addEventListener("click", function() {
    localStorage.clear();
    navigateToUrl("/login");
  });
}


window.onload = function() {
  const storedUser = JSON.parse(localStorage.getItem("user"));

  if (storedUser && storedUser.result) {
    const givenName = (
      ( JSON.parse(storedUser.result).given_name &&  JSON.parse(storedUser.result).given_name[0] ||   '') +
      ( JSON.parse(storedUser.result).family_name &&  JSON.parse(storedUser.result).family_name[0] || '')
    ).toUpperCase();
    const avatarText = document.getElementById("avatar_text");
    avatarText.innerHTML = givenName;
  }
}

I am expecting that when the login is successful the event is triggered and should fetch the data from local storage.

Borisonekenobi
  • 469
  • 4
  • 15
R9102
  • 687
  • 1
  • 9
  • 32
  • 1
    What libraries are you using? You seem to have tagged with tags implying both Angular and React, but your code doesn't look particularly like either. – DBS Aug 22 '23 at 13:25
  • usually means the element you are trying to set the `innerHTML` on isn't in the dom. Are you sure you have the id correct - is it `avatar_text` and not `avatar_Text` (like your button has a capital after the underscore) – Pete Aug 22 '23 at 13:38
  • @DBS the loginmfe.js is react component and the root config is common so I have tagged angular – R9102 Aug 22 '23 at 14:02
  • @Pete avatar_text is the right id when I refresh the page it works fine – R9102 Aug 22 '23 at 14:04
  • you do have a comment that says it's null for the first load - should you not put an `if` around that then so it doesn't throw the error – Pete Aug 22 '23 at 14:06
  • @pete If(avatar_text){avatarText.innerHTML=givenName} ? – R9102 Aug 22 '23 at 14:09
  • 1
    it would be `if (avatarText)` - check to see if the object is null first – Pete Aug 22 '23 at 14:44
  • @Pete what should i do if the innerHTML is not available in the dom? – R9102 Aug 22 '23 at 17:46
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/255012/discussion-between-r9102-and-pete). – R9102 Aug 23 '23 at 03:03

0 Answers0