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.

Sign up for GitHub

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

Jump to bottom

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

Merged
merged 1 commit into from
Apr 7, 2020
Merged

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

merged 1 commit into from
Apr 7, 2020

Conversation

gaetanmaisse
Copy link
Member

@gaetanmaisse gaetanmaisse commented Apr 3, 2020 •
edited
Loading

Issue: #10094
Also related to #9527

What I did

Using ES6 import directly in preview.js-generated-config-entry.js module definition is causing the following error when using Yarn 2:

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/dev/project/.storybook/preview.js-generated-config-entry.js

This is because the code of the virtual module is importing @storybook/client-api and @storybook/client-logger. When the code is executed these packages are required in the context of SB user project and not in the one of @storybook/core causing Yarn 2 to throw.

To avoid this, we are now resolving theses deps directly when webpack config is built (so in @storybook/core context) and then using the resolved values in the virtual module.

I didn't find a better way than adding a check on PnP usage to avoid these errors when building React SB example in our monorepo:

ERROR in ./.storybook/preview.js-generated-config-entry.js
Module not found: Error: You attempted to import /tmp/storybook/lib/client-api/dist/index.js which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.
 @ ./.storybook/preview.js-generated-config-entry.js 5:15-69
 @ multi /tmp/storybook/lib/core/dist/server/common/polyfills.js /tmp/storybook/lib/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js /tmp/storybook/addons/docs/dist/frameworks/common/config.js-generated-other-entry.js /tmp/storybook/addons/docs/dist/frameworks/react/config.js-generated-other-entry.js /tmp/storybook/addons/actions/dist/preset/addDecorator.js-generated-other-entry.js /tmp/storybook/addons/actions/dist/preset/addArgs.js-generated-other-entry.js /tmp/storybook/addons/links/dist/preset/addDecorator.js-generated-other-entry.js /tmp/storybook/addons/knobs/dist/preset/addDecorator.js-generated-other-entry.js /tmp/storybook/addons/a11y/dist/preset/addDecorator.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false

How to test

All tests should still pass and sadly, for now, there is no Yarn 2 automated test.

@gaetanmaisse gaetanmaisse added compatibility with other tools maintenance User-facing maintenance tasks yarn / npm Yarn / npm acting weird labels Apr 3, 2020
@gaetanmaisse gaetanmaisse added this to the 6.0 milestone Apr 3, 2020
@gaetanmaisse gaetanmaisse linked an issue Apr 3, 2020 that may be closed by this pull request
Yarn 2: SB not working when using a .storybook/preview.js file #10094
Closed
@gaetanmaisse gaetanmaisse mentioned this pull request Apr 3, 2020
Closed
@gaetanmaisse gaetanmaisse force-pushed the fix-preview-file-with-yarn-2 branch 5 times, most recently from be9d107 to 5f9f8a1 Compare April 6, 2020 11:04
@gaetanmaisse gaetanmaisse marked this pull request as ready for review April 6, 2020 11:25
tmeasday
tmeasday approved these changes Apr 7, 2020
View reviewed changes
Copy link
Member

@tmeasday tmeasday left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK, I guess this makes sense to me.

@gaetanmaisse
refactor: rework imports in preview virtual module to fix Yarn 2 comp…
42a7fcf 
…atibility

Using ES6 import directly in `preview.js-generated-config-entry.js` module definition is causing the following error when using Yarn 2:
```
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/dev/project/.storybook/preview.js-generated-config-entry.js
```
This is because the code of the virtual module is importing @storybook/client-api and @storybook/client-logger.
When the code is executed these packages are required in the context of SB user project and not in the one of `@storybook/core` causing Yarn 2 to throw.
To avoid this, we are now resolving theses deps directly when webpack config is built (so in `@storybook/core` context) and then using the resolved values in the virtual module.

The change is done only for PnP users to avoid issues when running SB examples available in this monorepo, if examples are extracted somewhere else the `require.resolve` behavior can be applied in a non PnP situation.
@ndelangen ndelangen merged commit b07f9c3 into next Apr 7, 2020
@ndelangen ndelangen deleted the fix-preview-file-with-yarn-2 branch April 7, 2020 08:36
@shilman shilman mentioned this pull request Apr 7, 2020
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@tmeasday tmeasday tmeasday approved these changes

@ndelangen ndelangen ndelangen approved these changes

@alterx alterx Awaiting requested review from alterx

@igor-dv igor-dv Awaiting requested review from igor-dv

Assignees
No one assigned
Labels
compatibility with other tools maintenance User-facing maintenance tasks yarn / npm Yarn / npm acting weird
Projects
None yet
Milestone
6.0
Development

Successfully merging this pull request may close these issues.

Yarn 2: SB not working when using a .storybook/preview.js file
3 participants
@gaetanmaisse @tmeasday @ndelangen