React-hot-loader: Helpful error not thrown for stateless components

[mattkrick]

Description

When I use a stateless component & i leave a variable undefined in the component, it does not give me a useful error.

Expected behavior

I would like to see an error that looks like this:

Uncaught ReferenceError: PAID is not defined
    at Invoice (webpack:///./universal/modules/invoice/components/Invoice/Invoice.js?:208:20)
    at eval (eval at evaluate (:85:21), <anonymous>:1:11)
    at eval (webpack:///../~/react-hot-loader/~/react-proxy/modules/createClassProxy.js?:95:24)

Actual behavior

I get the following error:

Uncaught TypeError: Function.prototype.bind.apply is not a constructor
    at eval (eval at evaluate (:85:21), <anonymous>:1:1)
    at eval (webpack:///../~/react-hot-loader/~/react-proxy/modules/createClassProxy.js?:95:24)

Environment

React Hot Loader version: v3.0.0-beta6

1. node -v: 7.6.0
2. npm -v: 4.1.2
3. Operating system: macOS
4. Browser and version: all of them

.babelrc (note no es-2015)

  "presets": ["react"],
  "plugins": [
    ["transform-es2015-destructuring"],
    ["transform-es2015-modules-commonjs"],
    ["transform-export-extensions"],
    ["transform-class-properties"],
    ["transform-object-rest-spread"],
    ["transform-decorators-legacy"],
    ["react-hot-loader/babel"]
  ]

Instead of a demo, I'll offer a fix:

Wrap the following in a try/catch: https://github.com/gaearon/react-proxy/blob/1.x/src/createClassProxy.js#L68
Then, in the catch, throw the original error : https://github.com/gaearon/react-proxy/blob/1.x/src/createClassProxy.js#L66

Happy to make a PR to react-proxy if i get some reassurance that it'll get merged, but not a single PR has been accepted in.... a good long while. this is just for folks who come across the same thing & are wondering what to do.

[wkwiatek]

@mattkrick please open a PR into react-proxy, we'll take care of it as soon as docs are finished here in RHL repo.

Thanks!

[aguynamedben]

+1. I'm a noob to React and found this error message to be very frustrating until I found this ticket, saw @mattkrick's description of stateless components, and read this article references in the Redux docs that explains the difference between Presentational and Container components.

If it helps to understand the pain for a noob, here's the wrong thing I was doing that probably isn't uncommon when somebody is working on their first React project.

Adding to routes.js but forgetting to import the new container component

/* eslint flowtype-errors/show-errors: 0 */
import React from 'react';
import { Switch, Route } from 'react-router';
import App from './containers/App';
import HomePage from './containers/HomePage';
import CounterPage from './containers/CounterPage';
import SearchPage from "./containers/SearchPage";
// Here I should be importing LoginPage since it's used below, but I didn't!

export default () => (
  <App>
    <Switch>
      <Route path="/search" component={SearchPage} />
      <Route path="/counter" component={CounterPage} />
      <Route path="/login" component={LoginPage} />
      <Route path="/" component={HomePage} />
    </Switch>
  </App>
);

There was one other similar time I ran into it, where I was using a variable I failed to import, but I forgot exactly where.

Thanks for the work you do on this project! Just trying to help and give a noob's perspective.

[gregberge]

Definitely fixed in React Hot Loader v4. This is the same problem as #391 and others. React Hot Loader v3 was not able to support modern code (ES6 classes) without being transpiled. It now works out of the box with v4. I close it because it is a duplicated issue.