helper.getColorScheme is not a function error when trying to use the module

[maxacarvalho]

Version

@nuxtjs/color-mode:
nuxt:

Reproduction Link

https://github.com/maxacarvalho/nuxtjs-color-mode

Steps to reproduce

1. npm install
2. npm run dev
3. Access the local URL http://localhost:3000/
4. Try to select one of the color modes
5. Refresh the page

What is Expected?

I expect to be able to switch between color modes

What is actually happening?

Nothing happens at first and then a 500 error is thrown

[Acadbek]

I also got the same error

[Letivan]

Hi.
In the browser, go to localstorage, find nuxt-color-mode, delete the line. Reload the page.

[lucacicada]

This issue also appears when testing a nuxt app.

During testing, the error originates from here:

color-mode/src/runtime/plugin.client.ts

Lines 8 to 14 in 0d0e097

	const helper = (window[globalName] || {}) as unknown as {
	preference: string
	value: string
	getColorScheme: () => string
	addColorScheme: (className: string) => void
	removeColorScheme: (className: string) => void
	}

(window[globalName] || {}).removeColorScheme is undefined:

color-mode/src/runtime/plugin.client.ts

Line 91 in 0d0e097

helper.removeColorScheme(oldValue)

[JCRamires]

This issue also appears when testing a nuxt app.

During testing, the error originates from here:

color-mode/src/runtime/plugin.client.ts

Lines 8 to 14 in 0d0e097

	const helper = (window[globalName] || {}) as unknown as {
	preference: string
	value: string
	getColorScheme: () => string
	addColorScheme: (className: string) => void
	removeColorScheme: (className: string) => void
	}

(window[globalName] || {}).removeColorScheme is undefined:

color-mode/src/runtime/plugin.client.ts

Line 91 in 0d0e097

helper.removeColorScheme(oldValue)

Did you find a fix for this error, I got the same while running a test?

[lucacicada]

This issue also appears when testing a nuxt app.
During testing, the error originates from here:

color-mode/src/runtime/plugin.client.ts

Lines 8 to 14 in 0d0e097

	const helper = (window[globalName] || {}) as unknown as {
	preference: string
	value: string
	getColorScheme: () => string
	addColorScheme: (className: string) => void
	removeColorScheme: (className: string) => void
	}

(window[globalName] || {}).removeColorScheme is undefined:

color-mode/src/runtime/plugin.client.ts

Line 91 in 0d0e097

helper.removeColorScheme(oldValue)

Did you find a fix for this error, I got the same while running a test?

Kinda of, using pnpm patch:

• https://pnpm.io/cli/patch

In your repo, run pnpm patch @nuxtjs/[email protected]
Follow the path pnpm gives to you, then edit dist/runtime/plugin.client.mjs L67-68 as such:

    helper?.removeColorScheme(oldValue);
    helper?.addColorScheme(newValue);

Go back to your repo and run pnpm patch-commit <temp-pnpm-path>

You should have a file named patches/@[email protected]

Commit that, and your CI should now work as usual

My patch file, for comparison:

diff --git a/dist/runtime/plugin.client.mjs b/dist/runtime/plugin.client.mjs
index e4fb18d41122ab0fa842faa69e12b438a0c4b0b3..0ee8a88e39332af03bc5ae9a0f382cc545664341 100644
--- a/dist/runtime/plugin.client.mjs
+++ b/dist/runtime/plugin.client.mjs
@@ -64,8 +64,8 @@ export default defineNuxtPlugin((nuxtApp) => {
    window.localStorage?.setItem(storageKey, preference);
  }, { immediate: true });
  watch(() => colorMode.value, (newValue, oldValue) => {
-    helper.removeColorScheme(oldValue);
-    helper.addColorScheme(newValue);
+    helper?.removeColorScheme(oldValue);
+    helper?.addColorScheme(newValue);
  });
  if (colorMode.preference === "system") {
    watchMedia();

[felix-wtfoxtrot]

I think the initialisation to an empty object in

color-mode/src/runtime/plugin.client.ts

Line 8 in 0d0e097

const helper = (window[globalName] || {}) as unknown as {

is a mistake. This leads to the variable being defined, but it does not provide all the required functions.

Apparently, under some circumstances, the watchers fire when the helper is still an empty object.
We could either guard against the helper being undefined (and also not initialise it as an empty object) or give the initial helper the required functions so calling them does not throw an error.

I am just not sure which one is the best solution, as I just landed here by drilling down on a sentry issue we saw and do not have the necessary overview of this repo to decide whats best...

Crashing with this error though, certainly is not optimal, so if I can help somehow to resolve this, I am willing to do so!

[Gerbuuun]

Getting this error only on certain pages... It's very inconsistent. I have no indication of what part of my code might cause it because on my machine I do not get this error.

[LutherApp]

I got this error on my Nuxt UI Pro Saas Template, when the settings in Chrome was preventing the site from saving any data on the local machine.

Removing the web-site from the list:
Not allowed to save data on your device
fixed the problem.

Just telling it, and hoping it can be to help for someone!

[blouflashdb]

I get this using Nuxt UI 3 on Mobile Safari.