Uncaught SyntaxError in browser console when using plugin for storybook

[ainalain]

Hi, thank you for this plugin, I understand that this project was written quick and dirty, the idea is very cool!

At work, I use typescript and storybook for React components. I added react-docgen-typescript-webpack-plugin to my .storybook webpack.config.js because I wanted to use the power of Storybook Info Addon and to have the prop types displayed in the rendered story. Unfortunately, with plugin added to webpack.config.js file, storybook fails in the browser with error
Uncaught SyntaxError: Unexpected identifier (very javascripty)
There is a screenshot of this state but I guess it isn't very verbose 😞

So I'll try to solve the problem next week but if you'll face it in your development, could you please explain the error here.

[strothj]

So there were two issues:

• Multi-line description strings were not being escaped properly.
• Multiple props were not having a comma added as a separator.

Can you try version 1.0.1 and see if that fixes your issue?

[tsiq-swyx]

hello! i am using 1.0.1. now the issue is Uncaught SyntaxError: Unexpected token -

and the source of it seems to be this JS code:

edit: i investigated this and this was due to me importing a Modal component from react-bootstrap. once i removed it it worked!

[strothj]

@tsiq-swyx I was able to reproduce the issue. Can you try v1.0.2?

[tsiq-swyx]

yes, and it was totally fixed. wow!

[ainalain]

@strothj my Unexpected identifier was related to importing from "react-select":

...
import Select, {  ReactSelectProps } from "react-select";

And there are 2 members of ReactSelectProps interface that are causing the error:
1.

 /**
   * Message to use for screenreaders to press backspace to remove the current item
   * {label} is replaced with the item label
   * @default "Press backspace to remove..."
   */
    backspaceToRemoveMessage?: string;

 /**
   * whether the Select is loading externally or not (such as options being loaded).
   * if true, a loading spinner will be shown at the right side.
   * @default false
   */
    isLoading?: boolean;

I don't know why these annotations are compiled without closing quote:

If I edit comment or remove this import, everything works fine.

[strothj]

@ainalain Are you still having this problem with v1.0.2 ? I think this was related to not escaping the new lines in description text which I believe is fixed.

[ainalain]

@strothj Yes, unfortunately, v1.0.2 didn't help.

[strothj]

I didn't encounter these sorts of problems with the Babel plugin I developed since it was operating on the AST.

I think I will need to investigate another place to hook into the pipeline to gain access to the original TypeScript source. Right now I'm only getting access to the post compiled output from ts-loader. I think generating the code snippet as an AST will prevent issues with strings having line breaks, etc.

I will need to investigate further.

[ainalain]

I understand. It would be cool to have all documentation tools provided by storybook but I know that typescript always adds extra challenge.

[strothj]

Yep, I plan to look at this again soon. I'm working to knock out a milestone for a client's project at the moment. As soon as that's done I'll be taking a deep dive into it.

[strothj]

Hello, I have begun work on code transformation at the original source code level. This will allow inserting the generated code before it is compiled by Webpack. This should resolve the esnext module target issue. The line wrapping issue will be resolved through the use of AST to generate the code instead of string interpolation.

Tracking this on #3

[strothj]

Closing as it is addressed by plugin.