storybook: Yarn 2: SB not working when using a .storybook/preview.js file

Describe the bug

We tried to migrate our package to yarn v2 with @storybook/react v6.0.0-alpha.21. And it always fails with following error:

ERROR in ./.storybook/preview.js-generated-config-entry.js
Module not found: Error: Something that got detected as your top-level application (because it doesn't seem to belong to any package) tried to access a package that is not declared in your dependencies

Required package: @storybook/client-api (via "@storybook/client-api")
Required by: /Users/sschaffernak/dev/_yarnv2/react-toolbox/packages/react-components/.storybook/preview.js-generated-config-entry.js

 @ ./.storybook/preview.js-generated-config-entry.js 3:0-68 10:9-21 12:16-29
 @ multi /Users/sschaffernak/dev/_yarnv2/react-toolbox/.yarn/unplugged/@storybook-core-virtual-0fe8bf6b36/node_modules/@storybook/core/dist/server/common/polyfills.js /Users/sschaffernak/dev/_yarnv2/react-toolbox/.yarn/unplugged/@storybook-core-virtual-0fe8bf6b36/node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js /Users/sschaffernak/dev/_yarnv2/react-toolbox/.yarn/cache/webpack-hot-middleware-npm-2.25.0-b59f3763d7-2.zip/node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false

Code snippets We have following config files:

// .storybook/main.js
module.exports = {
  stories: ['../src/**/*.story.[tj]s'],
};

// .storybook/preview.js
import { addDecorator } from '@storybook/react';
import { ThemeProvider } from '../src';
import Global from '../src/Global';

addDecorator(getStory => (
  <ThemeProvider theme={{ primaryColor: 'darkorange' }}>
    <Global>{getStory()}</Global>
  </ThemeProvider>
  )
);

System:

System: OS: macOS 10.15.3 CPU: (8) x64 Intel® Core™ i7-7700HQ CPU @ 2.80GHz Binaries: Node: 10.16.3 - /usr/local/bin/node Yarn: 2.0.0-rc.29 - /usr/local/bin/yarn npm: 6.9.0 - /usr/local/bin/npm Browsers: Chrome: 80.0.3987.132 Firefox: 72.0.2 Safari: 13.0.5

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 18 (11 by maintainers)

Most upvoted comments

We think that it has to do with decorators, because when we remove the file .storybook/preview.js - it works like a charm

ChiefORZ on Mar 10, 2020

@gaetanmaisse & @shilman I can confirm alpha.35 works. 🎉 Storybook starts normally now.

DimitrK on Apr 15, 2020

^Didn’t solve the issue. Although rewriting my preview.js to common js helped

GR34SE on Mar 24, 2020

@ChiefORZ Thanks for reporting this issue, I will try to work on it soon. I added this to the Yarn 2 compatibility TODO list 😉 You can follow the WIP about Yarn 2 compatibility in this issue: #9527.

➰ Workaround for now: add @storybook/client-api to your project dependencies.

📝 Note for future me: The problem is not the decorators directly but the .storybook/preview.js file, the error is thrown even with an empty file. The issue comes from this line: https://github.com/storybookjs/storybook/blob/next/lib/core/src/server/preview/iframe-webpack.config.js#L56

gaetanmaisse on Mar 10, 2020

So I can confirm that this bug still exists in version 6.3.4 of StoryBook. I’m using yarn 1.22.10.

But now it seems that the root cause is quite different.

At the beginning I had custom folder (/config) for configuration (by using -c parameter). Using run start cause the same issue:

[./config/preview.js-generated-config-entry.js] 2.88 KiB {main} [built] [1 error]

When I moved preview.js (with other files, like main,js) to standard folder (/.storybook) everything started to work again.

Brave-Turtle on Jul 14, 2021

@DimitrK all your @storybook/* should be the same version

shilman on Apr 15, 2020

Yowza!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.35 containing PR #10342 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there’s still more to do.

shilman on Apr 15, 2020

@tooppaaa you can take a look at https://github.com/storybookjs/storybook/pull/10342, in fact, it was an issue caused by replace('{{xx}}', aStringWith$$InIt) 🙃. I made a small refactoring in the last commit, feel free to give your feedback.

gaetanmaisse on Apr 8, 2020