styleguidist / react-styleguidist

Isolated React component development environment with a living style guide
https://react-styleguidist.js.org/
MIT License
10.82k stars 1.44k forks source link

JSX highlighting breaks on styleguidist example page #611

Closed daphnesmit closed 6 years ago

daphnesmit commented 6 years ago

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

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

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

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

sapegin commented 6 years ago

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 commented 6 years ago

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

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

sapegin commented 6 years ago

Similar issue: #105.

sapegin commented 6 years ago

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

sapegin commented 6 years ago

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

sapegin commented 6 years ago

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 commented 6 years ago

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

sapegin commented 6 years ago

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

scniro commented 6 years ago

@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 commented 6 years ago

@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 commented 6 years ago

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 commented 6 years ago

@scniro It works, thanks!

Expect a new release in 10 minutes ;-)