crud-with-redux icon indicating copy to clipboard operation
crud-with-redux copied to clipboard

Uncaught Error: Element type is invalid: expected a string (for built-in components)

Open kurtzilla opened this issue 8 years ago • 6 comments

I have just completed the 7th video of the series. It is possible that I deleted the node_modules folder and re-ran npm install to make the following warning/error occur. I am on the hunt for the solution myself, but posting in the hopes that some else has had this issue and has been able to fix it.

I did try and rollback to a previous commit (hence the rm-rf node_modules) and haven't been able to fix the issue.

screen shot 2017-01-31 at 6 19 10 pm

warning.js:36 Warning: React.createElement: 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.
printWarning @ warning.js:36
warning @ warning.js:60
createElement @ ReactElementValidator.js:171
(anonymous) @ index.js:39
(anonymous) @ bundle.js:1363
__webpack_require__ @ bundle.js:556
fn @ bundle.js:87
(anonymous) @ multi_main:3
(anonymous) @ bundle.js:589
__webpack_require__ @ bundle.js:556
(anonymous) @ bundle.js:579
(anonymous) @ bundle.js:582
invariant.js:44 Uncaught Error: 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.
    at invariant (invariant.js:44)
    at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (instantiateReactComponent.js:77)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:367)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)
    at mountComponentIntoNode (ReactMount.js:104)
    at ReactReconcileTransaction.perform (Transaction.js:140)
    at batchedMountComponentIntoNode (ReactMount.js:126)
    at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:140)
    at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62)

kurtzilla avatar Feb 01 '17 01:02 kurtzilla

Stranger still.. I just cloned a new local repo from the master, did npm install/npm start and am receiving the same error.

kurtzilla avatar Feb 01 '17 02:02 kurtzilla

i just started this tuto, i get error in video numer 2 !!

just as i use <Link to="games">Games</Link> (i didn't forget to import it ) everything crashed,

i'm thinking it's because the router is in alpha, something changed

ouss4m4 avatar Feb 01 '17 10:02 ouss4m4

This happened for me too... To fix it, I just made sure my react-router was the alpha In package.json use: "react-router": "4.0.0-alpha.5",

kelleysy avatar Feb 08 '17 06:02 kelleysy

Also be sure to remove node_modules rm -rf node_modules & then do npm install

kelleysy avatar Feb 08 '17 06:02 kelleysy

Thank you @kelleysy I had tried changing the version as well, however, I had not removed the ^ (as in "^4.0.0-alpha.5")

========================================== After a bit more sleuthing...

In this project, when I include '^4.0.0-alpha.6I receive the same error. Let's call this project, project A. I have another project using^4.0.0-alpha.6` as well, and it works just fine. Let's call it project B

After I do npm install, npm list react-router yields: project A [email protected] (same when including ^4.0.0-alpha.5) project B [email protected]

So something about this particular project, project A, is rewriting the version to beta Both projects use react-scripts 0.8.5

Can anyone shed any light on why this project (project A) rewrites the version to beta.5?

kurtzilla avatar Feb 08 '17 15:02 kurtzilla

thanks @kelleysy this worked for me!

JohnnyKNL avatar Mar 10 '17 15:03 JohnnyKNL