Merge pull request #25652 from storybookjs/valentin/add-next-js-alias

Next.js: Add webpack aliases for OpenTelemetry API

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

@@ -0,0 +1,11 @@
+import type { Configuration as WebpackConfig } from 'webpack';
+
+export const configureAliases = (baseConfig: WebpackConfig): void => {
+  baseConfig.resolve = {
+    ...(baseConfig.resolve ?? {}),
+    alias: {
+      ...(baseConfig.resolve?.alias ?? {}),
+      '@opentelemetry/api': 'next/dist/compiled/@opentelemetry/api',
+    },
+  };
+};

code/frameworks/nextjs/src/preset.ts

@@ -21,6 +21,7 @@ import { configureNodePolyfills } from './nodePolyfills/webpack';
 import { configureSWCLoader } from './swc/loader';
 import { configureBabelLoader } from './babel/loader';
 import { configureFastRefresh } from './fastRefresh/webpack';
+import { configureAliases } from './aliases/webpack';
 
 export const addons: PresetProperty<'addons'> = [
   dirname(require.resolve(join('@storybook/preset-react-webpack', 'package.json'))),
@@ -161,6 +162,7 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig,
   configureImages(baseConfig, nextConfig);
   configureStyledJsx(baseConfig);
   configureNodePolyfills(baseConfig);
+  configureAliases(baseConfig);
 
   if (isDevelopment) {
     configureFastRefresh(baseConfig);