-
-
Notifications
You must be signed in to change notification settings - Fork 9.4k
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
SB7: Yarn PnP broken in both vite & webpack #20405
Comments
@blikblum Hi, your lock file is showing |
@joshwooding if I dont add it it fails with Error: Error: Your application tried to access @storybook/builder-vite, but it isn't declared in your dependencies; this makes the require call ambiguous and unsound. See https://github.com/blikblum/yarn-storybook/blob/master/README.md for reproduction steps |
I agree with @joshwooding 's suggestion above. However if you reference |
@shilman I dont use builder-vite. Its a requirement of a clean , minimal install of storybook in an empty project. Look at https://github.com/blikblum/yarn-storybook/blob/master/README.md to see the steps i did and the errors along the way. Seems theres a bug somewhere getting that using webcomponents-vite should bot need this
|
Hi @blikblum, thanks for providing the reproduction steps. I can confirm we have some issues with PnP support. Running your reproduction above, I also encountered the After that, it requires the As for your workaround of adding This does the trick:
Side note: when I try the same thing in a webpack project, I get:
So it looks like we have some work to do there too. cc @ndelangen @IanVS |
#20404 is the original issue for the PnP crash. This was a "side quest". You may want to mark one or other as duplicate |
any progress? |
@vplanet-aiden it's in the 7.0 Burndown project and listed as a blocker for a Release Candidate, so the team will be sure to address it soon. As I understand it, the next step is to upgrade verdaccio, so that we can start testing with yarn pnp in our CI. If you'd like to attempt an upgrade and post a PR, that would be a big help! |
Son of a gun!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-beta.24 containing PR #20561 that references this issue. Upgrade today to the
Closing this issue. Please re-open if you think there's still more to do. |
To me, yarn pnp + vite (
and packageExtensions couldn't fix it
|
@deokseong-kim-toss can you share you I think a few |
@shilman we've discussed this a few times before. I think this ticket is also about us getting packages/dependencies in order (which I think we've pretty much completed?), but it's also conflated with the problem listen below, we should discuss. With the way we’ve implemented We’ve fixed a lot of peerDependencies issues we had, most importantly we have But what remains is that we tell users that their Users might run into an error like this: WARN Failed to load preset: "@storybook/react-vite/preset"
ERR! Error: @storybook/core-common tried to access @storybook/react-vite, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.
ERR!
ERR! Required package: @storybook/react-vite (via "@storybook/react-vite/preset")
ERR! Required by: @storybook/core-common@npm:7.0.0-beta.43 What is really happening here is that the storybook core is trying to It cannot have a dependency on it, because then it’d have to have a dependency on every possible builder, every possible framework, every possible preset, every possible addon. This is not feasible. The solution would be to change how storybook’s import { defineConfig } from 'xyz';
import plugin1 from 'xyz-plugin-1';
import plugin2 from 'xyz-plugin-2';
export default defineConfig({
plugins: [plugin1(), plugin2()],
}; This pattern is very versatile, and very robust. Because the imports happen in the root of the project, that’s where the node resolution mechanism will search for the modules. (which is correct). But this is how storybook’s import type { StorybookConfig } from '@storybook/react-vite';
export default {
addons: ['@storybook/addon-1', '@storybook/addon-2'],
} satisfies StorybookConfig; This will result into problems when the users is using We can ask the user to change their import type { StorybookConfig } from '@storybook/react-vite';
export default {
addons: [
path.dirname(require.resolve('@storybook/addon-1/package.json')),
path.dirname(require.resolve('@storybook/addon-2/package.json'))
],
} satisfies StorybookConfig; This will ensure that when storybook tries to |
@ndelangen Sure. import type { StorybookConfig } from '@storybook/react-vite';
const config: StorybookConfig = {
"stories": [
"../src/**/*.mdx",
"../src/**/*.stories.@(js|jsx|ts|tsx)"
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions"
],
"framework": {
"name": "@storybook/react-vite",
"options": {}
},
"docs": {
"autodocs": "tag"
}
};
export default config; nothing is changed since sb init. It also doesn't works without all addons. |
Thanks for the help. I understand PNP does not always make things easy. I am experiencing the same issue as deokseong-kim-toss. It was mentioned that there exists a
My main.ts looks like: /** @type { import('%%path.dirname(require.resolve(path.join('@storybook/react-vite', 'package.json')))%%').StorybookConfig } */
const config = {
"stories": [
"../src/**/*.mdx",
"../src/**/*.stories.@(js|jsx|ts|tsx)"
],
"addons": [
"%%path.dirname(require.resolve(path.join('@storybook/addon-links', 'package.json')))%%",
"%%path.dirname(require.resolve(path.join('@storybook/addon-essentials', 'package.json')))%%",
"%%path.dirname(require.resolve(path.join('@storybook/addon-interactions', 'package.json')))%%"
],
"framework": {
"name": "%%path.dirname(require.resolve(path.join('@storybook/react-vite', 'package.json')))%%",
"options": {}
},
"docs": {
"autodocs": "tag"
}
};
export default config; It's unclear to me what the
If I remove the string quotes and
|
@millsb ouch, that looks like it's close but also very wrong! It should be: /** @type { import('@storybook/react-vite').StorybookConfig } */
const config = {
"stories": [
"../src/**/*.mdx",
"../src/**/*.stories.@(js|jsx|ts|tsx)"
],
"addons": [
path.dirname(require.resolve(path.join('@storybook/addon-links', 'package.json'))),
path.dirname(require.resolve(path.join('@storybook/addon-essentials', 'package.json'))),
path.dirname(require.resolve(path.join('@storybook/addon-interactions', 'package.json'))),
],
"framework": {
"name": path.dirname(require.resolve(path.join('@storybook/react-vite', 'package.json'))),
"options": {}
},
"docs": {
"autodocs": "tag"
}
};
export default config; ☝️ can you try similar adjustments to your |
Thanks. Same issue as before. Looks like its an issue with modules outside of main.ts now.
(Can confirm |
Thanks @ndelangen. Same result as @millsb, so i tried packageExtensions as if that pr is merged
and builder works! but another error comes up in the browser.
|
@deokseong-kim-toss glad you could confirm that the builder is working! I'd suggest hopping into our Discord to get help with that error (discord.gg/storybook), but at first glance, it looks like maybe you're using |
I just discovered a whole lot, trying to setup a yarn pnp sandbox, so we can finally do proper e2e regression tests on this. The storybook CLI tries to find out where some packages are installed, to be able to copy files out (demo files) and do some other stuff. This simply does . not . work . with pnp enabled. It can't work. But I found a proper way to determine where the package IS installed, using the pnp file yarn generates! require('./.pnp.cjs').resolveRequest('@storybook/react/package.json', './'); ...will output the virtual location of the file if it was requested from the root. 🎉 |
That's awesome. If you're able to set up a pnp sandbox, do you think it would be much more work to create a pnpm sandbox as well? |
yes possibly, but I'd need a generator that outputs a pnpm project. |
|
@IanVS I'd love to 🍐 with you on this, or discuss what we could do to resolve this:
|
I can reproduce this problem now:
I first tried to apply a general fix here: Now I'm trying a less risky approach here: |
Son of a gun!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-beta.48 containing PR #21046 that references this issue. Upgrade today to the
|
Is your feature request related to a problem? Please describe
In a clean install of storybook v7 with vite-builder webpack@4 dependency is added to the project
https://github.com/blikblum/yarn-storybook/blob/master/yarn.lock#L2792
Describe the solution you'd like
Remove webpack dependency from @storybook/core-common
Describe alternatives you've considered
No response
Are you able to assist to bring the feature to reality?
no
Additional context
No response
The text was updated successfully, but these errors were encountered: