Cannot read property 'preference' of undefined inside Storybook

[ManUtopiK]

Version

@nuxtjs/color-mode: ^2.0.3
nuxt: ^2.14.12
@nuxtjs/storybook: ^3.3.1

Steps to reproduce

Install nuxt with @nuxtjs/color-mode and @nuxtjs/storybook.

What is actually happening?

I run nuxt as target: static. Everything works fine with yarn dev.
I can launch Storybook and got it at localhost:3003, but inside the main frame of Storybook, there is this error:
Cannot read property 'preference' of undefined.

I tried everything related in #21 and #25 without success...

[Atinux]

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

[ManUtopiK]

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>

[farnabaz]

@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.

[kgnfth]

@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'

[Atinux]

Hi @kgnfth

Please use 2.0.8, small mistake sorry about this.

[kgnfth]

Hi @kgnfth

Please use 2.0.8, small mistake sorry about this.

Thx it works 💙

[BennaceurHichem]

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

[Atinux]

Did you try the 2.0.10?

[BennaceurHichem]

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

[khawarizmus]

@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.

[Atinux]

Cc @farnabaz

[farnabaz]

@gimyboya Using color-mode@v2.0.8 + 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

[Atinux]

cc @danielroe on it too