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

ChiefORZ · 2020-03-10T11:03:54Z

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

The text was updated successfully, but these errors were encountered:

ChiefORZ · 2020-03-10T12:00:35Z

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

gaetanmaisse · 2020-03-10T20:12:54Z

@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 · 2020-03-19T14:48:59Z

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 · 2020-03-21T03:57:17Z

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

GR34SE · 2020-03-24T11:31:36Z

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

shilman · 2020-03-25T00:23:41Z

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

gaetanmaisse · 2020-04-07T10:15:53Z

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

shilman · 2020-04-07T10:31:58Z

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 · 2020-04-07T13:26:17Z

😞 it looks like #10281 reintroduce the issue. I will 🔍 .

tooppaaa · 2020-04-07T20:55:40Z

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

gaetanmaisse · 2020-04-08T08:39:52Z

@tooppaaa you can take a look at #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 · 2020-04-15T12:19:06Z

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 · 2020-04-15T16:23:55Z

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 · 2020-04-15T16:57:32Z

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

DimitrK · 2020-04-15T18:44:00Z

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

shilman · 2020-04-15T23:19:22Z

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

JSONRice · 2020-09-29T19:44:13Z

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.

Brave-Turtle · 2021-07-14T12:17:12Z

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.

shilman assigned gaetanmaisse Mar 10, 2020

shilman added compatibility with other tools question / support yarn / npm Yarn / npm acting weird labels Mar 10, 2020

gaetanmaisse changed the title ~~Yarn v2 (berry) not working with decorators~~ Yarn 2: SB not working when using a .storybook/preview.js file Mar 10, 2020

gaetanmaisse changed the title ~~Yarn 2: SB not working when using a .storybook/preview.js file~~ Yarn 2: SB not working when using a .storybook/preview.js file Mar 10, 2020

gaetanmaisse mentioned this issue Mar 10, 2020

Yarn 2: Support Yarn v2 "Berry" #9527

Closed

gaetanmaisse mentioned this issue Apr 3, 2020

Yarn 2: rework imports in webpack preview virtual module to fix compatibility #10305

Merged

gaetanmaisse linked a pull request Apr 3, 2020 that will close this issue

Yarn 2: rework imports in webpack preview virtual module to fix compatibility #10305

Merged

ndelangen closed this as completed in #10305 Apr 7, 2020

gaetanmaisse reopened this Apr 7, 2020

gaetanmaisse mentioned this issue Apr 7, 2020

Yarn 2: Fix compatibility with .storybook/preview.js file #10342

Merged

shilman closed this as completed Apr 15, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

ChiefORZ commented Mar 10, 2020

ChiefORZ commented Mar 10, 2020

gaetanmaisse commented Mar 10, 2020 •

edited

Loading

GR34SE commented Mar 19, 2020 •

edited

Loading

shilman commented Mar 21, 2020

GR34SE commented Mar 24, 2020

shilman commented Mar 25, 2020

gaetanmaisse commented Apr 7, 2020 •

edited

Loading

shilman commented Apr 7, 2020

gaetanmaisse commented Apr 7, 2020

tooppaaa commented Apr 7, 2020

gaetanmaisse commented Apr 8, 2020

DimitrK commented Apr 15, 2020 •

edited

Loading

shilman commented Apr 15, 2020

gaetanmaisse commented Apr 15, 2020

DimitrK commented Apr 15, 2020

shilman commented Apr 15, 2020

JSONRice commented Sep 29, 2020

Brave-Turtle commented Jul 14, 2021

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

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

Comments

ChiefORZ commented Mar 10, 2020

ChiefORZ commented Mar 10, 2020

gaetanmaisse commented Mar 10, 2020 • edited Loading

GR34SE commented Mar 19, 2020 • edited Loading

shilman commented Mar 21, 2020

GR34SE commented Mar 24, 2020

shilman commented Mar 25, 2020

gaetanmaisse commented Apr 7, 2020 • edited Loading

shilman commented Apr 7, 2020

gaetanmaisse commented Apr 7, 2020

tooppaaa commented Apr 7, 2020

gaetanmaisse commented Apr 8, 2020

DimitrK commented Apr 15, 2020 • edited Loading

shilman commented Apr 15, 2020

gaetanmaisse commented Apr 15, 2020

DimitrK commented Apr 15, 2020

shilman commented Apr 15, 2020

JSONRice commented Sep 29, 2020

Brave-Turtle commented Jul 14, 2021

gaetanmaisse commented Mar 10, 2020 •

edited

Loading

GR34SE commented Mar 19, 2020 •

edited

Loading

gaetanmaisse commented Apr 7, 2020 •

edited

Loading

DimitrK commented Apr 15, 2020 •

edited

Loading