fix(storybook): make sure Storybook can use TypeScript for the config files (#7566)

ISSUES CLOSED: #7515

packages/react/src/migrations/update-13-0-0/webpack5-changes-utils.ts

@@ -11,11 +11,18 @@ import { findNodes } from '@nrwl/workspace/src/utilities/typescript/find-nodes';
 
 export async function migrateToWebPack5(tree: Tree) {
   allReactProjectsWithStorybookConfiguration(tree).forEach((project) => {
-    editProjectMainJs(
+    let storybookConfigFile = `${project.storybookConfigPath}/main.js`;
-      tree,
+    if (!tree.exists(storybookConfigFile)) {
-      `${project.storybookConfigPath}/main.js`,
+      // try to see whether there's a main.ts file
-      project.projectName
+      storybookConfigFile = `${project.storybookConfigPath}/main.ts`;
-    );
+    }
+
+    if (!tree.exists(storybookConfigFile)) {
+      // ok...give up
+      return;
+    }
+
+    editProjectMainJs(tree, storybookConfigFile, project.projectName);
   });
   await formatFiles(tree);
 }

packages/storybook/src/executors/utils.ts

@@ -73,12 +73,28 @@ export function runStorybookSetupCheck(options: CommonNxStorybookConfig) {
 
 function reactWebpack5Check(options: CommonNxStorybookConfig) {
   if (options.uiFramework === '@storybook/react') {
-    // check whether the current Storybook configuration has the webpack 5 builder enabled
+    let storybookConfigFilePath = joinPathFragments(
-    const storybookConfig = readFileSync(
+      options.config.configFolder,
-      joinPathFragments(options.config.configFolder, 'main.js'),
+      'main.js'
-      { encoding: 'utf8' }
     );
 
+    if (!existsSync(storybookConfigFilePath)) {
+      storybookConfigFilePath = joinPathFragments(
+        options.config.configFolder,
+        'main.ts'
+      );
+    }
+
+    if (!existsSync(storybookConfigFilePath)) {
+      // looks like there's no main config file, so skip
+      return;
+    }
+
+    // check whether the current Storybook configuration has the webpack 5 builder enabled
+    const storybookConfig = readFileSync(storybookConfigFilePath, {
+      encoding: 'utf8',
+    });
+
     if (!storybookConfig.includes(`builder: 'webpack5'`)) {
       // storybook needs to be upgraded to webpack 5
       logger.warn(`