React-hot-loader: How to use next with react-error-overlay?

[aaronjensen]

Hi, we're testing out react-hot-loader@next and weren't able to get it working with redbox as we had it before. Ideally we could use it w/ create-react-app's react-error-overlay. Has anyone done this? My attempts at it were unsuccessful.

Thanks!

[theKashey]

errorReporter prop should still work fine.

[aaronjensen]

Maybe I was doing it wrong, but the setup I had from RHL3 didn't work. I was doing this in my src/index:

// @flow
import * as React from 'react'
import ReactDOM from 'react-dom'
import { AppContainer } from 'react-hot-loader'
import Redbox from 'redbox-react'
import { getRoot } from '@@common'
import App from '@@app-ui/components/App'
import type { Config } from '@@app-ui/config'

const CustomErrorReporter = ({ error }) => <Redbox error={error} />
const render = (Component, config: Config) => {
  ReactDOM.render(
    <AppContainer errorReporter={CustomErrorReporter}>
      <Component config={config} />
    </AppContainer>,
    getRoot(),
  )
}

let storedConfig: void | Config
export const startApp = (config: Config) => {
  storedConfig = config
  render(App, config)
}

if (module.hot) {
  module.hot.accept('@@app-ui/components/App', () => {
    if (storedConfig) {
      render(App, storedConfig)
    }
  })
}

export default startApp

It'd be handy if there was a way to pass the errorReporter into the hot higher order component

[theKashey]

It does not show RedBox or literally does not work?

[aaronjensen]

RedBox works, but react-hot-loader does not. It doesn't refresh the page, but it blows away the render tree

[theKashey]

Wow! That unfair.
Can you provide more data how to repeat this?

[aaronjensen]

Sorry, to be clear by "blows away the render tree" what I meant was that it rerenders from scratch, scrapping any previous state. I'll see if I can put a repro together, though after trying w/ the webpack-modern example I couldn't reproduce what I'm seeing so I'll try and debug a little further on my repo first.

[TheAifam5]

So I wrote also my own "RedBox" and after update to the new version, does not work anymore.
Also I set the RHL log level to debug but that does not help (no info).

EDIT:
Nevermind, Works everything.

The problem was in Webpack configuration.
I forgot to add "HotModuleReplacementPlugin" (i removed it because wanted to configure everything from scratch).

So @aaronjensen , please check your webpack configuration :D

EDIT 2:
I seen that problem with ts-loader, that does not refresh the page or anything after adding error in code. So I moved again to the ATS and now works like should be.

[theKashey]

One should pursue ts-loader. It somehow breaks webpack's HRM.

[gregberge]

I would like to deprecate errorReporter, try to add a custom Error Boundary in your root component (just after hot or AppContainer) and it should work.

[gregberge]

Documented in v4.0.0-beta.17.