Docz: Error: Element type is invalid

Created on 31 Mar 2019 · 13Comments · Source: doczjs/docz

Bug Report

Upon running docz:dev on v1.0.0-rc.5, the dev server shows the following error report:

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.

Check the render method of `Routes`.
▼ 28 stack frames were expanded.
invariant
node_modules/react-dom/cjs/react-dom.development.js:55
createFiberFromTypeAndProps
node_modules/react-dom/cjs/react-dom.development.js:10217
createFiberFromElement
node_modules/react-dom/cjs/react-dom.development.js:10238
reconcileSingleElement
node_modules/react-dom/cjs/react-dom.development.js:12531
reconcileChildFibers
node_modules/react-dom/cjs/react-dom.development.js:12588
reconcileChildren
node_modules/react-dom/cjs/react-dom.development.js:14402
updateContextProvider
node_modules/react-dom/cjs/react-dom.development.js:15441
beginWork
node_modules/react-dom/cjs/react-dom.development.js:15670
performUnitOfWork
node_modules/react-dom/cjs/react-dom.development.js:19312
workLoop
node_modules/react-dom/cjs/react-dom.development.js:19352
HTMLUnknownElement.callCallback
node_modules/react-dom/cjs/react-dom.development.js:149
invokeGuardedCallbackDev
node_modules/react-dom/cjs/react-dom.development.js:199
invokeGuardedCallback
node_modules/react-dom/cjs/react-dom.development.js:256
replayUnitOfWork
node_modules/react-dom/cjs/react-dom.development.js:18578
renderRoot
node_modules/react-dom/cjs/react-dom.development.js:19468
performWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js:20342
performWork
node_modules/react-dom/cjs/react-dom.development.js:20254
performSyncWork
node_modules/react-dom/cjs/react-dom.development.js:20228
requestWork
node_modules/react-dom/cjs/react-dom.development.js:20097
scheduleWork
node_modules/react-dom/cjs/react-dom.development.js:19911
scheduleRootUpdate
node_modules/react-dom/cjs/react-dom.development.js:20572
updateContainerAtExpirationTime
node_modules/react-dom/cjs/react-dom.development.js:20600
updateContainer
node_modules/react-dom/cjs/react-dom.development.js:20657
ReactRoot.render
node_modules/react-dom/cjs/react-dom.development.js:20953
eval
node_modules/react-dom/cjs/react-dom.development.js:21090
unbatchedUpdates
node_modules/react-dom/cjs/react-dom.development.js:20459
legacyRenderSubtreeIntoContainer
node_modules/react-dom/cjs/react-dom.development.js:21086
render
node_modules/react-dom/cjs/react-dom.development.js:21155
▲ 28 stack frames were expanded.
render
/Users/jemao/Documents/GitHub/jedmao/queso/.docz/app/index.jsx:14:2
  11 | const root = document.querySelector('#root')
  12 | const render = (Component = Root) => {
  13 |   onPreRender()
> 14 |   ReactDOM.render(<Component />, root, onPostRender)
     |  ^  15 | }
  16 | 
  17 | render(Root)
View compiled
▼ 9 stack frames were expanded.
Module.eval
webpack-internal:///./.docz/app/index.jsx:46:1
eval
webpack-internal:///./.docz/app/index.jsx:70:30
Module../.docz/app/index.jsx
http://localhost:3000/static/js/app.js:271:1
__webpack_require__
http://localhost:3000/static/js/app.js:98:30
0
http://localhost:3000/static/js/app.js:307:18
__webpack_require__
http://localhost:3000/static/js/app.js:98:30
checkDeferredModules
http://localhost:3000/static/js/app.js:60:23
(anonymous function)
http://localhost:3000/static/js/app.js:235:18
(anonymous function)
http://localhost:3000/static/js/app.js:238:10
▲ 9 stack frames were expanded.
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.

To Reproduce

https://github.com/jedmao/queso/tree/theme
https://github.com/jedmao/queso/pull/11
https://deploy-preview-11--quesojs.netlify.com/

Environment

OS: Windows 10

~ $node -v
v10.15.0

~ $npm -v
6.9.0

Source

jedmao

Most helpful comment

Same problem here

adrianoresende on 6 Sep 2019

👍5

All 13 comments

Same problem with v1.0-RC6.

jedmao on 31 Mar 2019

@jedmao maybe can be here:
https://github.com/jedmao/queso/blob/theme/src/themes/dark/index.tsx#L10

After v1 we don't have render component anymore, now is playground, like that:
https://github.com/pedronauck/docz/blob/master/core/docz-theme-default/src/components/ui/index.ts#L38

pedronauck on 2 Apr 2019

I was actually importing the wrong components!

jedmao on 2 Apr 2019

👍1

Why closing the issue? It's not working!!

This is my .mdx file:

name: Header
---

# Header

123

When running docz dev, I have:

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.

Check the render method of `Routes`.