### Describe the bug We have a `noSSR` util used for some components that should always be rendered client-side. We use the util to wrap the export so that the consumer can just import the module and use it. This also allows us to specify a skeleton in the actual module. However when writing a story for such a component that is exported with the wrapper and using the `@storybook/nextjs` framework we get an error and storybook isn't usable. The error message we get is: ``` @monorepo/app:storybook TypeError: /home/fredrik/code/monorepo/apps/app/src/utils/noSSR.tsx: Cannot read properties of undefined (reading 'name') @monorepo/app:storybook at /home/fredrik/code/monorepo/node_modules/@storybook/nextjs/dist/preset.js:128:32 @monorepo/app:storybook at Array.forEach () @monorepo/app:storybook at /home/fredrik/code/monorepo/node_modules/@storybook/nextjs/dist/preset.js:126:22 @monorepo/app:storybook at Array.forEach () @monorepo/app:storybook at PluginPass.ImportDeclaration (/home/fredrik/code/monorepo/node_modules/@storybook/nextjs/dist/preset.js:108:39) @monorepo/app:storybook at newFn (/home/fredrik/code/monorepo/node_modules/@babel/traverse/lib/visitors.js:149:21) @monorepo/app:storybook at NodePath._call (/home/fredrik/code/monorepo/node_modules/@babel/traverse/lib/path/context.js:45:20) @monorepo/app:storybook at NodePath.call (/home/fredrik/code/monorepo/node_modules/@babel/traverse/lib/path/context.js:35:17) @monorepo/app:storybook at NodePath.visit (/home/fredrik/code/monorepo/node_modules/@babel/traverse/lib/path/context.js:81:31) @monorepo/app:storybook at TraversalContext.visitQueue (/home/fredrik/code/monorepo/node_modules/@babel/traverse/lib/context.js:86:16) @monorepo/app:storybook at TraversalContext.visitMultiple (/home/fredrik/code/monorepo/node_modules/@babel/traverse/lib/context.js:61:17) @monorepo/app:storybook at TraversalContext.visit (/home/fredrik/code/monorepo/node_modules/@babel/traverse/lib/context.js:107:19) @monorepo/app:storybook at traverseNode (/home/fredrik/code/monorepo/node_modules/@babel/traverse/lib/traverse-node.js:18:17) @monorepo/app:storybook at NodePath.visit (/home/fredrik/code/monorepo/node_modules/@babel/traverse/lib/path/context.js:87:52) @monorepo/app:storybook at TraversalContext.visitQueue (/home/fredrik/code/monorepo/node_modules/@babel/traverse/lib/context.js:86:16) @monorepo/app:storybook at TraversalContext.visitSingle (/home/fredrik/code/monorepo/node_modules/@babel/traverse/lib/context.js:65:19) @monorepo/app:storybook at TraversalContext.visit (/home/fredrik/code/monorepo/node_modules/@babel/traverse/lib/context.js:109:19) @monorepo/app:storybook at traverseNode (/home/fredrik/code/monorepo/node_modules/@babel/traverse/lib/traverse-node.js:18:17) @monorepo/app:storybook at traverse (/home/fredrik/code/monorepo/node_modules/@babel/traverse/lib/index.js:49:34) @monorepo/app:storybook at transformFile (/home/fredrik/code/monorepo/node_modules/@babel/core/lib/transformation/index.js:81:29) @monorepo/app:storybook at transformFile.next () @monorepo/app:storybook at run (/home/fredrik/code/monorepo/node_modules/@babel/core/lib/transformation/index.js:24:12) @monorepo/app:storybook at run.next () @monorepo/app:storybook at transform (/home/fredrik/code/monorepo/node_modules/@babel/core/lib/transform.js:22:41) @monorepo/app:storybook at transform.next () @monorepo/app:storybook at step (/home/fredrik/code/monorepo/node_modules/gensync/index.js:261:32) @monorepo/app:storybook at /home/fredrik/code/monorepo/node_modules/gensync/index.js:273:13 @monorepo/app:storybook at async.call.result.err.err (/home/fredrik/code/monorepo/node_modules/gensync/index.js:223:11) @monorepo/app:storybook at /home/fredrik/code/monorepo/node_modules/gensync/index.js:189:28 @monorepo/app:storybook at /home/fredrik/code/monorepo/node_modules/@babel/core/lib/gensync-utils/async.js:68:7 @monorepo/app:storybook at /home/fredrik/code/monorepo/node_modules/gensync/index.js:113:33 @monorepo/app:storybook at step (/home/fredrik/code/monorepo/node_modules/gensync/index.js:287:14) @monorepo/app:storybook at /home/fredrik/code/monorepo/node_modules/gensync/index.js:273:13 @monorepo/app:storybook at async.call.result.err.err (/home/fredrik/code/monorepo/node_modules/gensync/index.js:223:11) @monorepo/app:storybook at processResult (/home/fredrik/code/monorepo/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:569:23) @monorepo/app:storybook at /home/fredrik/code/monorepo/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:647:9 @monorepo/app:storybook at /home/fredrik/code/monorepo/node_modules/loader-runner/lib/LoaderRunner.js:361:14 @monorepo/app:storybook at /home/fredrik/code/monorepo/node_modules/loader-runner/lib/LoaderRunner.js:227:14 @monorepo/app:storybook at context.callback (/home/fredrik/code/monorepo/node_modules/loader-runner/lib/LoaderRunner.js:116:16) @monorepo/app:storybook at /home/fredrik/code/monorepo/node_modules/babel-loader/lib/index.js:37:108 ``` It works fine with the old `storybook-addon-next`/`storybook-addon-next-router` which we are currently using, but we'd like to migrate to the new `@storybook/nextjs` framework. Versions of react, next and storybook (yes I know they are open, but the written version is what we have in our `yarn.lock` atm): ```json "next": "^13.4.3", "next-compose-plugins": "^2.2.1", "next-i18next": "^13.2.2", "next-seo": "^6.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", "@storybook/addon-actions": "^7.0.18", "@storybook/addon-essentials": "^7.0.18", "@storybook/addon-interactions": "^7.0.18", "@storybook/addon-links": "^7.0.18", "@storybook/addon-postcss": "^2.0.0", "@storybook/addon-styling": "^1.0.6", "@storybook/nextjs": "^7.0.18", "storybook": "^7.0.18", ``` ### To Reproduce `dummy.tsx`: ```typescript import dynamic, { type DynamicOptions } from 'next/dynamic' const noSSR = ( component: React.FC, dynamicOptions?: Omit, 'ssr'>, ): React.ComponentType => dynamic(() => Promise.resolve(component), { ...dynamicOptions, ssr: false }) export type DummyProps = { message: string } const DummyCSR: React.FC = ({ message }) => ( <>

Client-side rendered message:

{message}

) export const Dummy = noSSR(DummyCSR) ``` `dummy.stories.tsx`: ```typescript import type { Meta, StoryObj } from '@storybook/react' import { Dummy } from './dummy' const meta: Meta = { title: 'Dummy', component: Dummy, } export default meta type Story = StoryObj export const Basic: Story = {} ``` Storybook `main.ts`: ```typescript import { loadEnvConfig } from '@next/env' import type { StorybookConfig } from '@storybook/nextjs' import path from 'path' loadEnvConfig(path.join(__dirname, '..'), (process.env as any).ISDEV || false) const config: StorybookConfig = { stories: [path.join(__dirname, '../src/**/*.stories.tsx')], staticDirs: [path.join(__dirname, 'public'), path.join(__dirname, '../public')], addons: [ '@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions', '@storybook/addon-styling', ], framework: { name: '@storybook/nextjs', options: {} }, core: {}, features: { storyStoreV7: true }, typescript: { reactDocgen: 'react-docgen-typescript', }, docs: { autodocs: false, }, } export default config ``` ### System ```shell Environment Info: System: OS: Linux 6.3 Arch Linux CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz Binaries: Node: 18.16.0 - /run/user/1000/fnm_multishells/3666_1685682003568/bin/node Yarn: 1.22.17 - /usr/bin/yarn npm: 9.5.1 - /run/user/1000/fnm_multishells/3666_1685682003568/bin/npm Browsers: Firefox: 113.0.2 ``` ### Additional context _No response_

[Bug]: @storybook/nextjs unable to create story for components exported with next/dynamic wrapper #22887

Company

Community

Support

Connect