diff --git a/packages/storybook-base/src/config/baseConfig.ts b/packages/storybook-base/src/config/baseConfig.ts index 30f0fb4cf16..baf8009acc6 100644 --- a/packages/storybook-base/src/config/baseConfig.ts +++ b/packages/storybook-base/src/config/baseConfig.ts @@ -18,13 +18,14 @@ */ import type { StorybookConfig } from "@storybook/react-webpack5"; +import * as path from "path"; export const baseConfig: (webpackEnv: { transpileOnly: boolean; sourceMaps: boolean }) => StorybookConfig = ( webpackEnv ) => { console.log("Storybook base :: Webpack env :: transpileOnly: " + webpackEnv.transpileOnly); console.log("Storybook base :: Webpack env :: sourceMap: " + webpackEnv.sourceMaps); - + console.log(require.resolve("@storybook/addon-controls")); return { typescript: { check: true, @@ -42,14 +43,17 @@ export const baseConfig: (webpackEnv: { transpileOnly: boolean; sourceMaps: bool defaultName: "Overview", }, addons: [ - "@storybook/addon-controls", - "@storybook/addon-docs", - "@storybook/addon-highlight", - "@storybook/addon-links", - "@storybook/addon-measure", - "@storybook/addon-outline", - "@storybook/addon-toolbars", - "@storybook/addon-viewport", + // Do not use addon package names directly, + // due to the way `pnpm` structures node_modules directories, + // we need to require them here, so that only `storybook-base` needs to declare them. + path.dirname(require.resolve("@storybook/addon-controls/package.json")), + path.dirname(require.resolve("@storybook/addon-docs/package.json")), + path.dirname(require.resolve("@storybook/addon-highlight/package.json")), + path.dirname(require.resolve("@storybook/addon-links/package.json")), + path.dirname(require.resolve("@storybook/addon-measure/package.json")), + path.dirname(require.resolve("@storybook/addon-outline/package.json")), + path.dirname(require.resolve("@storybook/addon-toolbars/package.json")), + path.dirname(require.resolve("@storybook/addon-viewport/package.json")), ], webpackFinal: async (config) => { if (process.env.STORYBOOK_BASE_WRAPPER_INTERNAL__liveReload) {