search

hipstersmoothie / storybook-dark-mode

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

Fix: Storybook preset loading error #187

Closed jackw closed 2 years ago

jackw commented 2 years ago

I'm not sure what has changed on Storybooks side but using this addon with storybook 6.5.10 appears to cause the following error when starting storybook:

WARN   Failed to load preset: {"type":"presets","name":"/Users/jackwestbrook/Projects/grafana/.yarn/__virtual__/storybook-dark-mode-virtual-ad5eee07b7/0/cache/storybook-dark-mode-npm-1.1.0-3820b02cd6-e1d7abbb96.zip/node_modules/storybook-dark-mode/dist/index.js"} on level 1
ERR! ReferenceError: window is not defined
ERR!     at Object.<anonymous> (/Users/jackwestbrook/Projects/grafana/.yarn/__virtual__/storybook-dark-mode-virtual-ad5eee07b7/0/cache/storybook-dark-mode-npm-1.1.0-3820b02cd6-e1d7abbb96.zip/node_modules/storybook-dark-mode/src/Tool.tsx:40:28)
ERR!     at Module._compile (node:internal/modules/cjs/loader:1103:14)
ERR!     at Module._extensions..js (node:internal/modules/cjs/loader:1155:10)
ERR!     at require$$0.Module._extensions..js (/Users/jackwestbrook/Projects/grafana/.pnp.cjs:71038:33)
ERR!     at Object.require.extensions.<computed> [as .js] (/Users/jackwestbrook/Projects/grafana/.yarn/__virtual__/ts-node-virtual-825d76b179/0/cache/ts-node-npm-10.9.1-6c268be7f4-090adff130.zip/node_modules/ts-node/src/index.ts:1608:43)
ERR!     at Module.load (node:internal/modules/cjs/loader:981:32)
ERR!     at Function.require$$0.Module._load (/Users/jackwestbrook/Projects/grafana/.pnp.cjs:70878:14)
ERR!     at Module.require (node:internal/modules/cjs/loader:1005:19)
ERR!     at require (node:internal/modules/cjs/helpers:102:18)
ERR!     at Object.<anonymous> (/Users/jackwestbrook/Projects/grafana/.yarn/__virtual__/storybook-dark-mode-virtual-ad5eee07b7/0/cache/storybook-dark-mode-npm-1.1.0-3820b02cd6-e1d7abbb96.zip/node_modules/storybook-dark-mode/src/index.tsx:4:1)
ERR!  ReferenceError: window is not defined
ERR!     at Object.<anonymous> (/Users/jackwestbrook/Projects/grafana/.yarn/__virtual__/storybook-dark-mode-virtual-ad5eee07b7/0/cache/storybook-dark-mode-npm-1.1.0-3820b02cd6-e1d7abbb96.zip/node_modules/storybook-dark-mode/src/Tool.tsx:40:28)
ERR!     at Module._compile (node:internal/modules/cjs/loader:1103:14)
ERR!     at Module._extensions..js (node:internal/modules/cjs/loader:1155:10)
ERR!     at require$$0.Module._extensions..js (/Users/jackwestbrook/Projects/grafana/.pnp.cjs:71038:33)
ERR!     at Object.require.extensions.<computed> [as .js] (/Users/jackwestbrook/Projects/grafana/.yarn/__virtual__/ts-node-virtual-825d76b179/0/cache/ts-node-npm-10.9.1-6c268be7f4-090adff130.zip/node_modules/ts-node/src/index.ts:1608:43)
ERR!     at Module.load (node:internal/modules/cjs/loader:981:32)
ERR!     at Function.require$$0.Module._load (/Users/jackwestbrook/Projects/grafana/.pnp.cjs:70878:14)
ERR!     at Module.require (node:internal/modules/cjs/loader:1005:19)
ERR!     at require (node:internal/modules/cjs/helpers:102:18)
ERR!     at Object.<anonymous> (/Users/jackwestbrook/Projects/grafana/.yarn/__virtual__/storybook-dark-mode-virtual-ad5eee07b7/0/cache/storybook-dark-mode-npm-1.1.0-3820b02cd6-e1d7abbb96.zip/node_modules/storybook-dark-mode/src/index.tsx:4:1)

It appears something during addon load something is assuming a node environment. (That's my guess anyway.) Digging through the official storybook addons I noticed that in most cases where window is used they are importing the npm package global. This PR fixes the above error with the same approach.

System info:

Environment Info:

  System:
    OS: macOS 12.0.1
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
  Binaries:
    Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
    Yarn: 3.2.2 - /usr/local/bin/yarn
    npm: 8.3.1 - ~/.nvm/versions/node/v16.14.0/bin/npm
  Browsers:
    Chrome: 104.0.5112.101
    Firefox: 102.0.1
    Safari: 15.1
jackw commented 2 years ago

@hipstersmoothie I apologise for the ping but would appreciate your thoughts on this PR as currently it's preventing us from upgrading storybook to 6.5.x.

hipstersmoothie commented 2 years ago

Thanks for the ping 😉

hipstersmoothie commented 2 years ago

:rocket: PR was released in v1.1.1 :rocket: