Core: Fix package duplication issues by aliasing all storybook packages

examples/cra-kitchen-sink/.storybook/main.js

@@ -1,3 +1,5 @@
+const path = require('path');
+
 module.exports = {
   addons: [
     '@storybook/preset-create-react-app',
@@ -16,4 +18,13 @@ module.exports = {
     '@storybook/addon-jest',
   ],
   stories: ['../src/stories/**/*.stories.@(js|mdx)'],
+  webpackFinal: (config) => {
+    // add monorepo root as a valid directory to import modules from
+    config.resolve.plugins.forEach((p) => {
+      if (Array.isArray(p.appSrcs)) {
+        p.appSrcs.push(path.join(__dirname, '..', '..', '..'));
+      }
+    });
+    return config;
+  },
 };

examples/cra-react15/.storybook/main.js

@@ -1,8 +1,19 @@
+const path = require('path');
+
 module.exports = {
   stories: ['../src/stories/welcome.stories', '../src/stories/**/button.stories.js'],
   addons: [
     '@storybook/preset-create-react-app',
     '@storybook/addon-actions',
     '@storybook/addon-links',
   ],
+  webpackFinal: (config) => {
+    // add monorepo root as a valid directory to import modules from
+    config.resolve.plugins.forEach((p) => {
+      if (Array.isArray(p.appSrcs)) {
+        p.appSrcs.push(path.join(__dirname, '..', '..', '..'));
+      }
+    });
+    return config;
+  },
 };

examples/cra-ts-essentials/.storybook/main.js

@@ -1,3 +1,5 @@
+const path = require('path');
+
 module.exports = {
   stories: ['../src/**/*.stories.tsx'],
   addons: [
@@ -9,4 +11,13 @@ module.exports = {
       },
     },
   ],
+  webpackFinal: (config) => {
+    // add monorepo root as a valid directory to import modules from
+    config.resolve.plugins.forEach((p) => {
+      if (Array.isArray(p.appSrcs)) {
+        p.appSrcs.push(path.join(__dirname, '..', '..', '..'));
+      }
+    });
+    return config;
+  },
 };

examples/cra-ts-kitchen-sink/.storybook/main.ts

@@ -1,4 +1,6 @@
-// @ts-ignore
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Configuration } from 'webpack';
+
 const path = require('path');
 
 module.exports = {
@@ -26,4 +28,15 @@ module.exports = {
     '@storybook/addon-links',
     '@storybook/addon-a11y',
   ],
+  webpackFinal: (config: Configuration) => {
+    // add monorepo root as a valid directory to import modules from
+    config.resolve.plugins.forEach((p) => {
+      // @ts-ignore
+      if (Array.isArray(p.appSrcs)) {
+        // @ts-ignore
+        p.appSrcs.push(path.join(__dirname, '..', '..', '..'));
+      }
+    });
+    return config;
+  },
 };

lib/core/package.json

@@ -52,7 +52,9 @@
     "@babel/register": "^7.8.3",
     "@storybook/addons": "6.0.0-beta.23",
     "@storybook/api": "6.0.0-beta.23",
+    "@storybook/channels": "6.0.0-beta.23",
     "@storybook/channel-postmessage": "6.0.0-beta.23",
+    "@storybook/components": "6.0.0-beta.23",
     "@storybook/client-api": "6.0.0-beta.23",
     "@storybook/client-logger": "6.0.0-beta.23",
     "@storybook/core-events": "6.0.0-beta.23",

lib/core/src/server/manager/manager-webpack.config.js

@@ -6,6 +6,7 @@ import HtmlWebpackPlugin from 'html-webpack-plugin';
 import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
 import PnpWebpackPlugin from 'pnp-webpack-plugin';
 import VirtualModulePlugin from 'webpack-virtual-modules';
+import TerserWebpackPlugin from 'terser-webpack-plugin';
 
 import themingPaths from '@storybook/theming/paths';
 import uiPaths from '@storybook/ui/paths';
@@ -139,7 +140,6 @@ export default async ({
       alias: {
         ...themingPaths,
         ...uiPaths,
-        semver: require.resolve('@storybook/semver'),
       },
       plugins: [
         // Transparently resolve packages via PnP when needed; noop otherwise
@@ -158,6 +158,19 @@ export default async ({
         chunks: 'all',
       },
       runtimeChunk: true,
+      minimizer: isProd
+        ? [
+            new TerserWebpackPlugin({
+              cache: true,
+              parallel: true,
+              sourceMap: true,
+              terserOptions: {
+                mangle: false,
+                keep_fnames: true,
+              },
+            }),
+          ]
+        : [],
     },
   };
 };

lib/core/src/server/preview/iframe-webpack.config.js

@@ -12,6 +12,8 @@ import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 
 import resolveFrom from 'resolve-from';
 
+import themingPaths from '@storybook/theming/paths';
+
 import { createBabelLoader } from './babel-loader-preview';
 import es6Transpiler from '../common/es6Transpiler';
 
@@ -21,6 +23,30 @@ import { toRequireContextString } from './to-require-context';
 import { useBaseTsSupport } from '../config/useBaseTsSupport';
 
 const reactPaths = {};
+
+const storybookPaths = [
+  'addons',
+  'addons',
+  'api',
+  'channels',
+  'channel-postmessage',
+  'components',
+  'core-events',
+  'router',
+  'theming',
+  'semver',
+  'client-api',
+  'client-logger',
+].reduce(
+  (acc, package) => ({
+    ...acc,
+    [`@storybook/${package}`]: path.dirname(
+      resolveFrom(__dirname, `@storybook/${package}/package.json`)
+    ),
+  }),
+  {}
+);
+
 try {
   reactPaths.react = path.dirname(resolveFrom(process.cwd(), 'react/package.json'));
   reactPaths['react-dom'] = path.dirname(resolveFrom(process.cwd(), 'react-dom/package.json'));
@@ -64,13 +90,8 @@ export default async ({
     const match = entryFilename.match(/(.*)-generated-(config|other)-entry.js$/);
     if (match) {
       const configFilename = match[1];
-      const isUsingYarnPnp = typeof process.versions.pnp !== 'undefined';
-      const clientApi = isUsingYarnPnp
-        ? `${require.resolve('@storybook/client-api')}`
-        : '@storybook/client-api';
-      const clientLogger = isUsingYarnPnp
-        ? `${require.resolve('@storybook/client-logger')}`
-        : '@storybook/client-logger';
+      const clientApi = storybookPaths['@storybook/client-api'];
+      const clientLogger = storybookPaths['@storybook/client-logger'];
 
       virtualModuleMapping[entryFilename] = interpolate(entryTemplate, {
         configFilename,
@@ -159,8 +180,8 @@ export default async ({
       extensions: ['.mjs', '.js', '.jsx', '.ts', '.tsx', '.json', '.cjs'],
       modules: ['node_modules'].concat(raw.NODE_PATH || []),
       alias: {
-        'babel-runtime/core-js/object/assign': require.resolve('core-js/es/object/assign'),
-        semver: require.resolve('@storybook/semver'),
+        ...themingPaths,
+        ...storybookPaths,
         ...reactPaths,
       },
 
@@ -177,17 +198,19 @@ export default async ({
         chunks: 'all',
       },
       runtimeChunk: true,
-      minimizer: [
-        new TerserWebpackPlugin({
-          cache: true,
-          parallel: true,
-          sourceMap: true,
-          terserOptions: {
-            mangle: false,
-            keep_fnames: true,
-          },
-        }),
-      ],
+      minimizer: isProd
+        ? [
+            new TerserWebpackPlugin({
+              cache: true,
+              parallel: true,
+              sourceMap: true,
+              terserOptions: {
+                mangle: false,
+                keep_fnames: true,
+              },
+            }),
+          ]
+        : [],
     },
     performance: {
       hints: isProd ? 'warning' : false,