Unexpected token 'default' - Storing sub-components as properties on Components

[CodeSmith32]

EDIT: Skip to end. This issue was fixed, but the dependency version hasn't been updated.

Coming here from this Storybook issue

This package appears to generate invalid code for the following scenario (code that a try catch does not catch):

When I export a React component as default, but also export another React component that is a property on the first component, e.g.:

import React from "react"

export default function Test({children}:React.ComponentProps<"div">) {
	return (
		<div className="test">
			{children}
		</div>
	)
}

export function Sub({children}:React.ComponentProps<"div">) {
	return (
		<div className="sub">
			{children}
		</div>
	)
}

Test.Sub = Sub;

The issue trickles down to generating the following code, which throws a syntax error and completely fails to load – try catch doesn't help – due to the default.Sub.* lines in the middle block:

try {
    // @ts-ignore
    test.displayName = "test";
    // @ts-ignore
    test.__docgenInfo = { "description": "", "displayName": "test", "props": {} };
}
catch (__react_docgen_typescript_loader_error) { }
try {
    // @ts-ignore
    default.Sub.displayName = "default.Sub";
    // @ts-ignore
    default.Sub.__docgenInfo = { "description": "", "displayName": "default.Sub", "props": {} };
}
catch (__react_docgen_typescript_loader_error) { }
try {
    // @ts-ignore
    Sub.displayName = "Sub";
    // @ts-ignore
    Sub.__docgenInfo = { "description": "", "displayName": "Sub", "props": {} };
}
catch (__react_docgen_typescript_loader_error) { }

When logging the value of componentDocs assigned in index.ts: 95 of this package, I'm seeing default.Sub as one of the 'documentable' exports:

[
  {
    tags: {},
    filePath: 'D:/Work/CiviLink-Software/civilink-vendor/civilink/stories/test.tsx',
    description: '',
    displayName: 'test',
    methods: [],
    props: {}
  },
  {
    tags: {},
    filePath: 'D:/Work/CiviLink-Software/civilink-vendor/civilink/stories/test.tsx',
    description: '',
    displayName: 'default.Sub',  // --------------------------------
    methods: [],
    props: {}
  },
  {
    tags: {},
    filePath: 'D:/Work/CiviLink-Software/civilink-vendor/civilink/stories/test.tsx',
    description: '',
    displayName: 'Sub',
    methods: [],
    props: {}
  }
]

I apologize if this issue is actually with the react-docgen-typescript package. It seems like it, but I couldn't be sure.

My guess is that it is, and that it's in the parseWithProgramProvider method, probably somewhere around the processing of components after collecting the module exports:
https://github.com/styleguidist/react-docgen-typescript/blob/master/src/parser.ts#L1392

[CodeSmith32]

I'm able to suppress the issue by modifying index.ts lines 95 - 98 to filter out this default.* case:

const componentDocs = docGenParser.parseWithProgramProvider(
    id,
    () => tsProgram,
).filter( // filter out 'default.*' case
    componentDoc => !componentDoc.displayName.startsWith("default.")
);

Not sure if this is the right solution, or if a better solution would be to prevent react-docgen-typescript from generating this in the componentDocs in the first place..?

[CodeSmith32]

Ok, I'm confirming that this bug was in react-docgen-typescript v2.2.2, but was fixed for v2.2.3 as I can see here:
https://github.com/styleguidist/react-docgen-typescript/blob/master/src/parser.ts#L1431

So the problem is just a dependency version issue: this plugin (vite-plugin-react-docgen-typescript) is using v2.2.2:
https://github.com/joshwooding/vite-plugin-react-docgen-typescript/blob/main/packages/vite-plugin-react-docgen-typescript/package.json#L34

Please update the dependency to v2.2.3 so this is no longer an issue.

Thanks!

[CodeSmith32]

..Or maybe at least start by pushing it to npm? Is it maybe not stable, or is there another reason that it hasn't been?

[ekilah]

@pvasek - I see you just updated the package.json on react-docgen-typescript to version 2.3.0 yesterday, but it isn't on NPM yet. styleguidist/react-docgen-typescript@6803c92

I just happened to hit the issue @CodeSmith32 described above today, coincidentally. Is this fixed (to your knowledge) and will 2.3.0 be on NPM soon?

Edit: asked here, also: styleguidist/react-docgen-typescript#505