Some unknown javascript error on deployed pages only which I am going to figure out soon

[McDic]

When the website is loaded, javascript stuffs are not working at all, unlike local.

• Search bar
• Secondary navigation sidebar
• Light/Dark mode switch button

Uncaught TypeError: Cannot read properties of undefined (reading 'getAttribute')
    at index.ts:100:26
    at map.ts:58:33
    at c._next (OperatorSubscriber.ts:70:13)
    at t.next (Subscriber.ts:75:12)
    at mergeInternals.ts:85:24
    at c._next (OperatorSubscriber.ts:70:13)
    at t.next (Subscriber.ts:75:12)
    at e._subscribe (innerFrom.ts:78:18)
    at e._trySubscribe (Observable.ts:244:19)
    at Observable.ts:234:18

And this is the section where error occurred.

/**
 * Watch color palette
 *
 * @param inputs - Color palette element
 *
 * @returns Color palette observable
 */
export function watchPalette(
  inputs: HTMLInputElement[]
): Observable<Palette> {
  const current = __md_get<Palette>("__palette") || {
    index: inputs.findIndex(input => matchMedia(
      input.getAttribute("data-md-color-media")!
    ).matches)
  }

  /* Emit changes in color palette */
  return of(...inputs)
    .pipe(
      mergeMap(input => fromEvent(input, "change").pipe(map(() => input))),
      startWith(inputs[Math.max(0, current.index)]),
      map(input => ({
        index: inputs.indexOf(input),
        color: {
          media:   input.getAttribute("data-md-color-media"),  /* <-------------------------- HERE */
          scheme:  input.getAttribute("data-md-color-scheme"),
          primary: input.getAttribute("data-md-color-primary"),
          accent:  input.getAttribute("data-md-color-accent")
        }
      } as Palette)),
      shareReplay(1)
    )
}

... while local mkdocs serve is perfectly working without any problem on browser developer mode console. You can visit this page here.

---

Here are extra_javascripts and extra_css settings in mkdocs.yml.

extra_javascript:
  - javascripts/mathjax.js
  - javascripts/viewcount.js
  - https://polyfill.io/v3/polyfill.min.js?features=es6
  - https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js

extra_css:
  - stylesheets/admonitions.css
  - stylesheets/extra.css

Here is the libs block I overrided in overrides/main.html.

{% block libs %}

    {{ super() }}
    <script type="text/javascript" src="/javascripts/viewcount.js"></script>

{% endblock %}

I use mkdocs gh-deploy -v -r origin -b deploy -s --force --no-history to deploy the blog on Github Pages. This is made by help from the official documentation of mkdocs-material.

---

I noticed this bug is happening from somewhere of the commit and I wanted to report this, however I need to make a minimal reproduction of this. Maybe I have to make some another github pages for this.

What I am currently guessing is because I removed one palette (automatic mode) to make from 3 to 2 palettes and there is an error on cache or somewhat.

I am opening this discussion in case other people facing similar issues or already know a solution.

[kamilkrzyskow]

Hello @McDic,
since the viewcount.js is included in the extra_javascript there is no need to override main.html with the libs.
As for the error I don't get it when I visit https://blog.mcdic.net/ so it's likely, as you said, that the palette index stored in Local Storage of your browser might be invalid and therefore results in a undefined.

[McDic]

Ah I see that's the proper way to remove local storage cache. Fortunately the only important stuffs are probably rarely used Google account cookies or something similar to that. So no worries.

Ok, I made a repository to reproduce and I am going to make an issue now. Thanks!

[McDic]

Oh I see mkdocs-material is not encouraging to make a reproducing repository. I guess I am going to make two .zip files.

[McDic]

Reported #6645, thanks!

[kamilkrzyskow]

I think that one zip file should be enough with the steps to reproduce the error, as I'm assuming that changing the 3 palette toggle to the 2 palette toggle caused the crash. Also please use the info plugin to generate the zip, not really important in this case as the error comes from JavaScript, but in general this is the procedure.

[kamilkrzyskow]

Reported #6645, thanks!

Thank you for being so thorough. 👍