Skip to content

Commit

Permalink
Merge pull request #25032 from storybookjs/valentin/fix-app-router-in…
Browse files Browse the repository at this point in the history
…-nextjs

Next.js: Fix AppRouterProvider usage

(cherry picked from commit ab4e5ed)
  • Loading branch information
valentinpalkovic authored and storybook-bot committed Nov 29, 2023
1 parent 6536867 commit eed9ddb
Show file tree
Hide file tree
Showing 4 changed files with 25 additions and 14 deletions.
12 changes: 12 additions & 0 deletions code/frameworks/nextjs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,16 @@
"require": "./dist/image-context.js",
"import": "./dist/image-context.mjs"
},
"./dist/routing/app-router-provider": {
"types": "./dist/routing/app-router-provider.d.ts",
"require": "./dist/routing/app-router-provider.js",
"import": "./dist/routing/app-router-provider.mjs"
},
"./dist/routing/app-router-provider-mock": {
"types": "./dist/routing/app-router-provider-mock.d.ts",
"require": "./dist/routing/app-router-provider-mock.js",
"import": "./dist/routing/app-router-provider-mock.mjs"
},
"./preset": {
"types": "./dist/preset.d.ts",
"require": "./dist/preset.js"
Expand Down Expand Up @@ -161,6 +171,8 @@
"./src/images/next-future-image.tsx",
"./src/images/next-legacy-image.tsx",
"./src/images/next-image.tsx",
"./src/routing/app-router-provider.tsx",
"./src/routing/app-router-provider-mock.tsx",
"./src/font/webpack/loader/storybook-nextjs-font-loader.ts",
"./src/swc/next-swc-loader-patch.ts"
],
Expand Down
4 changes: 4 additions & 0 deletions code/frameworks/nextjs/src/dependency-map.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,10 @@ const mapping: Record<string, Record<string, string>> = {
'next/dist/shared/lib/hooks-client-context.shared-runtime':
'next/dist/shared/lib/hooks-client-context',
},
'<13.0.0': {
'@storybook/nextjs/dist/routing/app-router-provider':
'@storybook/nextjs/dist/routing/app-router-provider-mock',
},
'<13.5.0': {
'next/dist/shared/lib/router-context.shared-runtime': 'next/dist/shared/lib/router-context',
'next/dist/shared/lib/head-manager-context.shared-runtime':
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import React from 'react';

// The mock is used for Next.js < 13, where the AppRouterProvider doesn't exist
export const AppRouterProvider: React.FC<React.PropsWithChildren> = ({ children }) => {
return <>{children}</>;
};
17 changes: 3 additions & 14 deletions code/frameworks/nextjs/src/routing/decorator.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import * as React from 'react';
import type { Addon_StoryContext } from '@storybook/types';
import { action } from '@storybook/addon-actions';
// @ts-expect-error Using absolute path import to 1) avoid prebundling and 2) being able to substitute the module for Next.js < 13
// eslint-disable-next-line import/no-extraneous-dependencies
import { AppRouterProvider } from '@storybook/nextjs/dist/routing/app-router-provider';
import { PageRouterProvider } from './page-router-provider';
import type { AppRouterProvider as TAppRouterProvider } from './app-router-provider';
import type { RouteParams, NextAppDirectory } from './types';

const defaultRouterParams: RouteParams = {
Expand All @@ -17,19 +19,6 @@ 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;
Expand Down

0 comments on commit eed9ddb

Please sign in to comment.