Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Element type is invalid

See original GitHub issue

Hi,

when I try to run the storybook examples (or the package in any other of my projects), like with git clone https://github.com/frontend-collective/react-sortable-tree && cd react-sortable-tree/ && npm i && npm run storybook, node 15.11.0 and npm 7.6.0 I receive the following error once opening:

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 "App".
createFiberFromTypeAndProps@http://0.0.0.0:3002/vendors~main.7bbb9661ec6158b26d07.bundle.js:88488:26
createFiberFromElement@http://0.0.0.0:3002/vendors~main.7bbb9661ec6158b26d07.bundle.js:88511:42
reconcileSingleElement@http://0.0.0.0:3002/vendors~main.7bbb9661ec6158b26d07.bundle.js:77385:45
reconcileChildFibers@http://0.0.0.0:3002/vendors~main.7bbb9661ec6158b26d07.bundle.js:77445:57
reconcileChildren@http://0.0.0.0:3002/vendors~main.7bbb9661ec6158b26d07.bundle.js:79948:44
updateHostComponent@http://0.0.0.0:3002/vendors~main.7bbb9661ec6158b26d07.bundle.js:80470:20
callCallback@http://0.0.0.0:3002/vendors~main.7bbb9661ec6158b26d07.bundle.js:62195:19
dispatchEvent@[native code]
invokeGuardedCallbackDev@http://0.0.0.0:3002/vendors~main.7bbb9661ec6158b26d07.bundle.js:62244:29
invokeGuardedCallback@http://0.0.0.0:3002/vendors~main.7bbb9661ec6158b26d07.bundle.js:62299:36
beginWork$$1@http://0.0.0.0:3002/vendors~main.7bbb9661ec6158b26d07.bundle.js:87639:28
performUnitOfWork@http://0.0.0.0:3002/vendors~main.7bbb9661ec6158b26d07.bundle.js:86557:24
workLoopSync@http://0.0.0.0:3002/vendors~main.7bbb9661ec6158b26d07.bundle.js:86530:39
performSyncWorkOnRoot@http://0.0.0.0:3002/vendors~main.7bbb9661ec6158b26d07.bundle.js:86129:23
scheduleUpdateOnFiber@http://0.0.0.0:3002/vendors~main.7bbb9661ec6158b26d07.bundle.js:85557:28
updateContainer@http://0.0.0.0:3002/vendors~main.7bbb9661ec6158b26d07.bundle.js:88962:15
http://0.0.0.0:3002/vendors~main.7bbb9661ec6158b26d07.bundle.js:89387:22
unbatchedUpdates@http://0.0.0.0:3002/vendors~main.7bbb9661ec6158b26d07.bundle.js:86292:14
legacyRenderSubtreeIntoContainer@http://0.0.0.0:3002/vendors~main.7bbb9661ec6158b26d07.bundle.js:89386:21
http://0.0.0.0:3002/vendors~main.7bbb9661ec6158b26d07.bundle.js:358:32
Promise@[native code]
render@http://0.0.0.0:3002/vendors~main.7bbb9661ec6158b26d07.bundle.js:357:21
tryCatch@http://0.0.0.0:3002/vendors~main.7bbb9661ec6158b26d07.bundle.js:105155:44
invoke@http://0.0.0.0:3002/vendors~main.7bbb9661ec6158b26d07.bundle.js:105384:30
asyncGeneratorStep@http://0.0.0.0:3002/vendors~main.7bbb9661ec6158b26d07.bundle.js:332:103
_next@http://0.0.0.0:3002/vendors~main.7bbb9661ec6158b26d07.bundle.js:334:212
http://0.0.0.0:3002/vendors~main.7bbb9661ec6158b26d07.bundle.js:334:369
Promise@[native code]
http://0.0.0.0:3002/vendors~main.7bbb9661ec6158b26d07.bundle.js:334:108
tryCatch@http://0.0.0.0:3002/vendors~main.7bbb9661ec6158b26d07.bundle.js:105155:44
invoke@http://0.0.0.0:3002/vendors~main.7bbb9661ec6158b26d07.bundle.js:105384:30
asyncGeneratorStep@http://0.0.0.0:3002/vendors~main.7bbb9661ec6158b26d07.bundle.js:3832:103
_next@http://0.0.0.0:3002/vendors~main.7bbb9661ec6158b26d07.bundle.js:3834:212
http://0.0.0.0:3002/vendors~main.7bbb9661ec6158b26d07.bundle.js:3834:369
Promise@[native code]
http://0.0.0.0:3002/vendors~main.7bbb9661ec6158b26d07.bundle.js:3834:108
renderMain@http://0.0.0.0:3002/vendors~main.7bbb9661ec6158b26d07.bundle.js:4137:16
renderUI@http://0.0.0.0:3002/vendors~main.7bbb9661ec6158b26d07.bundle.js:4164:19
emit@http://0.0.0.0:3002/vendors~main.7bbb9661ec6158b26d07.bundle.js:42908:39
http://0.0.0.0:3002/vendors~main.7bbb9661ec6158b26d07.bundle.js:3087:20

Is there an incompatibility with this nom / node / react version?

Thank you!

Regards Max

Issue Analytics

State:
Created 2 years ago
Reactions:3
Comments:5

Top GitHub Comments

2reactions

kmvancommented, May 20, 2021

The version works.

    "react-sortable-tree": "^2.6.2",

0reactions

ldaveriocommented, Apr 19, 2021

Hello, the workaround from @movcmpret doesn’t work for me either. It allows me to display the initial view of the tree, but any further interaction (click, drag and drop, etc.) crashes the component

Top Results From Across the Web

Invariant Violation: Element type is invalid: expected a string ...

This error can rise if you try to import a non-existent component. Make sure you have no typo and that the component indeed...

(React) Element type is invalid, expected a string (for built in ...

To solve the error "Element type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got", ......

Element type is invalid: expected a string (for built-in ... - GitHub

The app breaks and gives this error message: Element type is invalid: expected a string (for built-in components) or a class/function (for ...

Element type is invalid: expected a string (for built-in ... - Reddit

Getting Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: ...

Element type is invalid: expected a string (for built-in ...

Element type is invalid : expected a string (for built-in components) or a class/function (for composite components) but got: undefined. edit.js : /**...