Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: Error when switching themes (addon-themes) #24351

Closed
cristian-atehortua opened this issue Oct 3, 2023 · 11 comments · Fixed by #24596
Closed

[Bug]: Error when switching themes (addon-themes) #24351

cristian-atehortua opened this issue Oct 3, 2023 · 11 comments · Fixed by #24596

Comments

@cristian-atehortua
Copy link

Describe the bug

When using withThemeByClassName from @storybook/addon-themes and trying to switch from the default theme to another it gets a message on the console: "Attempted to set a global (theme) that is not defined in initial globals or globalTypes".

import type { StorybookConfig } from '@storybook/react-webpack5';

import { getAbsolutePath } from './utils';

const config: StorybookConfig = {
  stories: ['../packages/**/src/**/*.stories.{js,jsx,ts,tsx}'],,
  addons: [
    getAbsolutePath('@storybook/addon-links'),
    getAbsolutePath('@storybook/addon-essentials'),
    getAbsolutePath('@storybook/preset-create-react-app'),
    getAbsolutePath('@storybook/addon-interactions'),
    getAbsolutePath('@storybook/addon-knobs'),
    getAbsolutePath('@storybook/addon-themes'),
  ],
  framework: {
    name: getAbsolutePath('@storybook/react-webpack5'),
    options: {},
  },
  docs: {
    autodocs: true,
  },
};
export default config;
// preview.ts
import type { Preview } from "@storybook/react";
import { withThemeByClassName } from "@storybook/addon-themes";

import './themes.scss';

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    backgrounds: {
      default: 'dark',
    },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
  decorators: [
    withThemeByClassName({
      themes: {
        Light: 'light',
        Dark: 'dark'
      },
      defaultTheme: 'Light',
    }),
  ],
};

export default preview;

When clicking in the theme selector and clicking on "Dark theme" to switch themes, the theme is not changed and the mentioned message appears in the console.

To Reproduce

No response

System

Environment Info:

  System:
    OS: macOS 13.5.2
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 16.20.2 - ~/.nvm/versions/node/v16.20.2/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.20.2/bin/yarn
    npm: 8.19.4 - ~/.nvm/versions/node/v16.20.2/bin/npm
  Browsers:
    Safari: 17.0
  npmPackages:
    @storybook/addon-essentials: ^7.4.5 => 7.4.5 
    @storybook/addon-interactions: ^7.4.5 => 7.4.5 
    @storybook/addon-knobs: ^7.0.2 => 7.0.2 
    @storybook/addon-links: ^7.4.5 => 7.4.5 
    @storybook/addon-themes: ^7.4.5 => 7.4.5 
    @storybook/blocks: ^7.4.5 => 7.4.5 
    @storybook/preset-create-react-app: ^7.4.5 => 7.4.5 
    @storybook/react: ^7.4.5 => 7.4.5 
    @storybook/react-webpack5: ^7.4.5 => 7.4.5 
    @storybook/testing-library: ^0.2.1 => 0.2.2

Additional context

No response

@tjwiebell
Copy link

I was able to solve this by adding this block to my preview.ts. Hopefully a simple patch, will look into contributor requirements and try to find the root cause this weekend.

const preview: Preview = {
  globalTypes: {
    theme: { type: 'string' },
  },
  ... your config

@cristian-atehortua
Copy link
Author

@tjwiebell It works! Thanks!

@vanessayuenn
Copy link
Contributor

@tjwiebell thanks for the workaround, and looking forward to the patch! Be sure to check the contribution guide and hop onto the Storybook Discord if you need any help getting started.

cc @integrayshaun as maintainer of the addon

@ShaunEvening
Copy link
Contributor

@cristian-atehortua @tjwiebell how odd! The global is declared in the preview.tsx file.

Are you both using 7.4.5?

@cristian-atehortua
Copy link
Author

Hi @integrayshaun, yes. I'm using 7.4.5

@ShaunEvening
Copy link
Contributor

@cristian-atehortua @tjwiebell

Can one of you give me a reproduction of this issue? I wasn't able to replicate it in a 7.4.5 sandbox

@tjwiebell
Copy link

@cristian-atehortua @tjwiebell

Can one of you give me a reproduction of this issue? I wasn't able to replicate it in a 7.4.5 sandbox

Confirming I'm also on 7.4.5. Only commonality I see is we're both using monorepo setups, but I'll work on a repro in StackBlitz.

@tjwiebell
Copy link

Reproduction instance can be found here; logs the warning message in the console when trying to switch themes.

https://stackblitz.com/edit/github-weunpu?file=packages%2Fstorybook%2F.storybook%2Fpreview.ts

@JReinhold
Copy link
Contributor

JReinhold commented Oct 24, 2023

Thanks for the reproduction @tjwiebell. I was able to fix the issue (both in StackBlitz and locally) by removing the usage of getAbsolutePath in main.ts and simply use the plain package name as a reference instead: https://stackblitz.com/edit/github-weunpu-7zgvzs?file=packages%2Fstorybook%2F.storybook%2Fmain.ts

I'm not sure why this fixes it (I would think both methods should work) and I'm not sure why getAbsolutePath was needed in the first place, but I assume there's a nuance that I'm missing.

@cristian-atehortua
Copy link
Author

According to the comment added to this function when Storybook is initialized:

/**
 * This function is used to resolve the absolute path of a package.
 * It is needed in projects that use Yarn PnP or are set up within a monorepo.
 */

According to that, there are cases in which these function calls can not be removed. So removing them it's a workaround, too. We still need to find and solve the root cause.

@cristian-atehortua
Copy link
Author

Great @JReinhold. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants