React-styleguidist: Error parsing objects in example markdown

[imathews]

First of all, thank you for this wonderful tool; it's really helped our component development process.

I'm running into an issue where colons in my readme.md are tripping up the parser:

This works as expected when I populate the object using non-colon syntax:

Also, as a less critical note, it seems that missing semicolons also trips up the parser:

I'm on Webpack 2.2.1, Styleguidist 5.0.0-rc.1 (though I tried on beta.13 and beta.15 as well). See below for my styleguidist config:

{
    components: `${__dirname}/javascripts/@(containers|components)/**/index.jsx`,
    skipComponentsWithoutExample: true,
    serverPort: 9000,
    require: [
        `./javascripts/helpers/logger.js`,
        `./stylesheets/index.styl`,
        `./stylesheets/styleguidist.styl`,
    ],
}

[n1313]

I've seen this behavior when missing a semicolon on a statement that directly precedes some JSX breaks the example, too.

[sapegin]

The first snippet:

const a = { b: 42 };
<Foo a={[a]}></Foo>

I think @kof had this issue before but we couldn’t find a way to fix it. This is something weird.

The second snippet:

const a = 42
<Foo a={a}></Foo>

Looks like this is correct behavior. Both Buble and Babel show an error, so it’s not in Styleguidist somewhere.

[imathews]

Thanks @sapegin. Second snippet is no big deal, more of an FYI for others. The first snippet is definitely a pain for us; is there anything I can do / provide to help to better debug?

[sapegin]

The problem with the first snippet is that I can’t reproduce the error:

If could make a demo as described here that would be awesome.

[imathews]

I went ahead and forked the repo and tried to reproduce in the basic example, and I can't for the life of me get it to reproduce the error... even after making my webpack and styleguide configs identical, and installing the same dependencies... (obviously missing something, but I tried).

_However_, I have been able to isolate this error in my own project; the issue boiled down to the webpack.config.js resolve.modules. In my project, I have

resolve: {
    modules: [
        `${__dirname}/node_modules`,
    ],
}

If I comment out this block, everything works fine. I don't really have any idea _why_ this is happening, but maybe can help us to better diagnose.

[sapegin]

Looks like you have different versions of Buble in you dependencies. What npm list buble says?

[imathews]

npm list buble
[...]/assets
└─┬ [email protected]
  └── [email protected] 

Which is the same result that I get when running npm list buble in my fork of react-styleguidist/examples/basic, which is working fine...

[sapegin]

Do you have anything in ls -a node_modules/buble/node_modules? My only guess is that one of dependencies of your project has older version of one of Buble’s dependencies, and when you modify module resolution in your webpack config Buble receives this older version from the root node_modules instead of node_modules/buble/node_modules.

[imathews]

Yup that was it — specifically an old version of acorn was required by [email protected] and was installed at the top of node_modules. Jade was an old dependency that we weren't even using, so that was a quick fix, though I would've expected npm to handle this properly...

[n1313]

Impressive!

[sapegin]

npm handles this when you don’t override the default behavior in webpack config ;-)

[fdaciuk]

@imathews did you solve it? Could you share what did you do? =)

[n1313]

@fdaciuk I would guess he removed the unneeded dependency from his project and pruned/updated node_modules.

[fdaciuk]

Thanks @n1313! I'm overriding the default webpack behavior, and that is the cause of my issue :|

[imathews]

@fdaciuk — yea I ended up being to solve this pretty quickly by removing the dependency that was requiring the old version of acorn. You can try an npm ls to get a sense of what might be requiring the old version of acorn. You'll also want to empty node_modules and rerun npm install