storybook: TypeScript 'private name ' error in Stories

I’m getting this error in VSCode, on this entire block:

Default export of the module has or is using private name 'Props'.ts(4082)

The only way I’ve found to get rid of it is to remove the component line from the block.

export default {
	title: 'Atoms/SVGs',
	component: TimesSvg,
	args: {
		color: '#000000',
		size: 12,
	},
	argTypes: {
		color: { control: 'color' },
		size: { control: 'range' },
  },
  decorators: [(Story: any) => (
		<Decorator>
			<Story />
		</Decorator>
	)],
}

Anyone have a clue how to resolve this error?

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 2
Comments: 15

Most upvoted comments

In my case I just exported the interface Props and this was gone.

Like:

export interface Props {
  color: string
  size: number
}

+80

danielbeutner on Oct 20, 2021

@danielbeutner Thanks. it did the trick. However, make sure you don’t export two interfaces with the same name from different modules or you’ll get a different error

AliakbarSu on Feb 6, 2022

I feel we shouldn’t have to explicitly export the props interface just because Storybook is complaining about it. Is there any alternative that doesn’t involve modifying production code to make Storybook happy?

dani-mp on Jan 6, 2023

I noticed this is closed but I am having this issue in a mono repo with a structure like

packageA

has its own viteconfig, ts config etc

pacakgeB

has its own viteconfig, ts config etc

where packageA uses project references to reference packageB packageB’s tsconfig is thus using the composite: true flag, among others, and i get this typescript error

Default export of the module has or is using private name 'nameOfFile'.ts(4082)

i can change it to export interface or change the interface to a type and it goes away but it feels like i’m either covering up an issue with storybook, typescript or how i’ve configured the project

if i make composite: false it will not throw this error however the typescript build for packageA (which references packageB) will fail saying packageB must have composite: true

hoping someone can help me understand the best way to handle this?

andrewmelnyk on Mar 20, 2023

Agree with @dani-mp. We shouldn’t increase the API surface area for consumers of a component just to pass a TS error. I’m seeing this error in a slightly different format:

// MyComponent.tsx
import type { SomeProps } from "./foo"

type PrivateMyComponentProps = {
  bar: "baz"
}

export type MyComponentProps = SomeProps & PrivateMyComponentProps

The error: Default export of the module has or is using private name ‘PrivateMyComponentProps’.

I don’t want to export many types per component, just the “root” one.

MarceloPrado on Jan 13, 2023