react-transform-catch-errors and webpack-dev-server

[stton]

Currently trying to get react-transform-catch-errors to work with redbox-react while still using webpack-dev-server. I was able to get the react-transform-hmr to work with webpack-dev-server but am still not able to set it up with react-transform-catch-errors. Is this possible or does it have to be set up with webpack-hot-middleware (and express)?

[stton]

Ended up just using webpack-dev-middleware and webpack-hot-middleware with react-transform-catch-errors and redbox-react. Works perfectly.

[gaearon]

It should work with WebpackDevServer just fine. React Transform doesn't care what you use to connect to dev server. The fact that we use it with the middleware in the examples is just a coincidence. However we can't help you if you don't post a full project reproducing the issue.

[chibicode]

Having the same issue getting this to work w/ webpack-dev-server. Will report here if I figure out why. react-transform-hmr works fine...

[gaearon]

Please provide a way to reproduce.

[craig-jennings]

I am also seeing this behavior. If I run webpack-dev-server -d --history-api-fallback --inline --hot --no-info and create an error in a render method, I see a full page refresh and the error printed in the console. Below is the code that can reproduce this:

import configureStore from './configure-store';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';

class App extends React.Component {
  render() {
    return (<div>Hello World</div>);
    // Swap above with below to create error
    // return (<div>Hello World<div>);
  }
}

const root = document.querySelector('#root');
const store = configureStore();

ReactDOM.render((
  <Provider store={store}>
    <App />
  </Provider>
), root);

[gaearon]

@craigjennings11

This transform just catches runtime errors. What you show is a syntax error. It is unrelated to this transform.

[craig-jennings]

Hmm, I may not be explaining it properly. While the server is running, I switch those lines and save the file. This causes a full refresh and console error.

When I watch the demo gif here, there is a point where the text changes from {{ color: this.props.color }} to {{ color: this.props,.color }} and an error appears without a refresh. If I adjust my example to match that, I still see a full page refresh and console log.

[craig-jennings]

Note that I can also reproduce this with https://github.com/rackt/redux/tree/master/examples/counter by running webpack-dev-server --hot --inline

[gaearon]

What you want is unrelated to this transform.

Syntax error overlay is a feature of a different project called webpack-hot-middleware. It's a replacement for webpack-dev-server.

[craig-jennings]

Gotcha, thanks for the help