Open CodeSmith32 opened 10 months ago
So, I searched for __react_docgen_typescript_loader_error
, and the issue is found in the following module:
@joshwooding/vite-plugin-react-docgen-typescript
It appears inside the dist/chunks/generate.[cjs|mjs]
files which appear to be an AST tree filter, which makes sense...
Doing a little digging and in the dist/index
file, within the reactDocgenTypescript
function, I logged the componentDocs
variable to find that it includes default.Sub
in the displayName
:
[
{
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 did track this issue down to what seems to be a problem in one of the following modules:
@joshwooding/vite-plugin-react-docgen-typescript
@joshwooding/react-docgen-typescript
On the 'vite-plugin' module, I've posted an issue with a possible solution. I presume this issue can be closed once a patch is applied and the package is updated in Storybook.
Update: This issue is due to the fact that @joshwooding/vite-plugin-react-docgen-typescript
depends on an outdated version of react-docgen-typescript
, but the newest version (v2.2.3) hasn't been pushed to npm.
I've manually inserted the corrrective line in my copy of react-docgen-typescript
so my project is at least no longer hindered.
Hopefully someone gets this package updated soon!
If you configure SB to use react-docgen
does that solve the problem? main.js:
export default {
// ...
typescript: { docgen: 'react-docgen' }
}
We're planning on making react-docgen
the default in 8.0 and it is much more performant than react-docgen-typescript
.
@shilman, Yeah.. I guess it doesn't crash, but I also get no documentation.. :-?
I'm assuming the issue is because my documentation is on my Props types, not on the arguments. And the reason for that is because, from the props argument, I pull standard properties that I don't necessarily need or plan to document (like className
, children
, ...props
, etc.).
Any recommendations? Can I 'hide' a property from docgen? (I think that would actually work in my situation.)
@CodeSmith32 Do you have a reproduction repo I can look at?
Thanks @shilman,
Unfortunately, I don't. This is private to our company.
But I have identified the exact issue (again, see my other issue report or read the trace below). Even still, I also listed a test component above to demonstrate it, and this is just a fairly fresh Vite-React-Typescript-Storybook project. So, if you really want to reproduce it, it probably wouldn't take much to set up:
npm create vite@latest sample-project -- --template react-ts
cd sample-project
npx storybook@latest init
# storybook will start; ctrl-C to stop it; docgen only runs when SB starts up
Then create the test.tsx
and test.stories.tsx
files I pasted above. Then just boot up SB and visit the component
npm run storybook
And you'll get the big red
Unexpected token 'default'
Again:
Test
is assigned a static sub-component Sub
,react-docgen-typescript
uses escapedName
and not displayName
in these lines,default
even though v2.2.3 there does,@joshwooding/vite-plugin-react-docgen-typescript
doesn't, and can't depend on it,...this has become a problem.
I'm really just hoping @joshwooding pushes v2.2.3 to npm soon so SB can update the dependency version (or even I can at least npm upgrade react-docgen-typescript
).
Oh, This has happened to me too. It has occurred in the Compount component in my project.
Updated: I solved this by separating function declarations from the 'export default' keyword across the codebase. Reference: https://github.com/storybookjs/storybook/discussions/13935#discussioncomment-3175691 Before export default function Something() { ... }
After function Something() { ... }
export default Something;
I can confirm that @htutwaiphyoe 's workaround did seem to get me past the issue that I was having here. I only had to move the export default
to a separate line in 2 react (class
) components that referenced each other (one has some static rendering helpers that the other references, not sure how relevant that is)
And I've asked here about the dependency update: https://github.com/styleguidist/react-docgen-typescript/issues/505
Describe the bug
I'm building a component library using React / TypeScript / Vite. For a few components, I assign a sub-component as a property on another component, when their functionality is tied, e.g. in my case:
But furthermore, my export process looks something like:
Now, this pattern I've tested and confirmed that it works fine in a normal Vite project. But when running it specifically in the Storybook iframe, it fails with
Unexpected token 'default'
.Because
Grid
is the default export, it appears the compiled code includesdefault
in the exported code because it thinks thatdefault.Cell
is another component:The
default.Cell
in the middle section is a syntax error, not even somethingtry catch
can handle. Thus the whole module throws the unhelpful error:Unexpected token 'default'
, even though VSCode, ESLint, etc. find no errors project-wide.To Reproduce
It can be reproduced with the following component:
test.tsx
and the following story:
Test.stories.tsx
But bear in mind, the storybook server must be started after the code is written.
That is,
Test.Sub = Sub
line oftest.tsx
At this point, the storybook works fine. Restart the storybook server again, and it'll crash. I presume this means the code is only compiling during storybook startup time (or maybe I have a poor config?).
System
Output of
npx storybook@latest info
Additional context
This seems like it may actually be a problem with
@storybook/builder-vite
or another package. As I couldn't really determine which, I figured I'd start by posting it here. But I will see if I can make any further discoveries on its source.