React-styleguidist: JSX highlighting breaks on styleguidist example page

[daphnesmit]

See: https://react-styleguidist.js.org/examples/basic/#modal

Where is the highlighting?
ASameso in my project, it fails when I do:

```jsx
\ full={false}
inactive={false}
align=\'left\'>hoi<\/Button>
```

I also put in styleguide.config.js:
module.exports = { highlightTheme: 'material', // etc }

• Webpack version: "webpack": "^3.5.6",

[sapegin]

Where is the highlighting?

I assume it tries to catch last warm days and having a short break from work.

I’ve seen this couple of times and was able to fix by updating all Styleguidist dependencies. But honestly I have no idea why it is happening. Feel free to send a pull request with a fix ;-)

[sapegin]

module.exports = { highlightTheme: 'material', // etc }

Theme is not an issue, Codemirror doesn’t highlight code at all for some very obscure reason.

[sapegin]

Similar issue: #105.

[sapegin]

One more in react-codemirror: https://github.com/JedWatson/react-codemirror/issues/34

[sapegin]

And one more at react-codemirror2: https://github.com/scniro/react-codemirror2/issues/7

[sapegin]

The issue seems to be because Styleguidist and react-codemirror2 have a codemirror dependency and when we import modes webpack somehow loads them from a different codemirror.

This works fine, but it’s a huge hack:

- import 'codemirror/mode/jsx/jsx';
+ import 'react-codemirror2/node_modules/codemirror/mode/jsx/jsx';

The proper fix would be moving codemirror to peerDependencies in react-codemirror2. @scniro What do you think?

[daphnesmit]

That works! react-codemirror2 doesnt work with latest codemirror apparently

[sapegin]

I think it doesn’t work when we use two different versions.

[scniro]

@sapegin yes you are correct on the versioning conflict - this actually happened with another user on the last release 5.29.0 release of CodeMirror as well. I am unsure why the conflict causes the loss of highlighting - it's the only noticeable side effect I have found.

Anyways, I did have the versioning too strict. I pushed up 1.1.0 which should resolve this issue for you. Please keep me posted with your findings!

[sapegin]

@scniro Thanks! Right now peerDependency doesn’t do anything:

https://github.com/scniro/react-codemirror2/blob/3e0be8dc7556c169cac36df91572265830fcaf56/package.json#L34-L40

It’s either dependency or peerDependency.

[scniro]

Hey all, please pull 2.0.0 instead. I overlooked the breaking changes that would result from users that did not already have any version of codemirror as a dep. See https://github.com/scniro/react-codemirror2/issues/12. Prior 1.x releases have been unpublished in favor of moving forward with 2.x. Thanks

[sapegin]

@scniro It works, thanks!

Expect a new release in 10 minutes ;-)