Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialbenjaminmosery
6,346 PointsType error: n is not defined
I attempting to learn how to implement React Redux in my scoreboard application, per the videos hosted by treehouse. (Lesson I am following: https://teamtreehouse.com/library/building-applications-with-react-and-redux)
However, I am receiving the following errors:
Error #1: TypeError: n is undefined Scoreboard.js:23:6
Using the debugger, the following code is shown:
const playerComponents = players.map((player, index) => (
<Player
index = {index}
name = {player.name}
score = {player.score}
key = {player.name}
updatePlayerScore = {updatePlayerScore}
removePlayer = {removePlayer}
/>
));
Error #2 TypeError: "n is undefined" react-dom.production.min.js:187:139
valuehttp://localhost:8080/bundle.js:6:52103Cihttp://localhost:8080/bundle.js:14:62169Nihttp://localhost:8080/bundle.js:14:67055uahttp://localhost:8080/bundle.js:14:76632cahttp://localhost:8080/bundle.js:14:76939Wahttp://localhost:8080/bundle.js:14:80513Vahttp://localhost:8080/bundle.js:14:79984zahttp://localhost:8080/bundle.js:14:79810Uahttp://localhost:8080/bundle.js:14:79183hahttp://localhost:8080/bundle.js:14:78430Zahttp://localhost:8080/bundle.js:14:85764tshttp://localhost:8080/bundle.js:14:85977renderhttp://localhost:8080/bundle.js:14:89672fshttp://localhost:8080/bundle.js:14:87876Jahttp://localhost:8080/bundle.js:14:85182fshttp://localhost:8080/bundle.js:14:87811renderhttp://localhost:8080/bundle.js:14:90459<anonymous>http://localhost:8080/bundle.js:22:5471Thttp://localhost:8080/bundle.js:1:7171rhttp://localhost:8080/bundle.js:1:565<anonymous>http://localhost:8080/bundle.js:22:106266Thttp://localhost:8080/bundle.js:1:7171<anonymous>http://localhost:8080/bundle.js:1:7611<anonymous>http://localhost:8080/bundle.js:1:2
Using the debugger, the following code is shown from Webpack:
A("166"):void 0,null;a=cg($f.current);if(Cg(b))c=b.stateNode,e=b.type,f=b.memoizedProps,c[C]=b,c[Ma]=f,d=Ue(c,e,f,a,d),b.updateQueue=d,null!==d&&Lg(b);else{a=Pe(e,c,d,a);a[C]=b;a[Ma]=c;a:for(f=b.child;null!==f;){if(5===f.tag||6===f.tag)a.appendChild(f.stateNode);else if(4!==f.tag&&null!==f.child){f.child.return=f;f=f.child;continue}if(f===b)break;for(;null===f.sibling;){if(null===f.return||f.return===b)break a;f=f.return}f.sibling.return=f.return;f=f.sibling}Re(a,e,c,d);Ze(e,c)&&Lg(b);b.stateNode=
a}null!==b.ref&&(b.effectTag|=128)}return null;case 6:if(a&&null!=b.stateNode)Rg(a,b,a.memoizedProps,c);else{if("string"!==typeof c)return null===b.stateNode?A("166"):void 0,null;d=cg(bg.current);cg($f.current);Cg(b)?(d=b.stateNode,c=b.memoizedProps,d[C]=b,Ve(d,c)&&Lg(b)):(d=Qe(c,d),d[C]=b,b.stateNode=d)}return null;case 14:return null;case 16:return null;case 10:return null;case 11:return null;case 15:return null;case 4:return eg(b),Pg(b),null;case 13:return Yf(b),null;case 12:return null;case 0:A("167");
default:A("156")}}function Tg(a,b){var c=b.source;null===b.stack&&null!==c&&vc(c);null!==c&&tc(c);b=b.value;null!==a&&2===a.tag&&tc(a);try{b&&b.suppressReactErrorLogging||console.error(b)}catch(d){d&&d.suppressReactErrorLogging||console.error(d)}}function Ug(a){var b=a.ref;if(null!==b)if("function"===typeof b)try{b(null)}catch(c){Vg(a,c)}else b.current=null}
function Wg(a){"function"===typeof Gf&&Gf(a);switch(a.tag){case 2:Ug(a);var b=a.stateNode;if("function"===typeof b.componentWillUnmount)try{b.props=a.memoizedProps,b.state=a.memoizedState,b.componentWillUnmount()}catch(c){Vg(a,c)}break;case 5:Ug(a);break;case 4:Xg(a)}}function Yg(a){return 5===a.tag||3===a.tag||4===a.tag}
function Zg(a)
Here is my repo from Github, complete with my program and its code. Any suggestions would be helpful.
https://github.com/Benmosery/React-Scoreboard-Updated
I've followed all of Guil's suggestions, but my Scoreboard still will not be displayed when npm is run.
Ben
1 Answer
Sebastian H
19,905 PointsJust in case any peoples of the future have this same problem, I had this error and it was actually coming from the firefox Redux DevTools browser extension. The chrome one worked fine for me with the same settings so I just switched to that rather than going through a complex store reconfiguration when I'm still learning.