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.

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

Core: Restore /preview etc package exports; return unresolved path from presets. #19045

Merged
merged 9 commits into from
Aug 31, 2022

Conversation

tmeasday
Copy link
Member

@tmeasday tmeasday commented Aug 29, 2022

Issue:

Chromatic regressions introduced in #19007, ultimately due to many addons not working in example apps.

The root issue that was being worked around was that if a package has an exports field, Vite can only import an entry there. i.e. it can import('@storybook/addon-backgrounds/preview') not import('@storybook/addon-backgrounds/dist/preview.js'), which is what the presets code was resolving it to.

What I did

In the presets code, try resolving an import path, but return the import path unmodified, so the builder can import it itself.

NOTE: This means that import paths (e.g. previewEntries) will be of the form '@storybook/addon-backgrounds/preview' rather than /Users/xyz/..../node_modules/@storybook/addon-backgrounds/preview. Is this a problem @ndelangen? If so we could "half resolve" the import (ie. absolutize the import path).

How to test

  • Run example app (in both Vite and Webpack), check the addons, a11y, etc addons are working.
  • Chromatic changes should be gone on this PR.

Allow `preview.js` etc to be the name of the package exports
@tmeasday tmeasday requested review from ndelangen and shilman August 29, 2022 12:03
@shilman shilman changed the title Fix addons in examples. Core: Allow preview.js to be the name of package exports Aug 29, 2022
Copy link
Member

@shilman shilman left a comment

Choose a reason for hiding this comment

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

LGTM. @ndelangen we should probably figure out how to clean this up somehow -- maybe in Vite, which was the reason for the change in the first place?

@IanVS
Copy link
Member

IanVS commented Aug 29, 2022

The reason vite is importing the files with .js is that's what we get from await presets.apply('config', [], options);

Instead, just return the import path unresolved
All of Node, Webpack and Vite can `import('<pkg>/preview')` etc, as long as the `exports` map is there and setup like so. If the `exports` map is not there, then they can import `node_modules/<pkg>/preview.js` instead.

The issue occurred when an export map existed but Vite tried to import a path that wasn't defined in there.
@tmeasday tmeasday changed the title Core: Allow preview.js to be the name of package exports Core: Restore /preview etc package exports; return unresolved path from presets. Aug 30, 2022
@tmeasday
Copy link
Member Author

@ndelangen -- @shilman and I reworked this, and we are happy with this solution now, it resolves (haha) everything, apart from one possible wrinkle (see above):

NOTE: This means that import paths (e.g. previewEntries) will be of the form '@storybook/addon-backgrounds/preview' rather than /Users/xyz/..../node_modules/@storybook/addon-backgrounds/preview. Is this a problem @ndelangen? If so we could "half resolve" the import (ie. absolutize the import path).

Copy link
Member

@ndelangen ndelangen left a comment

Choose a reason for hiding this comment

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

bingo! this is great!

when I opened this PR this morning I instantly had the realization that this was the problem, and then 1 click later, you've implemented this exactly like that.

I guess I really needed sleep yesterday.

Awesome work @tmeasday @shilman

Copy link
Member

@IanVS IanVS left a comment

Choose a reason for hiding this comment

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

This is great, and means I think we can get rid of our custom utility that converted absolute paths back into "bare" imports.

code/lib/core-common/src/presets.ts Outdated Show resolved Hide resolved
@tmeasday
Copy link
Member Author

tmeasday commented Aug 30, 2022

This is great, and means I think we can get rid of our custom utility that converted absolute paths back into "bare" imports.

As discussed, hold your horses on this, absolute paths are coming back!

If I'm understanding correctly, this doesn't return the resolved path, it checks if the resolved path is truthy, and then returns the original path, or undefined.

That's correct. But I am going to tweak it to absolutize the path (but not resolve the export).

The rationale is that because addons can reference each other by name (e.g. in package-a/preset.js - "addons": ['package-b']), we need to resolve package-b relative to package-a, as we may not be allowed to import package-b as we don't have a direct dependency on it (e.g. in yarn pnp).

@ndelangen
Copy link
Member

This is weird... so sb-bench IS running on localhost, but not reachable (assumed)?

@ndelangen
Copy link
Member

Looks like when I fixed it and merged it to next next was already broken.
https://app.circleci.com/pipelines/github/storybookjs/storybook/28750/workflows/64bcd849-f71b-43e0-b213-e3c1ed01b441/jobs/407053

@ndelangen
Copy link
Member

argh, seems it's not consistent @tmeasday nothing changed between the CI being green and showing the error again.

What a pain.

@IanVS
Copy link
Member

IanVS commented Aug 30, 2022

Seems like the error is not related to this PR though, right? Any reason not to merge it?

Edit: I guess the chromatic snapshots are still failing, which as I understand was the reason for this PR.

@shilman shilman merged commit 541f40d into next Aug 31, 2022
@shilman shilman deleted the tom/sb-697-investigate-chromatic-issues-on-next branch August 31, 2022 02:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants