Fix addon reoslution for storybook

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) {