fix(storybook): install core-js for non-vite libs (#18115)

packages/react/src/generators/storybook-configuration/configuration.ts

@@ -41,15 +41,16 @@ export async function storybookConfigurationGenerator(
     typeof import('@nx/storybook')
   >('@nx/storybook', nxVersion);
 
-  let bundler = 'vite';
+  let uiFramework = '@storybook/react-vite';
   const projectConfig = readProjectConfiguration(host, schema.name);
 
   if (
-    projectConfig.projectType === 'application' &&
+    projectConfig.targets['build']?.executor === '@nx/webpack:webpack' ||
-    (projectConfig.targets['build']?.executor === '@nx/webpack:webpack' ||
+    projectConfig.targets['build']?.executor === '@nrwl/webpack:webpack' ||
-      projectConfig.targets['build']?.executor === '@nrwl/webpack:webpack')
+    projectConfig.targets['build']?.executor === '@nx/rollup:rollup' ||
+    projectConfig.targets['build']?.executor === '@nrwl/rollup:rollup'
   ) {
-    bundler = 'webpack';
+    uiFramework = '@storybook/react-webpack5';
   }
 
   const installTask = await configurationGenerator(host, {
@@ -61,10 +62,7 @@ export async function storybookConfigurationGenerator(
     tsConfiguration: schema.tsConfiguration ?? true, // default is true
     interactionTests: schema.interactionTests ?? true, // default is true
     configureStaticServe: schema.configureStaticServe,
-    uiFramework:
+    uiFramework: uiFramework as any, // cannot import UiFramework7 type dynamically
-      bundler === 'vite'
-        ? '@storybook/react-vite'
-        : '@storybook/react-webpack5',
     skipFormat: true,
   });
 

packages/storybook/src/generators/configuration/configuration.spec.ts

@@ -166,6 +166,10 @@ describe('@nx/storybook:configuration for Storybook v7', () => {
       expect(
         tree.read('libs/test-ui-lib2/tsconfig.storybook.json', 'utf-8')
       ).toMatchSnapshot();
+
+      expect(
+        readJson(tree, 'package.json').devDependencies['core-js']
+      ).toBeTruthy();
     });
 
     it('should generate TS config for project if tsConfiguration true', async () => {
@@ -197,6 +201,10 @@ describe('@nx/storybook:configuration for Storybook v7', () => {
         readJson(tree, 'package.json').devDependencies['@storybook/test-runner']
       ).toBeTruthy();
 
+      expect(
+        readJson(tree, 'package.json').devDependencies['core-js']
+      ).toBeTruthy();
+
       expect(
         readJson(tree, 'package.json').devDependencies[
           '@storybook/testing-library'

packages/storybook/src/generators/configuration/configuration.ts

@@ -35,6 +35,7 @@ import {
   storybookMajorVersion,
 } from '../../utils/utilities';
 import {
+  coreJsVersion,
   nxVersion,
   storybookJestVersion,
   storybookTestingLibraryVersion,
@@ -191,6 +192,13 @@ export async function configurationGenerator(
     devDeps['@nx/web'] = nxVersion;
   }
 
+  if (
+    projectType !== 'application' &&
+    schema.uiFramework === '@storybook/react-webpack5'
+  ) {
+    devDeps['core-js'] = coreJsVersion;
+  }
+
   tasks.push(addDependenciesToPackageJson(tree, {}, devDeps));
 
   if (!schema.skipFormat) {

packages/storybook/src/utils/versions.ts

@@ -10,3 +10,5 @@ export const tsNodeVersion = '10.9.1';
 export const storybookVersion = '^7.0.24';
 export const reactVersion = '^18.2.0';
 export const viteVersion = '~4.3.9';
+
+export const coreJsVersion = '^3.6.5';