Merge pull request #24841 from storybookjs/fix-nextjs-esm

Next.js: Use ESM instead of CJS

code/addons/actions/package.json

@@ -64,13 +64,9 @@
   },
   "dependencies": {
     "@storybook/global": "^5.0.0",
-    "@types/lodash": "^4.14.167",
     "@types/uuid": "^9.0.1",
     "dequal": "^2.0.2",
-    "lodash": "^4.17.21",
     "polished": "^4.2.2",
-    "telejson": "^7.2.0",
-    "ts-dedent": "^2.0.0",
     "uuid": "^9.0.0"
   },
   "devDependencies": {
@@ -81,10 +77,10 @@
     "@storybook/preview-api": "workspace:*",
     "@storybook/theming": "workspace:*",
     "@storybook/types": "workspace:*",
-    "prop-types": "^15.7.2",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
     "react-inspector": "^6.0.0",
+    "telejson": "^7.2.0",
     "typescript": "~4.9.3"
   },
   "publishConfig": {

code/frameworks/nextjs/package.json

@@ -36,11 +36,7 @@
       "types": "./dist/preset.d.ts",
       "require": "./dist/preset.js"
     },
-    "./preview.js": {
-      "types": "./dist/preview.d.ts",
-      "require": "./dist/preview.js",
-      "import": "./dist/preview.mjs"
-    },
+    "./dist/preview.mjs": "./dist/preview.mjs",
     "./next-image-loader-stub.js": {
       "types": "./dist/next-image-loader-stub.d.ts",
       "require": "./dist/next-image-loader-stub.js",
@@ -136,9 +132,6 @@
     "@next/font": {
       "optional": true
     },
-    "@storybook/addon-actions": {
-      "optional": true
-    },
     "typescript": {
       "optional": true
     },

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

@@ -24,7 +24,8 @@ export function configureNextImport(baseConfig: WebpackConfig) {
     baseConfig.plugins.push(
       new IgnorePlugin({
         // ignore next/dist/shared/lib/hooks-client-context and next/legacy/image imports
-        resourceRegExp: /(next\/dist\/shared\/lib\/hooks-client-context|next\/legacy\/image)$/,
+        resourceRegExp:
+          /(next\/dist\/shared\/lib\/hooks-client-context|next\/dist\/shared\/lib\/hooks-client-context\.shared-runtime|next\/legacy\/image)$/,
       })
     );
   }

code/frameworks/nextjs/src/preset.ts

@@ -69,7 +69,7 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti
 
 export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = []) => [
   ...entry,
-  require.resolve('@storybook/nextjs/preview.js'),
+  join(dirname(require.resolve('@storybook/nextjs/package.json')), 'dist/preview.mjs'),
 ];
 
 // Not even sb init - automigrate - running dev

code/frameworks/nextjs/src/routing/app-router-provider.tsx

@@ -1,48 +1,16 @@
 import React from 'react';
-import type {
-  LayoutRouterContext as TLayoutRouterContext,
-  AppRouterContext as TAppRouterContext,
-  GlobalLayoutRouterContext as TGlobalLayoutRouterContext,
+import {
+  LayoutRouterContext,
+  AppRouterContext,
+  GlobalLayoutRouterContext,
 } from 'next/dist/shared/lib/app-router-context.shared-runtime';
-import type {
-  PathnameContext as TPathnameContext,
-  SearchParamsContext as TSearchParamsContext,
+import {
+  PathnameContext,
+  SearchParamsContext,
 } from 'next/dist/shared/lib/hooks-client-context.shared-runtime';
 import type { FlightRouterState } from 'next/dist/server/app-render/types';
 import type { RouteParams } from './types';
 
-/**
- * Normally dynamic imports are necessary because otherwise
- * older versions of Next.js will throw an error
- * because AppRouterProviders only exists in Next.js > v13
- * Using React.lazy though is currently not supported in SB decorators
- * therefore using the try/catch workaround
- */
-let AppRouterContext: typeof TAppRouterContext;
-let LayoutRouterContext: typeof TLayoutRouterContext;
-let PathnameContext: typeof TPathnameContext;
-let SearchParamsContext: typeof TSearchParamsContext;
-let GlobalLayoutRouterContext: typeof TGlobalLayoutRouterContext;
-
-try {
-  AppRouterContext =
-    require('next/dist/shared/lib/app-router-context.shared-runtime').AppRouterContext;
-  LayoutRouterContext =
-    require('next/dist/shared/lib/app-router-context.shared-runtime').LayoutRouterContext;
-  PathnameContext =
-    require('next/dist/shared/lib/hooks-client-context.shared-runtime').PathnameContext;
-  SearchParamsContext =
-    require('next/dist/shared/lib/hooks-client-context.shared-runtime').SearchParamsContext;
-  GlobalLayoutRouterContext =
-    require('next/dist/shared/lib/app-router-context.shared-runtime').GlobalLayoutRouterContext;
-} catch {
-  AppRouterContext = React.Fragment as any;
-  LayoutRouterContext = React.Fragment as any;
-  PathnameContext = React.Fragment as any;
-  SearchParamsContext = React.Fragment as any;
-  GlobalLayoutRouterContext = React.Fragment as any;
-}
-
 type AppRouterProviderProps = {
   action: (name: string) => (...args: any[]) => void;
   routeParams: RouteParams;
@@ -58,7 +26,11 @@ const getParallelRoutes = (segmentsList: Array<string>): FlightRouterState => {
   return [] as any;
 };
 
-const AppRouterProvider: React.FC<AppRouterProviderProps> = ({ children, action, routeParams }) => {
+export const AppRouterProvider: React.FC<AppRouterProviderProps> = ({
+  children,
+  action,
+  routeParams,
+}) => {
   const { pathname, query, segments = [], ...restRouteParams } = routeParams;
 
   const tree: FlightRouterState = [pathname, { children: getParallelRoutes([...segments]) }];
@@ -121,5 +93,3 @@ const AppRouterProvider: React.FC<AppRouterProviderProps> = ({ children, action,
     </PathnameContext.Provider>
   );
 };
-
-export default AppRouterProvider;

code/frameworks/nextjs/src/routing/decorator.tsx

@@ -1,20 +1,10 @@
 import * as React from 'react';
-// this will be aliased by webpack at runtime (this is just for typing)
-import type { action as originalAction } from '@storybook/addon-actions';
 import type { Addon_StoryContext } from '@storybook/types';
-import AppRouterProvider from './app-router-provider';
-
-import PageRouterProvider from './page-router-provider';
+import { action } from '@storybook/addon-actions';
+import { PageRouterProvider } from './page-router-provider';
+import type { AppRouterProvider as TAppRouterProvider } from './app-router-provider';
 import type { RouteParams, NextAppDirectory } from './types';
 
-let action: typeof originalAction;
-
-try {
-  action = require('@storybook/addon-actions').action;
-} catch {
-  action = () => () => {};
-}
-
 const defaultRouterParams: RouteParams = {
   pathname: '/',
   query: {},
@@ -27,7 +17,23 @@ export const RouterDecorator = (
   const nextAppDirectory =
     (parameters.nextjs?.appDirectory as NextAppDirectory | undefined) ?? false;
 
+  const [AppRouterProvider, setAppRouterProvider] = React.useState<
+    typeof TAppRouterProvider | undefined
+  >();
+
+  React.useEffect(() => {
+    if (!nextAppDirectory) {
+      return;
+    }
+    import('./app-router-provider').then((exports) =>
+      setAppRouterProvider(() => exports.AppRouterProvider)
+    );
+  }, [nextAppDirectory]);
+
   if (nextAppDirectory) {
+    if (!AppRouterProvider) {
+      return null;
+    }
     return (
       <AppRouterProvider
         action={action}

code/frameworks/nextjs/src/routing/page-router-provider.tsx

@@ -9,7 +9,7 @@ type PageRouterProviderProps = {
   globals: Globals;
 };
 
-const PageRouterProvider: React.FC<PageRouterProviderProps> = ({
+export const PageRouterProvider: React.FC<PageRouterProviderProps> = ({
   children,
   action,
   routeParams,
@@ -66,5 +66,3 @@ const PageRouterProvider: React.FC<PageRouterProviderProps> = ({
     {children}
   </RouterContext.Provider>
 );
-
-export default PageRouterProvider;

code/yarn.lock

@@ -5373,17 +5373,13 @@ __metadata:
     "@storybook/preview-api": "workspace:*"
     "@storybook/theming": "workspace:*"
     "@storybook/types": "workspace:*"
-    "@types/lodash": "npm:^4.14.167"
     "@types/uuid": "npm:^9.0.1"
     dequal: "npm:^2.0.2"
-    lodash: "npm:^4.17.21"
     polished: "npm:^4.2.2"
-    prop-types: "npm:^15.7.2"
     react: "npm:^16.8.0"
     react-dom: "npm:^16.8.0"
     react-inspector: "npm:^6.0.0"
     telejson: "npm:^7.2.0"
-    ts-dedent: "npm:^2.0.0"
     typescript: "npm:~4.9.3"
     uuid: "npm:^9.0.0"
   languageName: unknown
@@ -6820,8 +6816,6 @@ __metadata:
   peerDependenciesMeta:
     "@next/font":
       optional: true
-    "@storybook/addon-actions":
-      optional: true
     typescript:
       optional: true
     webpack: