@storybook/theming does not work with Next.js

[kylegach]

Describe the bug

1. Create new Next.js project
   • I also tested these steps in a fresh CRA project, which does not produce the error
2. Add @storybook/theming@6.5.0-alpha.31 or later
   • @storybook/theming@6.5.0-alpha.30 or earlier does not produce the error (see commit history)
3. Use within project
4. Run yarn dev or yarn build

Here's the error:

To Reproduce

https://github.com/kylegach/storybook-theming-bundling-bug-2

System

Output

  System:
    OS: macOS 12.3
    CPU: (8) arm64 Apple M1 Pro
  Binaries:
    Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
    Yarn: 3.2.0 - ~/.nvm/versions/node/v16.13.2/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.2/bin/npm
  Browsers:
    Chrome: 100.0.4896.88
    Firefox: 98.0
    Safari: 15.4
  npmPackages:
    @storybook/theming: 6.5.0-alpha.31 => 6.5.0-alpha.31

Additional context

I think these links are relevant:

• Release: v6.5.0-alpha.30...v6.5.0-alpha.31
• PR: Core: Pre-bundle @storybook/theming to avoid emotion11 conflicts #17000

[kylegach]

Just noting that the @storybook/theming/dist/cjs/... path in that error is likely noteworthy. This is likely because Next.js is attempting to render the page on the server, in Node.

[thebuilder]

I don't think you should be using anything related to Storybook outside your story files. This would include it in your production code. If you need to add global styles to pages, then you should add it as a decorator. Maybe in preview.js?

[kylegach]

@thebuilder — Generally, you're absolutely correct. In this case, I'm using @storybook/theming for my project because it's part of the Storybook website and needs to be themed to match. This is the primary reason we distribute the package independently of the rest of Storybook, even though the Storybook UI itself is by far the biggest consumer.