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

Unhelpful uncaught error message upon trying to createElement undefined #1324

Closed
klarstrup opened this issue Aug 20, 2019 · 4 comments · May be fixed by novalina26/anchor#1
Closed

Unhelpful uncaught error message upon trying to createElement undefined #1324

klarstrup opened this issue Aug 20, 2019 · 4 comments · May be fixed by novalina26/anchor#1

Comments

@klarstrup
Copy link

klarstrup commented Aug 20, 2019

Description

When doing <A /> and A is undefined for some reason, instead of failing with the typical

Expected behavior

The typical React warning

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

should be logged.

Actual behavior

An error that would lead one to believe that it is react-hot-loader bugging out, rather than the actual (typically) userland mistake.

Uncaught TypeError: Cannot read property '__reactstandin__key' of undefined
    at isProxyType (react-hot-loader.development.js:1229)
    at resolveProxy (react-hot-loader.development.js:1770)
    at resolveSimpleType (react-hot-loader.development.js:1786)
    at Object.React$$1.createElement (react-hot-loader.development.js:2820)
    at CMSNav (index.js:123)

Environment

React Hot Loader version: 4.12.11

  1. node -v: v11.11.0

  2. npm -v: 6.7.0

  3. Operating system: macOS Mojave 10.14.5

  4. Browser and version: Chrome 75

Reproducible Demo

import React from "react";
import { hot } from "react-hot-loader/root";
import ReactDOM from "react-dom";

// createElement
ReactDOM.render(
  React.createElement(hot(() => React.createElement(undefined))),
  document.body,
);

// JSX
const A = undefined;
const App = hot(() => <A />);
ReactDOM.render(<App />, document.body);

Just rendering <A/> anywhere in the component tree gets you there. Calling hot(undefined) also doesn't give a particularly useful error messages, but it's pretty easy to catch and probably a very rare mistake.

@theKashey
Copy link
Collaborator

I haven't thought about this simple case :)

@klarstrup
Copy link
Author

I'm a pretty simple case ;)

@MilosRasic
Copy link

@theKashey looks like it's not fixing the problem in all cases. I don't have an easily reproducible version of mine, but I've caught the call stack when the error happens. Looks like you need the same guard in resolveSimpleType().

rhmlcallstack

@theKashey
Copy link
Collaborator

Yep, resolveSimpleType path.

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