attribute="class" causing the following error with Tailwindcss and nextjs

[avastamin]

It's working only with ThemeProvider but not working with attribute="class"

  <ThemeProvider attribute="class">
      <Component {...pageProps} />
    </ThemeProvider>

InvalidCharacterError: Failed to execute 'add' on 'DOMTokenList': The token provided ('[object Object]') contains HTML space characters, which are not valid in tokens.

[jylertones]

I have had this happen too, but only when the class I specify for the theme has spaces in it. To be specific that means I had a value of {light: 'classA classB'}

I don't know of a way to specify two classes for a theme 😕. But hopefully this helps you debug.

[martingoodloans]

I only noticed this happening when providing a function to the setTheme function.

e.g

setTheme((prev) => prev === 'dark' ? 'light' : 'dark')

This sets the function as a string to LocalStorage. Not sure if you're seeing the issue for this reason.

[684efs3]

I got this while working in NextJs 13

[brentrobbins]

@684efs3 How were you able to get this working in Nextjs version 13? Are you using the App directory?

[EtanHey]

same problem here using appDir

[HenryNwankwo]

Please, I will like to know if someone found a work around on this issue.

[HenryNwankwo]

I only noticed this happening when providing a function to the setTheme function.

e.g

setTheme((prev) => prev === 'dark' ? 'light' : 'dark')

This sets the function as a string to LocalStorage. Not sure if you're seeing the issue for this reason.

I have removed the setTheme, updated next to @latest, and deleted the node modules and reinstall but still the same issue

[marcobusico]

Hey, has anyone here got an update about this issue? I am using Next.js 13 with appdir, thanks in advance!

[ben519]

I fixed this on Next.js 14 by doing the following

1. In Chrome Developer Tools, go to Application > Local Storage > delete the theme variable
2. Change

<button onClick={ () => { setTheme((prev) => prev === 'dark' ? 'light' : 'dark') } }>
change mode
</button>

to

<button onClick={ theme === "light" ? () => { setTheme("dark") } : () => { setTheme("light") } }>
change mode
</button>

(Not 100% sure if step 2 is necessary, but it worked for me.)

[boldrack]

This issue still persists for both nextjs13 and 14 . anyone got it working yet ?

[steezplusplus]

1. In Chrome Developer Tools, go to Application > Local Storage > delete the theme variable

This worked for me, step 2 wasn't necessary.

[martins4duarte]

1. In Chrome Developer Tools, go to Application > Local Storage > delete the theme variable

This worked for me, step 2 wasn't necessary.

I was working in other project using chakra ui theme, so i think this is causing a conflict.