Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

does not support displaying syntax errors #388

Closed
bchenSyd opened this issue Oct 1, 2016 · 4 comments
Closed

does not support displaying syntax errors #388

bchenSyd opened this issue Oct 1, 2016 · 4 comments

Comments

@bchenSyd
Copy link

bchenSyd commented Oct 1, 2016

I previously used webpack-hot-middleware with HotModuleReplacementPlugin to do hot re-loading, and I also used redbox-react to display a nice error page in case of syntax errors. My source code is something like below

webpack.config
entry:[
  'webpack-hot-middleware/client',
    './src/index'
]
 plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]


index.js :
render = ()=>{
const App = require('./App').default
ReactDOM.render(<App />, root)
}

if(module.hot){
module.hot.accept('./App',()=>{

try{
   render() //hot re-render  after module change
}catch(err){
   const RedBox = require('redbox-react')
    ReactDOM.render(
      <RedBox error={error} className="redbox"/>,
      root)

})}

render(); //do the initial render;

above code works fine and will gives me a nice error page whenever there is a syntax error in my updated module

I then switched to react-hot-loader , latest version (react-hot-loader@3.0.0-beta.5), something like

import HomePage  from './components'

const store = configureStore()
const render=(App)=>{
  ReactDOM.render(
    <Provider store={store}>
        <MuiThemeProvider muiTheme={getMuiTheme()}>
          { App }
        </MuiThemeProvider>
    </Provider>, dest)
}

if (module.hot) {
  module.hot.accept('./components', () => {
    // If you use Webpack 2 in ES modules mode, you can
    // use <App /> here rather than require() a <NextApp />.
    try{
    const NextApp = require('./components').default
    render(<AppContainer>
              <NextApp />
           </AppContainer>)
    } catch(error){
       const RedBox = require('redbox-react')
       ReactDOM.render(<RedBox error={error} className="redbox"/>, dest)
    }
  })
}

render( <AppContainer>
           <HomePage  />
        </AppContainer>)

it works as expected, , just not showing the RedBox i was expecting in case of syntax error. I reckon it's because of 'webpack/hot/only-dev-server' that prevent hot reloading when syntax errors. why?

@bchenSyd
Copy link
Author

bchenSyd commented Oct 1, 2016

btw, the Bare minimum hot loader example is too minimum ,, I mean, it's quite rare that <App /> is at the top of dom tree, in most cases, it's wrapped by <router> or redux <provider> .We may not want to include Router/Redux into hot loader, as they are unlikely to change. Also, the store is a bit tricky, we don't want to create a new store instance on every re-render (which I did, and then corrected the mistake following reduxjs/react-redux#259 ).

Anyway, not sure if you want to flesh it out a bit, maybe just make it work with

<Wrapper>
  <AppContainer>
       <App />
</AppContainer>
</Wrapper>

which is what I was doing in my opening question. I'm happy to make a pull request if you think is worth it. thanks

@calesce
Copy link
Collaborator

calesce commented Oct 1, 2016

RHL uses Redbox-React just to display errors caught in render when a component mounts (unfortunately not yet on updates, see facebook/react#6020). Syntax errors aren't handled by RHL. Personally (as I said in #371), I recommend using webpack-dev-middleware and webpack-hot-middleware alongside Express, the syntax error overlay is very nice.

A simple example of using RHL3 with Redux is here. I agree we more simple examples using common libs in our docs.

@calesce calesce closed this as completed Oct 1, 2016
@bchenSyd
Copy link
Author

bchenSyd commented Oct 2, 2016

@calesce thanks for answering my question.

So you are saying RHL can't handle syntax errors, and if we want handle that, we have to switch to webpack-dev-middleware with webpack-hot-middleware. Please correct me if I'm wrong.

I'm actually explicitly calling react-redbox to display syntax error rather than relying on RHL to handle it automatically (plus, I don't think webpack-hot-middleware can handle syntax error by itself, you need to code for it explicitly as well). so you comments on render , update is not closely relevant to the question maybe?

try{
  // host re-render
}
catch(error){
     // hot re-render failed. display a nice error page like inwebpack-hot-middleware 
       const RedBox = require('redbox-react')
       ReactDOM.render(<RedBox error={error} className="redbox"/>, dest)
    }

above code doesn't work on RHL , but it worked on webpack-dev-middlweare + webpack-hot-middleware. However, If I replace <RedBox > with something like <div>oops.. syntax error</div> I can see my simple error page using RHL + WDS.

last question, can I use RHL with webpck-dev-middleware + webpack-hot-middleware? my understanding is RHL only works with WDS. but correct me if my understanding is wrong

@calesce
Copy link
Collaborator

calesce commented Oct 2, 2016

Syntax errors aren't the concern of React Hot Loader, but since it integrates with Webpack, I'm just recommending the surrounding tools for the best (in my opinion) dev experience. Right now those choices are either WDS or dev+hot middleware (both work with RHL).

When I say syntax errors, I'm talking about errors that fail at parse/compile-time, which would be before they get to RHL or a try-catch in running code. The error gets passed from Webpack to hot-middleware as a hot update. I don't know exactly what it looks like, but hot-middleware is able to take that error, display the chunk of broken code, and inject that onto the page.

Hope that's helpful.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants