From b76ee8e764fd20c7a812a5cc75b1763c8ac3873c Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Thu, 18 Jan 2024 15:08:31 +0100
Subject: [PATCH] Add webpack aliases for OpenTelemetry API

---
 code/frameworks/nextjs/src/aliases/webpack.ts | 11 +++++++++++
 code/frameworks/nextjs/src/preset.ts          |  2 ++
 2 files changed, 13 insertions(+)
 create mode 100644 code/frameworks/nextjs/src/aliases/webpack.ts

diff --git a/code/frameworks/nextjs/src/aliases/webpack.ts b/code/frameworks/nextjs/src/aliases/webpack.ts
new file mode 100644
index 000000000000..ceacfa541a29
--- /dev/null
+++ b/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',
+    },
+  };
+};
diff --git a/code/frameworks/nextjs/src/preset.ts b/code/frameworks/nextjs/src/preset.ts
index 4f54465d5c8a..752f716aa37d 100644
--- a/code/frameworks/nextjs/src/preset.ts
+++ b/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);