Cannot read property 'preference' of undefined inside Storybook about color-mode HOT 13 CLOSED

@gimyboya Using [email protected] + nuxt-storybook > 4.0.0 should work without any issues.

New versions of module is not compatible with Storybook because it uses vue-renderer hook to inject script and nuxt-storybook does not support renderer hooks. https://github.com/nuxt-community/color-mode-module/blob/master/lib/module.js#L31

from color-mode.

Hi @kgnfth

Please use 2.0.8, small mistake sorry about this.

from color-mode.

Yes I did, I was workinf with 2.0.10, then I downgrade and same thing. This error was gone when I applied what @ManUtopiK mention

from color-mode.

cc @danielroe on it too

from color-mode.

@farnabaz do you mind checking when you have 5 min?

from color-mode.

I think I just fixed this issue, but I made many change on the storybook config, so I'm not sure how I did...
I set a custom storybook config as explained here.

But maybe it's work just only with this file .storybook/preview-head.html:

<script>
  var data = {}
  window['__NUXT_COLOR_MODE__'] = {
    preference: 'light',
  }
</script>

from color-mode.

@nuxtjs/storybook executes plugin scripts after the plugin import and this cause the issue. And color-mode uses global variable on import. The leads to undefined error.

from color-mode.

@Atinux i have the same issue after upgrading from 2.0.5 to 2.0.7

my settings is
nuxt.config.js

colorMode: {
  storageKey: 'color-mode',
  preference: 'system',
  fallback: 'dark',
  classSuffix: '',
}

and in my tailwind.config.js i have

darkMode: 'class'

from color-mode.

Hi @kgnfth

Please use 2.0.8, small mistake sorry about this.

Thx it works 💙

from color-mode.

I'm having the same problem, I used the 2.0.8 version but the error still occurs in Storybook, any idea?

from color-mode.

Did you try the 2.0.10?

from color-mode.

@Atinux is there a cleaner way as to not have to eject and keep using the module way of doing things with nuxtjs? while the solution provided by @ManUtopiK works it forces us to have the config in the .storybook folder.

from color-mode.

Cc @farnabaz

from color-mode.