NextJS: Fix out-of-the-box babel handling

code/addons/docs/src/preset.ts

@@ -16,12 +16,11 @@ import { loadCsf } from '@storybook/csf-tools';
 // the jsx to transpile mdx, for now there will be a flag for that
 // for more complex solutions we can find alone that we need to add '@babel/plugin-transform-react-jsx'
 type BabelParams = {
-  babelOptions?: any;
   mdxBabelOptions?: any;
   configureJSX?: boolean;
 };
-function createBabelOptions({ babelOptions, mdxBabelOptions, configureJSX }: BabelParams) {
-  const babelPlugins = mdxBabelOptions?.plugins || babelOptions?.plugins || [];
+function createBabelOptions({ mdxBabelOptions, configureJSX }: BabelParams) {
+  const babelPlugins = mdxBabelOptions?.plugins || [];
 
   const filteredBabelPlugins = babelPlugins.filter((p: any) => {
     const name = Array.isArray(p) ? p[0] : p;
@@ -40,7 +39,6 @@ function createBabelOptions({ babelOptions, mdxBabelOptions, configureJSX }: Bab
     // don't use the root babelrc by default (users can override this in mdxBabelOptions)
     babelrc: false,
     configFile: false,
-    ...babelOptions,
     ...mdxBabelOptions,
     plugins,
   };
@@ -65,7 +63,6 @@ async function webpack(
   // it will reuse babel options that are already in use in storybook
   // also, these babel options are chained with other presets.
   const {
-    babelOptions,
     mdxBabelOptions,
     configureJSX = true,
     csfPluginOptions = {},
@@ -100,7 +97,7 @@ async function webpack(
         use: [
           {
             loader: resolvedBabelLoader,
-            options: createBabelOptions({ babelOptions, mdxBabelOptions, configureJSX }),
+            options: createBabelOptions({ mdxBabelOptions, configureJSX }),
           },
           {
             loader: mdxLoader,
@@ -128,7 +125,7 @@ async function webpack(
           use: [
             {
               loader: resolvedBabelLoader,
-              options: createBabelOptions({ babelOptions, mdxBabelOptions, configureJSX }),
+              options: createBabelOptions({ mdxBabelOptions, configureJSX }),
             },
             {
               loader: mdxLoader,
@@ -145,7 +142,7 @@ async function webpack(
           use: [
             {
               loader: resolvedBabelLoader,
-              options: createBabelOptions({ babelOptions, mdxBabelOptions, configureJSX }),
+              options: createBabelOptions({ mdxBabelOptions, configureJSX }),
             },
             {
               loader: mdxLoader,

code/addons/interactions/package.json

@@ -89,7 +89,7 @@
   "devDependencies": {
     "@storybook/jest": "^0.0.10",
     "@storybook/testing-library": "0.0.14-next.0",
-    "@types/node": "^16.18.3",
+    "@types/node": "^16.0.0 || ^18.0.0",
     "formik": "^2.2.9",
     "typescript": "^4.9.3"
   },

code/addons/links/package.json

@@ -79,7 +79,7 @@
     "@storybook/addons": "7.0.0-alpha.50",
     "@storybook/client-logger": "7.0.0-alpha.50",
     "@storybook/core-events": "7.0.0-alpha.50",
-    "@storybook/csf": "0.0.2-next.7",
+    "@storybook/csf": "next",
     "@storybook/router": "7.0.0-alpha.50",
     "@storybook/types": "7.0.0-alpha.50",
     "global": "^4.4.0",

code/addons/storyshots/storyshots-puppeteer/package.json

@@ -34,7 +34,7 @@
   },
   "dependencies": {
     "@axe-core/puppeteer": "^4.2.0",
-    "@storybook/csf": "0.0.2-next.7",
+    "@storybook/csf": "next",
     "@storybook/node-logger": "7.0.0-alpha.50",
     "@storybook/types": "7.0.0-alpha.50",
     "@types/jest-image-snapshot": "^5.1.0",

code/frameworks/angular/package.json

@@ -47,7 +47,7 @@
     "@storybook/node-logger": "7.0.0-alpha.50",
     "@storybook/store": "7.0.0-alpha.50",
     "@storybook/types": "7.0.0-alpha.50",
-    "@types/node": "^16.18.3",
+    "@types/node": "^16.0.0 || ^18.0.0",
     "@types/react": "^16.14.34",
     "@types/react-dom": "^16.9.14",
     "@types/semver": "^7.3.4",

code/frameworks/html-webpack5/package.json

@@ -54,7 +54,7 @@
     "@storybook/core-common": "7.0.0-alpha.50",
     "@storybook/html": "7.0.0-alpha.50",
     "@storybook/preset-html-webpack": "7.0.0-alpha.50",
-    "@types/node": "^16.18.3",
+    "@types/node": "^16.0.0 || ^18.0.0",
     "global": "^4.4.0",
     "react": "16.14.0",
     "react-dom": "16.14.0"

code/frameworks/nextjs/package.json

@@ -59,14 +59,13 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@babel/preset-typescript": "^7.18.6",
     "@storybook/addons": "7.0.0-alpha.50",
     "@storybook/builder-webpack5": "7.0.0-alpha.50",
     "@storybook/core-common": "7.0.0-alpha.50",
     "@storybook/node-logger": "7.0.0-alpha.50",
     "@storybook/preset-react-webpack": "7.0.0-alpha.50",
     "@storybook/react": "7.0.0-alpha.50",
-    "@types/node": "^16.18.3",
+    "@types/node": "^16.0.0 || ^18.0.0",
     "find-up": "^5.0.0",
     "fs-extra": "^9.0.1",
     "image-size": "^1.0.0",

code/frameworks/nextjs/src/preset.ts

@@ -1,17 +1,17 @@
 // https://storybook.js.org/docs/react/addons/writing-presets
 import { dirname, join } from 'path';
 import type { Options, PresetProperty } from '@storybook/types';
-import type { TransformOptions } from '@babel/core';
+import type { ConfigItem, TransformOptions } from '@babel/core';
+import { loadPartialConfig } from '@babel/core';
+import { getProjectRoot } from '@storybook/core-common';
 import { configureConfig } from './config/webpack';
 import { configureCss } from './css/webpack';
 import { configureImports } from './imports/webpack';
 import { configureRouting } from './routing/webpack';
 import { configureStyledJsx } from './styledJsx/webpack';
-import { configureStyledJsxTransforms } from './styledJsx/babel';
 import { configureImages } from './images/webpack';
 import { configureRuntimeNextjsVersionResolution } from './utils';
 import type { 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'))),
@@ -72,10 +72,42 @@ export const config: StorybookConfig['previewAnnotations'] = (entry = []) => [
 // 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);
+  const configPartial = loadPartialConfig({
+    ...baseConfig,
+    filename: `${getProjectRoot()}/__fake__.js`,
+  });
 
-  return baseConfig;
+  const options = configPartial?.options;
+
+  const isPresetConfigItem = (preset: any): preset is ConfigItem => {
+    return typeof preset === 'object' && preset !== null && 'file' in preset;
+  };
+
+  const hasNextBabelConfig = options?.presets?.find(
+    (preset) =>
+      (Array.isArray(preset) && preset[0] === 'next/babel') ||
+      preset === 'next/babel' ||
+      (isPresetConfigItem(preset) && preset.file?.request === 'next/babel')
+  );
+
+  if (!hasNextBabelConfig) {
+    options?.presets?.push('next/babel');
+  }
+
+  const presets = options?.presets?.filter(
+    (preset) =>
+      !(
+        isPresetConfigItem(preset) &&
+        (preset as ConfigItem).file?.request === require.resolve('@babel/preset-react')
+      )
+  );
+
+  return {
+    ...options,
+    presets,
+    babelrc: false,
+    configFile: false,
+  };
 };
 
 export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig, options) => {

code/frameworks/preact-webpack5/package.json

@@ -54,7 +54,7 @@
     "@storybook/core-common": "7.0.0-alpha.50",
     "@storybook/preact": "7.0.0-alpha.50",
     "@storybook/preset-preact-webpack": "7.0.0-alpha.50",
-    "@types/node": "^16.18.3",
+    "@types/node": "^16.0.0 || ^18.0.0",
     "react": "16.14.0",
     "react-dom": "16.14.0"
   },

code/frameworks/react-vite/package.json

@@ -67,7 +67,7 @@
     "vite": "^3.1.3"
   },
   "devDependencies": {
-    "@types/node": "^16.18.3",
+    "@types/node": "^16.0.0 || ^18.0.0",
     "typescript": "^4.9.3",
     "vite": "^3.1.3"
   },

code/frameworks/react-webpack5/package.json

@@ -54,7 +54,7 @@
     "@storybook/builder-webpack5": "7.0.0-alpha.50",
     "@storybook/preset-react-webpack": "7.0.0-alpha.50",
     "@storybook/react": "7.0.0-alpha.50",
-    "@types/node": "^16.18.3"
+    "@types/node": "^16.0.0 || ^18.0.0"
   },
   "devDependencies": {
     "jest-specific-snapshot": "^6.0.0",

code/frameworks/server-webpack5/package.json

@@ -54,7 +54,7 @@
     "@storybook/core-common": "7.0.0-alpha.50",
     "@storybook/preset-server-webpack": "7.0.0-alpha.50",
     "@storybook/server": "7.0.0-alpha.50",
-    "@types/node": "^16.18.3",
+    "@types/node": "^16.0.0 || ^18.0.0",
     "react": "16.14.0",
     "react-dom": "16.14.0"
   },

code/frameworks/svelte-vite/package.json

@@ -67,7 +67,7 @@
     "vite": "^3.1.3"
   },
   "devDependencies": {
-    "@types/node": "^16.18.3",
+    "@types/node": "^16.0.0 || ^18.0.0",
     "typescript": "^4.9.3",
     "vite": "^3.1.3"
   },

code/frameworks/vue-webpack5/package.json

@@ -54,7 +54,7 @@
     "@storybook/core-common": "7.0.0-alpha.50",
     "@storybook/preset-vue-webpack": "7.0.0-alpha.50",
     "@storybook/vue": "7.0.0-alpha.50",
-    "@types/node": "^16.18.3",
+    "@types/node": "^16.0.0 || ^18.0.0",
     "react": "16.14.0",
     "react-dom": "16.14.0"
   },

code/frameworks/vue3-vite/package.json

@@ -65,7 +65,7 @@
     "vue-docgen-api": "^4.40.0"
   },
   "devDependencies": {
-    "@types/node": "^16.18.3",
+    "@types/node": "^16.0.0 || ^18.0.0",
     "typescript": "^4.9.3",
     "vite": "^3.1.3"
   },

code/frameworks/vue3-webpack5/package.json

@@ -54,7 +54,7 @@
     "@storybook/core-common": "7.0.0-alpha.50",
     "@storybook/preset-vue3-webpack": "7.0.0-alpha.50",
     "@storybook/vue3": "7.0.0-alpha.50",
-    "@types/node": "^16.18.3",
+    "@types/node": "^16.0.0 || ^18.0.0",
     "react": "16.14.0",
     "react-dom": "16.14.0"
   },

code/frameworks/web-components-vite/package.json

@@ -64,7 +64,7 @@
     "vite": "3"
   },
   "devDependencies": {
-    "@types/node": "^16.18.3",
+    "@types/node": "^16.0.0 || ^18.0.0",
     "typescript": "^4.9.3",
     "vite": "^3.1.0"
   },

code/frameworks/web-components-webpack5/package.json

@@ -57,7 +57,7 @@
     "@storybook/core-common": "7.0.0-alpha.50",
     "@storybook/preset-web-components-webpack": "7.0.0-alpha.50",
     "@storybook/web-components": "7.0.0-alpha.50",
-    "@types/node": "^16.18.3",
+    "@types/node": "^16.0.0 || ^18.0.0",
     "react": "16.14.0",
     "react-dom": "16.14.0"
   },

code/lib/api/package.json

@@ -48,7 +48,7 @@
     "@storybook/channels": "7.0.0-alpha.50",
     "@storybook/client-logger": "7.0.0-alpha.50",
     "@storybook/core-events": "7.0.0-alpha.50",
-    "@storybook/csf": "0.0.2-next.7",
+    "@storybook/csf": "next",
     "@storybook/router": "7.0.0-alpha.50",
     "@storybook/theming": "7.0.0-alpha.50",
     "@storybook/types": "7.0.0-alpha.50",

code/lib/builder-vite/package.json

@@ -38,7 +38,7 @@
   },
   "devDependencies": {
     "@types/express": "^4.17.13",
-    "@types/node": "^16.18.3",
+    "@types/node": "^16.0.0 || ^18.0.0",
     "typescript": "^4.9.3",
     "vite": "^3.1.3"
   },

code/lib/builder-webpack5/package.json

@@ -69,7 +69,7 @@
     "@storybook/router": "7.0.0-alpha.50",
     "@storybook/store": "7.0.0-alpha.50",
     "@storybook/theming": "7.0.0-alpha.50",
-    "@types/node": "^16.18.3",
+    "@types/node": "^16.0.0 || ^18.0.0",
     "@types/semver": "^7.3.4",
     "babel-loader": "^8.3.0",
     "babel-plugin-named-exports-order": "^0.0.2",

code/lib/channel-websocket/package.json

@@ -50,13 +50,13 @@
   "devDependencies": {
     "typescript": "^4.9.3"
   },
+  "publishConfig": {
+    "access": "public"
+  },
   "bundler": {
     "entries": [
       "./src/index.ts"
     ]
   },
-  "publishConfig": {
-    "access": "public"
-  },
   "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242"
 }

code/lib/client-api/package.json

@@ -44,7 +44,7 @@
   "dependencies": {
     "@storybook/addons": "7.0.0-alpha.50",
     "@storybook/client-logger": "7.0.0-alpha.50",
-    "@storybook/csf": "0.0.2-next.7",
+    "@storybook/csf": "next",
     "@storybook/store": "7.0.0-alpha.50",
     "@storybook/types": "7.0.0-alpha.50",
     "@types/qs": "^6.9.5",

code/lib/codemod/package.json

@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@babel/types": "^7.20.2",
-    "@storybook/csf": "0.0.2-next.7",
+    "@storybook/csf": "next",
     "@storybook/csf-tools": "7.0.0-alpha.50",
     "@storybook/node-logger": "7.0.0-alpha.50",
     "@storybook/types": "7.0.0-alpha.50",

code/lib/core-client/package.json

@@ -42,7 +42,7 @@
     "@storybook/client-api": "7.0.0-alpha.50",
     "@storybook/client-logger": "7.0.0-alpha.50",
     "@storybook/core-events": "7.0.0-alpha.50",
-    "@storybook/csf": "0.0.2-next.7",
+    "@storybook/csf": "next",
     "@storybook/preview-web": "7.0.0-alpha.50",
     "@storybook/store": "7.0.0-alpha.50",
     "@storybook/types": "7.0.0-alpha.50",

code/lib/core-common/package.json

@@ -51,7 +51,7 @@
     "@storybook/types": "7.0.0-alpha.50",
     "@types/babel__core": "^7.1.20",
     "@types/express": "^4.7.0",
-    "@types/node": "^16.18.3",
+    "@types/node": "^16.0.0 || ^18.0.0",
     "@types/pretty-hrtime": "^1.0.0",
     "chalk": "^4.1.0",
     "esbuild": "^0.14.48",

code/lib/core-server/package.json

@@ -39,14 +39,14 @@
     "@storybook/core-client": "7.0.0-alpha.50",
     "@storybook/core-common": "7.0.0-alpha.50",
     "@storybook/core-events": "7.0.0-alpha.50",
-    "@storybook/csf": "0.0.2-next.7",
+    "@storybook/csf": "next",
     "@storybook/csf-tools": "7.0.0-alpha.50",
     "@storybook/docs-mdx": "0.0.1-canary.12433cf.0",
     "@storybook/node-logger": "7.0.0-alpha.50",
     "@storybook/store": "7.0.0-alpha.50",
     "@storybook/telemetry": "7.0.0-alpha.50",
     "@storybook/types": "7.0.0-alpha.50",
-    "@types/node": "^16.18.3",
+    "@types/node": "^16.0.0 || ^18.0.0",
     "@types/node-fetch": "^2.5.7",
     "@types/pretty-hrtime": "^1.0.0",
     "@types/semver": "^7.3.4",