react-styleguidist: Create React App + Hot Reloading not working?

Current behavior When I try to use react-styleguidist with CRA, without changing the config, it seems like hot reloading are not working properly. Whenever I update my code, I am able to see the source refresh in the inspector, but nothing changes on the page. However, when I add

dangerouslyUpdateWebpackConfig: (c) => {
  c.cache = false
  return c
}

to my styleguide-config file, it’s working as expected.

To reproduce Here are my current set of dependencies and scripts

"scripts": {
  "format": "prettier --write src/**/*",
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test --env=jsdom",
  "styleguide": "styleguidist server --open"
},
"dependencies": {
  "multi-download": "^2.0.1",
  "normalize.css": "^8.0.0",
  "prop-types": "^15.6.2",
  "react": "^16.6.0",
  "react-dom": "^16.6.0",
  "react-redux": "^5.1.0",
  "react-router-dom": "^4.3.1",
  "redux": "^4.0.1",
  "redux-thunk": "^2.3.0",
  "soundcloud": "^3.3.0",
  "spinkit": "^1.2.5"
},
"devDependencies": {
  "prettier": "^1.14.3",
  "react-scripts": "^2.0.5",
  "react-styleguidist": "^8.0.2"
}

I’m using css modules which comes with CRA.

Here is an example component:

import React from 'react'
import PropTypes from 'prop-types'

import styles from './Accordion.module.css'

const Accordion = ({children}) => (
  <ul className={styles.accordion}>{children}</ul>
)

Accordion.propTypes = {
  children: PropTypes.node.isRequired
}

export default Accordion

Expected behavior I would expect this to work straight out of the box.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 6
Comments: 19 (2 by maintainers)

Most upvoted comments

@wzup

No, it does not work

It’s been half a year, of course everything is different today - that’s JavaScript, dude!

+21

malyzeli on Jun 12, 2019

Was this resolved? It’s still not working

garg10may on Oct 31, 2020

@wzup its work for me

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

const rootEl = document.getElementById('root')

ReactDOM.render(
  <App />,
  rootEl
)

if (module.hot) {
  module.hot.accept('./App', () => {
    const NextApp = require('./App').default
    ReactDOM.render(
      <NextApp />,
      rootEl
    )
  })
}

UseMuse on Mar 19, 2020

Hello,

HMR really does not work by default, and actually it is not related to CRA, the same thing happens in clean project as well.

At first I thought it is caused by stateless functional components syntax, because I was sure that I used Styleguidist year ago with class components and it did work well. So I tested all possible component definitions and saw it is not related to actual syntax.

I created minimal example project so anybody can look further into it.

~~I can also confirm that setting dangerouslyUpdateWebpackConfig in styleguide config file as noted by @tomasruud enables hot reloading.~~

Edit: Seems it is caused by some webpack caching bug. HMR works again when cache: false option is added to webpackConfig section. Actualy there is no need to use dangerouslyUpdateWebpackConfig. I’m not sure what are the consequences of that. Thanks to @tomasruud for pointing me in right direction anyway.

Example project link: https://github.com/malyzeli/styleguidist-issue-1188-example

malyzeli on Nov 20, 2018