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 trial

JavaScript Building Applications with React and Redux Putting it all Together Updating the Player, Counter and AddPlayerForm Components

benjaminmosery
benjaminmosery
6,346 Points

Type 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

Just 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.