mantrajs / kickstart-mantrajs-webpack

Kickstart application with Mantrajs and meteor-webpack
45 stars 12 forks source link

Hot Module Reload #17

Open danpilat opened 8 years ago

danpilat commented 8 years ago

Hi Tomas,

Thanks for putting this boilerplate out! In regards to HMR, wouldn't it be a good idea to convert the bare react components that come bundled with Mantra's example blog app to use standard React components? Since there aren't that many (seems that mostly layout.main.jsx, post and postlist) - that way we'd get full HMR out of the box on this.

Thanks! Dan.

danpilat commented 8 years ago

Not sure if this is the right way, but after changing the layout.jsx to this, I got HMR connected:

//Full support for HRM
class Layout extends React.Component {

  render() {

    const content = this.props.content;

    return (

        <div>
          <header>
          <h1>Mantra Voice</h1>
          <Navigations />
          </header>

          <div>
          {content()}
          </div>

          <footer>
            <small>Built with <a href='https://github.com/kadirahq/mantra'>Mantra</a> & Meteor.</small>
          </footer>
      </div>

      )
  }
}

export default Layout;
ihealthdavid commented 8 years ago

Looks like webpack:react uses 'react-transform-hmr' : '^1.0.1'. https://github.com/thereactivestack/meteor-webpack/blob/master/packages/react/webpack.config.js#L21

Maybe this is fixed in react-hot-loader 3.0.0 https://github.com/gaearon/react-hot-boilerplate/pull/61#issuecomment-215482740 https://github.com/gaearon/react-hot-loader/blob/master/docs/Troubleshooting.md#the-following-modules-couldnt-be-hot-updated-they-would-need-a-full-reload