react-styleguidist icon indicating copy to clipboard operation
react-styleguidist copied to clipboard

Basic setup with create-react-app does not display markdown documentation

Open ThomasRoest opened this issue 2 years ago • 5 comments

Current behavior

This very basic setup with create-react-app does not seem to work as expected. The component is found, but the markdown file isn't? In the chrome devtools I do get the following HMR / webpack dev server message:

[HMR] Waiting for update signal from WDS...

To reproduce

The repo with example: https://github.com/ThomasRoest/styleguidist-test

Expected behavior

By default, it should also find and render the markdown examples.

Versions create-react-app 5.0.0 react-styleguidist 11.2.0

ThomasRoest avatar Apr 03 '22 12:04 ThomasRoest

same here

elciocf avatar Apr 04 '22 19:04 elciocf

Displaying the examples can be fixed with the workaround described in https://github.com/styleguidist/react-styleguidist/issues/1910#issuecomment-1013763698

But this still leaves the problem of hot module reloading not working

ThomasRoest avatar Apr 06 '22 11:04 ThomasRoest

I reproduced the example in the repo with the same versions, however, the markdown examples are rendered. styleguidistTest

styleguidistTest2

eya26 avatar Apr 23 '22 20:04 eya26

@eya26 yes because it includes this workaround https://github.com/ThomasRoest/styleguidist-test/commit/f11e7e05c1ae68cd6ced924fccdcd6b5915e23cd

ThomasRoest avatar Apr 25 '22 18:04 ThomasRoest

Displaying the examples can be fixed with the workaround described in #1910 (comment)

But this still leaves the problem of hot module reloading not working

For all who curious, after a few days of debugging, the following config (added to the workaround mentioned above) fixes hot reloading:

const webpackConfig = {
  devServer: {
      // Not really necessary, but to match the new webpack defaults
      sockPath: '/ws',
      // Web socket client is not injected by CRA webpack config, so ask webpack
      // to include the default one for us
      injectClient: true,
    },
    module: {
      ...
    },
    ...
}

adubouski avatar May 27 '22 13:05 adubouski