Website crashes when the value of darkMode in LocalStorage is undefined

[Talaxy009]

I encountered a crash problem today and found that other plugins accidentally changed the value of darkMode to undefined. Although I've fixed the issue, the user has to clear the website cache to reset the drakMode value and get the website to work. So I thought it would be perfect if gatsby-plugin-use-dark-mode could handle this unexpected situation.

The steps to reproduce:

• Running localStorage.setItem('darkMode', 'undefined'); in the console to simulate unexpected situations.
• Reloading the website then you should be able to see something like the image below:

[wKovacs64]

Thanks @Talaxy009!

[tholyong]

@Talaxy009 May I know what plugin causes the issue? I recently found that similar issue but couldn't figure out why the value is replaced with "undefined"? I just updated Gatsby to version 5.7.0 and the issue come out.

[Talaxy009]

@tholyong I have written an article about this issue, but it is Chinese. Here's what I found, the problem happens because use-dark-mode listens to an input element (I think it's a problem with use-dark-mode because it should listen to prefers-color-scheme media but it doesn't), when the input value change, it will set the localStorage as undefined because the event object is different. To fix it you can remove all @media(prefers-color-scheme: dark) styles in your site or write your "use-dark-mode", I write mine here, the use method is different but the base logic is same so the gatsby-plugin-use-dark-mode still work.

If you're curious which element is causing it, you can locate the element with these codes:

// save the orignal setItem method
const orignalSetItem = localStorage.setItem;

// rewrite setItem, it will dispatch a event when called
localStorage.setItem = function (key, newValue) {
    let setItemEvent = new Event('setItemEvent');
    setItemEvent.newValue = newValue;
    setItemEvent.key = key;
    window.dispatchEvent(setItemEvent);
    orignalSetItem.apply(this, arguments);
};

// throw an error when the event dispatched
window.addEventListener('setItemEvent', function (e) {
    throw e;
});

and you might see something like this:

[tholyong]

Thank you for the information and also the solution! This is exactly the issue I'm facing. I think I'm gonna write my own useDarkMode as you suggested.

[Talaxy009]

You are welcome☺️