Core: Fix monorepo compatibility

[merceyz]

Issue

Storybook doesn't work correctly in monorepos with both node_modules (Yarn 1/2) and PnP (Yarn 2) because it's trying to require the addons declared in .storybook/main.js from @storybook/core instead of requiring them on behalf of the config.

The e2e tests currently pass because Yarn has a compatability feature, called fallbackMode, that allows dependencies to require top-level dependencies without declaring them as their own. In a monorepo this fails as the top level no longer declares these dependencies, the workspace does, and under the node_modules linker the addons are not guaranteed to be hoisted to the same level as @storybook/core.

What I did

• Disabled the fallbackMode to highlight the issue in the e2e tests https://yarnpkg.com/configuration/yarnrc#pnpFallbackMode
• Resolve preset relative to config
• @gaetanmaisse - Fix issue with preset name checks as they are now resolved path and no more simple names.

How to test

Disable the fallbackMode and try to use storybook in a PnP project

Extra

cc @gaetanmaisse since you worked on PnP compatability

[gaetanmaisse]

Thanks @merceyz, this looks interesting! I will deep dive in this when I will come back from holidays in 10 days.

[gaetanmaisse]

@merceyz All green! 🎉 Do you have something to add or we can open the PR?

[merceyz]

@gaetanmaisse Nope, all good, thanks for finding the issue with the CRA preset 🎉

[merceyz]

Note to whomever merges this: You should use Squash and Merge since the commit history is a bit messy here

---

@gaetanmaisse NIT on the title: This isn't exclusive to Yarn monorepos, it fixes monorepos using pnpm / npm + lerna as well

[shilman]

@merceyz no worries about the commit history. we don't use squash merges in this project! 😁

[merceyz]

we don't use squash merges in this project

That makes the commit history really hard to read but alright

[khats]

How to resolve preset relative to storybook installed folder, but not config?
there is following issue after resolving preset relative to config:
storybook installed under ./build/storybook . one of monorepo packages locates in ./monorepo-pack1 and has ./monorepo-pack1/./storybook/main.js with enabled addon: @storybook/addon-essentials . There is symlink to start-storybook from ./monorepo-pack1 to ./build/storybook/node_modules/@storybook/react .

After changes in this pull request storybook tries to look ./monorepo-pack1/node_modules/@storybook/addon-essentials, but expected for me is ./build/storybook/node_modules/@storybook/addon-essentials where is storybook and other addons installed.
I want to have different configurations for monorepo for each sub project, but don't want to add @storybook/addon-essentials for each project as devDependency

[merceyz]

Resolve the presets upfront yourself using require.resolve

[khats]

@merceyz thank your for answer
After changing addon name in main.js from @storybook/addon-essentials to require.resolve(path.join(__dirname,"../../build/storybook/node_modules/@storybook/addon-essentials")) there is no more error Addon value should end in /register OR it should be a valid preset and addon(viewports) works, but i have warning
Expected '@storybook/addon-docs' to be listed before '@storybook/addon-controls' (or '@storybook/addon-essentials'). Check your main.js? https://github.com/storybookjs/storybook/issues/11442

[khats]

in case of using addon-essentials with custom full path like: require.resolve("../..build/storybook/node_modules/@storybook/addon-essentials") ensureDocsBeforeControls fails because expects that name of the addon will start with "@storybook/addon-essentials". Looks like fix could be not using name.startsWith(addon) for finding addon, but name.includes(addon)

upd: i have found same implementation already done
d5efc50