v10.3.2 introduced a breaking change to example parsing

[craigkovatch]

All of our .md code samples are failing to parse in 10.3.2+. We are currently on 10.2.0 and 10.3.1 works fine. In 10.3.2 every sample contains some kind of parse error. Here is one sample MD, and its error:

<h3>Checkbox without Label</h3>

```jsx
initialState = { checked: false };
<Checkbox checked={state.checked} onChange={(e) => setState({checked: e.target.checked})}/>
\```

Since the only change in 10.3.2 is an upgrade to the acorn parser, and the new errors are all SyntaxErrors, the cause does seem pretty clear.

[Sarah4VT]

I am new to using styleguidist, so automatically got the latest version (10.6.1). I can get the md files to render a component ok, but am exporting a component for use in another project and no matter how I structure the component (my preference is a stateless functional component but I've tried other variations) I get an error compiling:

SyntaxError: <path_to_component>.js: Unexpected token (6:6)

My component looks like this and the error is always on the first open tag of whatever DOM I try to return (doesn't matter if it's a div, span, React.Fragment, etc. the only thing that works is if I just return plain text with no DOM):

const MyComponent = ({children, className, ...props}) => {
  5 |    return (
> 6 |       <div className={className}>
    |       ^
  7 |          {children}
  8 |       </div>
  9 |    );

I thought it could be caused by #1321 which is how I ended up here. I tried downgrading styleguidist to 10.2.0 but that didn't help either.

Not sure if this is the same issue as the original post, but thought I'd mention it here while I keep digging.

/****** Edited to add fix to my problem *****/
I finally found this https://stackoverflow.com/questions/57738073/how-to-export-react-component-as-npm-package-i-have-a-syntax-error and realized I had used create-react-app to create the project so it was exporting my files as jsx and I needed to use different tools (went with rollup and babel) to build my React components into valid javascript syntax.

[firec0der]

The same thing. yarn.lock regenerating helped, but I don't like this solution.

[stale]

😴 This issue has been automatically marked as stale because it has not had recent activity. It will be closed in a week without any further activity. Consider opening a pull request if you still have this issue or want this feature.

[methodbox]

Which version did this last work on? I can't seem to find a version I can roll back to where it works. I'm surprised such a big breaking change still hasn't been resolved.

[methodbox]

So it looks like this is trying to evaluate the code before allowing it to render, rather than just letting you use Markdown directly to show a code snippet.

If your example isn't a fully-formed syntactically-valid piece of code, it throws a syntax error. This seems like unintended behavior.

For example, if I wanted to show this code snippet:

onChange={(event) => {
  this.setState({ userNameIsValid: handleValidateUser(event) });
}}

I would get a syntax error instead.

But if I show a full function component like this:

const userField = () => {
  return (
    <Form.Control
      required
      name="userField"
      type="text"
      placeholder="User ID"
      minLength="8"
      maxLength="12"
      onChange={(event) => {
        this.setState({ userNameIsValid: handleValidateUser(event) });
      }}
    />
  )
};

It works fine. It seems for the purposes of documentation the first example should be entirely valid, even if the JS engine would consider it invalid to execute. We don't need to validate our code examples ... that's why they're examples and not literally source code.

[stale]

😴 This issue has been automatically marked as stale because it has not had recent activity. It will be closed in a week without any further activity. Consider opening a pull request if you still have this issue or want this feature.

[craigkovatch]

Bump

[stale]

😴 This issue has been automatically marked as stale because it has not had recent activity. It will be closed in a week without any further activity. Consider opening a pull request if you still have this issue or want this feature.

[craigkovatch]

Not stale

[sergdenisov]

@craigkovatch could you create a small project with a reproducible example of the error? Because #1495 fixed a similar problem for my project instead.

[stale]

😴 This issue has been automatically marked as stale because it has not had recent activity. It will be closed in a week without any further activity. Consider opening a pull request if you still have this issue or want this feature.

[craigkovatch]

Sorry didn’t see this request. Next time I’m in this code base I’ll try again to repro. We ended up never upgrading as a result of this before.

[stale]

😴 This issue has been automatically marked as stale because it has not had recent activity. It will be closed in a week without any further activity. Consider opening a pull request if you still have this issue or want this feature.