provide babel preset typescript out of the box

code/frameworks/nextjs/package.json

@@ -58,6 +58,7 @@
     "prepare": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
+    "@babel/preset-typescript": "^7.18.6",
     "@storybook/addons": "7.0.0-alpha.38",
     "@storybook/builder-webpack5": "7.0.0-alpha.38",
     "@storybook/core-common": "7.0.0-alpha.38",

code/frameworks/nextjs/src/config/babel.ts

@@ -0,0 +1,12 @@
+import { TransformOptions } from '@babel/core';
+
+export const configureTypescript = async (baseConfig: TransformOptions) => {
+  // TODO: add a check so we only add this in typescript projects
+  const isTypescript = true;
+
+  baseConfig.presets ||= [];
+
+  if (isTypescript && !baseConfig.presets.includes('@babel/preset-typescript')) {
+    baseConfig.presets.push('@babel/preset-typescript');
+  }
+};

code/frameworks/nextjs/src/imports/webpack.ts

@@ -3,7 +3,14 @@ import { loadConfig } from 'tsconfig-paths';
 import { Configuration as WebpackConfig } from 'webpack';
 
 export const configureImports = (baseConfig: WebpackConfig): void => {
-  const configLoadResult = loadConfig();
+  let configLoadResult;
+
+  try {
+    configLoadResult = loadConfig();
+  } catch (err) {
+    // possibly not a typescript project, or project is missing baseUrl
+    return;
+  }
 
   if (
     configLoadResult.resultType === 'failed' ||
@@ -20,6 +27,6 @@ export const configureImports = (baseConfig: WebpackConfig): void => {
     new TsconfigPathsPlugin({
       configFile: configLoadResult.configFileAbsolutePath,
       extensions: ['.js', '.jsx', '.ts', '.tsx'],
-    })
+    }) as any
   );
 };

code/frameworks/nextjs/src/preset.ts

@@ -11,6 +11,7 @@ import { configureStyledJsxTransforms } from './styledJsx/babel';
 import { configureImages } from './images/webpack';
 import { configureRuntimeNextjsVersionResolution } from './utils';
 import { FrameworkOptions, StorybookConfig } from './types';
+import { configureTypescript } from './config/babel';
 
 export const addons: PresetProperty<'addons', StorybookConfig> = [
   dirname(require.resolve(join('@storybook/preset-react-webpack', 'package.json'))),
@@ -67,8 +68,15 @@ export const config: StorybookConfig['previewAnnotations'] = (entry = []) => [
   require.resolve('@storybook/nextjs/preview.js'),
 ];
 
-export const babel = async (config: TransformOptions): Promise<TransformOptions> =>
+// Not even sb init - automigrate - running dev
-  configureStyledJsxTransforms(config);
+// You're using a version of Nextjs prior to v10, which is unsupported by this framework.
+
+export const babel = async (baseConfig: TransformOptions): Promise<TransformOptions> => {
+  configureTypescript(baseConfig);
+  configureStyledJsxTransforms(baseConfig);
+
+  return baseConfig;
+};
 
 export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig, options) => {
   const frameworkOptions = await options.presets.apply<FrameworkOptions>('frameworkOptions');

code/frameworks/nextjs/src/styledJsx/babel.ts

@@ -1,25 +1,9 @@
-import { TransformOptions, loadPartialConfigAsync } from '@babel/core';
+import { TransformOptions } from '@babel/core';
 
-export const configureStyledJsxTransforms = async (
+export const configureStyledJsxTransforms = async (baseConfig: TransformOptions) => {
-  config: TransformOptions
+  baseConfig.plugins ||= [];
-): Promise<TransformOptions> =>
-  (await hasCustomBabelFile())
-    ? // the babel loader will pick up the custom
-      // config file
-      config
-    : {
-        ...config,
-        plugins: [...(config.plugins ?? []), 'styled-jsx/babel'],
-      };
 
-const hasCustomBabelFile = async () => {
+  if (!baseConfig.plugins.includes('styled-jsx/babel')) {
-  const config = await loadPartialConfigAsync({
+    baseConfig.plugins.push('styled-jsx/babel');
-    // in order to load babel config, we need to give babel a file
+  }
-    // we just choose the project's package.json cuz we know it has
-    // to be present
-    // filename is resolved relative to the root (defaulted to process.cwd())
-    // https://babeljs.io/docs/en/options#filename
-    filename: './package.json',
-  });
-  return config?.babelrc || config?.config;
 };

code/yarn.lock

@@ -2093,7 +2093,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-typescript@npm:^7.12.7, @babel/preset-typescript@npm:^7.13.0, @babel/preset-typescript@npm:^7.16.7":
+"@babel/preset-typescript@npm:^7.12.7, @babel/preset-typescript@npm:^7.13.0, @babel/preset-typescript@npm:^7.16.7, @babel/preset-typescript@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/preset-typescript@npm:7.18.6"
   dependencies:
@@ -7925,6 +7925,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/nextjs@workspace:frameworks/nextjs"
   dependencies:
+    "@babel/preset-typescript": ^7.18.6
     "@storybook/addon-actions": 7.0.0-alpha.38
     "@storybook/addons": 7.0.0-alpha.38
     "@storybook/builder-webpack5": 7.0.0-alpha.38