search

nuxt-modules / color-mode

Dark and Light mode with auto detection made easy with Nuxt 🌗
https://color-mode.nuxtjs.org
MIT License
1.08k stars 99 forks source link

Nuxt 3 Color Mode Storyblok Visual Editor Issue - Cannot read properties of undefined (reading 'getColorScheme') #183

Closed schneider-carlo closed 1 year ago

schneider-carlo commented 1 year ago

Version

@nuxtjs/color-mode: v3.2.0, @storyblok/nuxt: v5.1.0, nuxt: v3.2.2

Reproduction Link

git@github.com:schneider-carlo/nuxt-3-storyblok-color-mode-issue.git

Steps to reproduce

Storyblok Part

login to storyblok and create new space in eu then go to settings and then to visual editor set the location to https://localhost:3000/ go to access tokens and copy the preview access token

Nuxt Part

git clone git@github.com:schneider-carlo/nuxt-3-storyblok-color-mode-issue.git cd nuxt-3-storyblok-color-mode-issue yarn install mkcert localhost mv .env.example .env open the .env file and replace by the copied storyblok access token yarn dev

What is Expected?

Now when you open https://localhost:3000/ in a new tab of your browser everything works fine. You can see that have you color mode class on the html element and get no error. When you open storyblok and click on content and then on the home page everything should also work fine.

What is actually happening?

When the visual editor of the home page is being opened you will see a big error message: Cannot read properties of undefined (reading 'getColorScheme') In the Terminal are also a some warnings and issues. Now when I am going in the nuxt.config.ts and remove the color mode module from the modules array and rerun yarn dev, the issues are gone.

Question

What can I do that I can use the color mode module combined with the storyblok visual editor?

haidertm commented 1 year ago

Issue is closed, just adding the comment for anyone facing the issue in future.

Deleting the localstorage fixed the issue for me.