Provide a better message when component type is undefined with SSR

[lukasborawski]

This might be a reference to this one: #10212 (comment)

The problem still exist.

So, trying to render with server side and got this error. I don't have this notation in my code but this might be a problem with dependencies.

TypeError: Cannot read property 'toLowerCase' of undefined
    at ReactDOMServerRenderer.renderDOM (/Users/lukasborawski/Dev/web-client/node_modules/react-dom/cjs/react-dom-server.node.development.js:2304:27)
...

"react": "^16.1.1",
"react-dom": "^16.2.0",

Thx for help.

[aweary]

@lukasborawski you should be running the same versions of react and react-dom. Using two different versions (especially minor or major versions) can lead to unexpected behavior. Can you try updating react to 16.2.0 and see if your issue persists?

Otherwise, we'll need an example that reproduces the issue so we can investigate it.

Thanks!

[trebushchuk]

Have a same issue.

TypeError: Cannot read property 'toLowerCase' of undefined
    at a.renderDOM (/home/{username}/Workspace/{project}/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:420)

In the first argument of renderDOM is passed this kind object:

{ '$$typeof': Symbol(react.element),
  type: undefined,
  key: null,
  ref: null,
  props: {},
  _owner: null }

Versions of react and react-dom was same. I have updated both of it and nothing changed.

-    "react": "^16.0.0",
+    "react": "^16.2.0",

-    "react-dom": "^16.0.0",
+    "react-dom": "^16.2.0",

[gaearon]

Please provide a reproducing project. We can’t help otherwise.

[gaearon]

(My best guess is you imported a component incorrectly and thus ended up with undefined as a type. We should change to throw a better error when this happens.)

[trebushchuk]

@gaearon This project that should reproduce the issue
https://github.com/trebushuk/test-react-project
I tryed on the versions of node v6.12.2 & v9.3.0

[lukasborawski]

@aweary @gaearon @trebushuk I've updated the react version to 16.2 and still have this issue. Looked up for components imports and all looks fine, typical and normal. Can't share the project bc this one is customers private. Any other ideas?

[yerlanyr]

That project should reproduce the issue. https://github.com/yerlanyr/reactrouterserver
Text of error when version 15.6.2

Invariant Violation: 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. Check the render method of `AppRoot`.
    at invariant (C:\Data\FrontendProjects\reactrouterserver\node_modules\fbjs\lib\invariant.js:42:15)
    at instantiateReactComponent (C:\Data\FrontendProjects\reactrouterserver\node_modules\react-dom\lib\instantiateReactComponent.js:72:56)
    at instantiateChild (C:\Data\FrontendProjects\reactrouterserver\node_modules\react-dom\lib\ReactChildReconciler.js:42:28)
    at C:\Data\FrontendProjects\reactrouterserver\node_modules\react-dom\lib\ReactChildReconciler.js:69:16
    at traverseAllChildrenImpl (C:\Data\FrontendProjects\reactrouterserver\node_modules\react-dom\lib\traverseAllChildren.js:75:5)
    at traverseAllChildren (C:\Data\FrontendProjects\reactrouterserver\node_modules\react-dom\lib\traverseAllChildren.js:170:10)
    at Object.instantiateChildren (C:\Data\FrontendProjects\reactrouterserver\node_modules\react-dom\lib\ReactChildReconciler.js:68:7)
    at ReactDOMComponent._reconcilerInstantiateChildren (C:\Data\FrontendProjects\reactrouterserver\node_modules\react-dom\lib\ReactMultiChild.js:183:41)
    at ReactDOMComponent.mountChildren (C:\Data\FrontendProjects\reactrouterserver\node_modules\react-dom\lib\ReactMultiChild.js:222:27)
    at ReactDOMComponent._createContentMarkup (C:\Data\FrontendProjects\reactrouterserver\node_modules\react-dom\lib\ReactDOMComponent.js:657:32)

Text of error when 16.2.0

TypeError: Cannot read property 'toLowerCase' of undefined
    at ReactDOMServerRenderer.renderDOM (C:\Data\FrontendProjects\reactrouterserver\node_modules\react-dom\cjs\react-dom-server.node.development.js:2304:27)
    at ReactDOMServerRenderer.render (C:\Data\FrontendProjects\reactrouterserver\node_modules\react-dom\cjs\react-dom-server.node.development.js:2298:21)
    at ReactDOMServerRenderer.read (C:\Data\FrontendProjects\reactrouterserver\node_modules\react-dom\cjs\react-dom-server.node.development.js:2234:19)
    at Object.renderToString (C:\Data\FrontendProjects\reactrouterserver\node_modules\react-dom\cjs\react-dom-server.node.development.js:2501:25)
    at C:\Data\FrontendProjects\reactrouterserver\babel\server.js:32:33
    at Layer.handle [as handle_request] (C:\Data\FrontendProjects\reactrouterserver\node_modules\express\lib\router\layer.js:95:5)
    at next (C:\Data\FrontendProjects\reactrouterserver\node_modules\express\lib\router\route.js:137:13)
    at Route.dispatch (C:\Data\FrontendProjects\reactrouterserver\node_modules\express\lib\router\route.js:112:3)
    at Layer.handle [as handle_request] (C:\Data\FrontendProjects\reactrouterserver\node_modules\express\lib\router\layer.js:95:5)
    at C:\Data\FrontendProjects\reactrouterserver\node_modules\express\lib\router\index.js:281:22

[lukasborawski]

For me this was a problem with ServerRouter, changed to the StaticRouter and everything is fine now. Should i close the issue?

[gaearon]

We should probably provide a better error message if component type is undefined.

[HeroProtagonist]

If no one is working on this I can do it today or tomorrow also happy new year!

[gaearon]

Sure!

[timneutkens]

@gaearon looks like it's fixed in master, tried building and got this:

Invariant Violation: Element type is invalid: expected a string (for built-incomponents) or a class/function (for composite components) but got: undefined.

To reproduce the toLowerCase issue on the currently released version:

const ReactDOMServer = require('react-dom/server')
const React = require('react')
const X = undefined
ReactDOMServer.renderToString(React.createElement(X, {}))

So I guess both this issue and PR #11966 can be closed 👌

[HeroProtagonist]

@gaearon and @timneutkens I just was looking at this last night (after a hiatus) and saw that it was essentially fixed. I updated my PR to match the error in ReactFiber.js and put a test for it. In case that is desired.