Inferno: Hot Module Reloading didn't work.

[xiaokekeT]

react-hot-loader and inferno can't work

// index.tsx
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { AppContainer } from 'react-hot-loader'
import { Router } from 'react-router'

const target = document.getElementById('app')

import App from './app'

const app = (
  <AppContainer>
    <App />
  </AppContainer>
)

ReactDOM.render(app, target)

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

// app.tsx
import * as React from 'react'

interface AppProps {

}

class App extends React.Component<AppProps, undefined> {
  render () {
    return (
      <div>
        Hello wolrd
      </div>
    )
  }
}

export default App

webpack config

app: [
  'react-hot-loader/patch',
  'webpack-dev-server/client?http://localhost:8080',
  './index'
]
alias: {
  'react': 'inferno-compat',
  'react-dom': 'inferno-compat',
  'react-router': 'inferno-router'
}
plugins: [
  new webpack.HotModuleReplacementPlugin(),
  new webpack.NamedModulesPlugin()
]
devServer: {
  hot: true
  ...
}

Each change will be reloaded. Not using inferno is normal.

Expected Current Behaviour

hot reload

Inferno Metadata
package:

webpack version: 2.1.0-beta.27
typescript: 2.1.4
inferno version:  1.0.0-beta33
inferno-compat version: 1.0.0-beta33
react-hot-loader version:  3.0.0-beta.6

OS: macOS
Browser: Chrome

Test project: inferno-starter

Thanks 😀

[trueadm]

I don't believe you can use React HMR with Inferno at all (due to the plugin requiring React internals). You can still enable default HMR without needing the React version though

[nightwolfz]

@xiaokekeT You can get some hot reloading inspiration from this project:

https://github.com/nightwolfz/inferno-starter

[xiaokekeT]

@nightwolfz Thank you

[hulkish]

@nightwolfz just tested infernostarter`... hmr is not working

[Havunen]

@hulkish what is expected outcome for definition of working in this case? It refreshes window when you change a file that is expected behavior by native webpack HMR

[hulkish]

@Havunen I'm sorry, but I think you're confusing HMR with nodemon

[screendriver]

It refreshes window when you change a file that is expected behavior by native webpack HMR

@Havunen HMR is not for refreshing the whole site 😉 It should only replace that part of the website that changed, without any refresh / reload. The whole application state remains unchanged.

[Havunen]

That has never been implemented

[screendriver]

I know that but it would be awesome if it would 🙃