hipstersmoothie / storybook-dark-mode

A storybook addon that lets your users toggle between dark and light mode.
MIT License
428 stars 56 forks source link

[Vite/Storybook.v7] Addon 'storybook-dark-mode' not working on FIREFOX #245

Closed DeLm0re closed 9 months ago

DeLm0re commented 9 months ago

Hello,

I'm trying to use this addon to toggle my mantine color scheme along with storybook mode. However, when I set the 'storybook-dark-mode' addon in main.ts :

// main.ts
addons: [
        '@storybook/addon-essentials',
        '@storybook/addon-styling',
        'storybook-dark-mode',
],

and launch my app in Mozilla Firefox, my application crashes whenever I manually reload the page. Plus, even on the first load, I can't see the toggle button in the toolbar.

Here is the devtools console error:

Uncaught TypeError: j.localStorage.getItem is not a function
    T http://localhost:5173/sb-addons/storybook-dark-mode-esm-preset-8/manager-bundle.js:4
    We http://localhost:5173/sb-addons/storybook-dark-mode-esm-preset-8/manager-bundle.js:4
    commitHookEffectListMount http://localhost:5173/sb-manager/chunk-NBCGHFLK.js:75
    commitPassiveHookEffects http://localhost:5173/sb-manager/chunk-NBCGHFLK.js:88
    callCallback2 http://localhost:5173/sb-manager/chunk-NBCGHFLK.js:2
    invokeGuardedCallbackDev http://localhost:5173/sb-manager/chunk-NBCGHFLK.js:2
    invokeGuardedCallback http://localhost:5173/sb-manager/chunk-NBCGHFLK.js:2
    flushPassiveEffectsImpl http://localhost:5173/sb-manager/chunk-NBCGHFLK.js:90
    unstable_runWithPriority http://localhost:5173/sb-manager/chunk-NBCGHFLK.js:1
    runWithPriority$1 http://localhost:5173/sb-manager/chunk-NBCGHFLK.js:9
    flushPassiveEffects http://localhost:5173/sb-manager/chunk-NBCGHFLK.js:90
    commitBeforeMutationEffects http://localhost:5173/sb-manager/chunk-NBCGHFLK.js:90
    workLoop http://localhost:5173/sb-manager/chunk-NBCGHFLK.js:1
    flushWork http://localhost:5173/sb-manager/chunk-NBCGHFLK.js:1
    performWorkUntilDeadline http://localhost:5173/sb-manager/chunk-NBCGHFLK.js:1
    js http://localhost:5173/sb-manager/chunk-NBCGHFLK.js:1
    js http://localhost:5173/sb-manager/chunk-NBCGHFLK.js:1
    __commonJS http://localhost:5173/sb-manager/chunk-RKFFWI2D.js:1
    js http://localhost:5173/sb-manager/chunk-NBCGHFLK.js:1
    __commonJS http://localhost:5173/sb-manager/chunk-RKFFWI2D.js:1
    js http://localhost:5173/sb-manager/chunk-NBCGHFLK.js:1
    js http://localhost:5173/sb-manager/chunk-NBCGHFLK.js:128
    __commonJS http://localhost:5173/sb-manager/chunk-RKFFWI2D.js:1
    js http://localhost:5173/sb-manager/chunk-NBCGHFLK.js:128
    __commonJS http://localhost:5173/sb-manager/chunk-RKFFWI2D.js:1
    <anonymous> http://localhost:5173/sb-manager/chunk-NBCGHFLK.js:128
manager-bundle.js:4:1729

I'm using Chrome as a workaround but it is annoying for me because Mozilla Firefox is the main browser in my company.

Here is some package.json info for you :

"peerDependencies": {
    "@mantine/core": "^7.0.2",
    "react-icons": "^4.11.0"
},
"devDependencies": {
    "@storybook/addon-essentials": "^7.4.5",
    "@storybook/addon-styling": "^1.3.7",
    "@storybook/blocks": "^7.4.5",
    "@storybook/react": "^7.4.5",
    "@storybook/react-vite": "^7.4.5",
    "@typescript-eslint/eslint-plugin": "^6.7.3",
    "eslint-plugin-deprecation": "^2.0.0",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "eslint-plugin-storybook": "^0.6.14",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "storybook": "^7.4.5",
    "storybook-dark-mode": "3.0.0",
    "tsup": "^7.2.0",
    "tsx": "^3.12.10"
},
DeLm0re commented 9 months ago

Turns out it was due to Privacy Possum extension. I disabled it for my localhost.