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

[ChiefORZ]

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(R) Core(TM) 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

[ChiefORZ]

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

[gaetanmaisse]

@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

[GR34SE]

I've got similar issue, but with running storyshots with jest. With preview.js it gives me:

.../.storybook/preview.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import {addParameters} from "@storybook/react";
                                                                                             ^^^^^^

    SyntaxError: Cannot use import statement outside a module
`,

...and without preview.js it just works.

[shilman]

Have you tried upgrading to 6.0 alpha? @gaetanmaisse has made a bunch of improvements to support Yarn 2 as part of #9527

[GR34SE]

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

[shilman]

@GR34SE "helped" as in fixed it? that's pretty weird.

[gaetanmaisse]

@ChiefORZ this should be fixed in the next alpha release (6.0.0-alpha.31) 😉

[shilman]

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

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

[gaetanmaisse]

😞 it looks like https://github.com/storybookjs/storybook/pull/10281 reintroduce the issue. I will 🔍 .

[tooppaaa]

The code you changed is now going through babel. Happy to submit a new PR taking yours into account !

[gaetanmaisse]

@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.

[DimitrK]

I am getting what seems to be similar, but not the same error, on 6.0.0-alpha.34

ERROR in ./.storybook/config.js-generated-config-entry.js
Module not found: Error: Can't resolve '~/.yarn/$virtual/@storybook-client-api-virtual-90ce459e42/0/cache/@storybook-client-api-npm-6.0.0-alpha.34-34fd06ddf2-2.zip/node_modules/@storybook/client-api/dist/index.js' in '~/apps/acme/.storybook'
 @ ./.storybook/config.js-generated-config-entry.js 9:15-240
 @ multi ~/.yarn/$$virtual/@storybook-core-virtual-638b54729f/0/cache/@storybook-core-npm-6.0.0-alpha.34-1c64e1c5fb-2.zip/node_modules/@storybook/core/dist/server/common/polyfills.js ~/.yarn/$$virtual/@storybook-core-virtual-638b54729f/0/cache/@storybook-core-npm-6.0.0-alpha.34-1c64e1c5fb-2.zip/node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./.storybook/config.js-generated-config-entry.js ~/.yarn/cache/webpack-hot-middleware-npm-2.25.0-b59f3763d7-2.zip/node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false

Adding "@storybook/client-api": "^5.3.18" as a dependency doesn't seem to work. Is there any workaround for that?

[shilman]

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.

[gaetanmaisse]

@DimitrK Can you give it a try with alpha.35?

[DimitrK]

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

[shilman]

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

[jasonwr]

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

I'm using Yarn 1.22 and this didn't do anything for me.