Premium support for our pure JavaScript UI components


Post by pmiklashevich »

In Vue I set theme from local storage on beforeMount hook. DOM is not ready yet, and theme is not defined automatically. DomHelper.setTheme doesn't work in this case. I get

TypeError: Cannot read properties of null (reading 'name') at Si.setTheme  (schedulerpro.module.js 15205:44)

I checked the sources.

     * @param {String} newThemeName the name of the theme that should be applied
     * @privateparam {String} [defaultTheme] Optional, the name of the theme that should be used in case of fail
     * @returns {Promise} A promise who's success callback receives the theme change
     * event if the theme in fact changed. If the theme `href` could not be loaded,
     * the failure callback is called, passing the error event caught.
     */
    static setTheme(newThemeName, defaultTheme) {
        newThemeName = newThemeName.toLowerCase();

    const
        { head }     = document,
        oldThemeName = DH.getThemeInfo(defaultTheme).name.toLowerCase();

defaultTheme param is actually a fallback for oldTheme name

DH.getThemeInfo(defaultTheme).name.toLowerCase();

This line fails in case defaultTheme is undefined and DOM is not ready to parse the old theme name.

Please either update DH.getThemeInfo function so it never returns null or update DH.setTheme function to expect null being returned by DH.getThemeInfo.

Cheers!

P.S. It is SchedulerPro v5.0.5. I'm not sure if the source code is up to date in my reference.

Pavlo Miklashevych
Sr. Frontend Developer


Post by alex.l »

Hi Pavel,
In the case you described, I am afraid, it won't be working even if you pass DH.getThemeInfo(defaultTheme).name.toLowerCase(); line, since it still required to have DOM initialized to set actual theme. Did you try it?

All the best,
Alex


Post by pmiklashevich »

Basically I can check it myself

    // If themeInfo is missing, it means DOM doesn't have the theme identifier
    if (!DomHelper.themeInfo) {
      console.warn('DOM is not ready to apply Bryntum theme')
      return
    }

And I moved theme init function from beforeMount to mounted. But sometimes I can see a glitch, for example when I use light theme by default, and have dark theme saved in localStorage. I can notice the color change. But this is less critical than having a runtime error that breaks all styles.

Pavlo Miklashevych
Sr. Frontend Developer


Post Reply