Type error: n is undefined

Hi there, benjaminmosery! Sorry for this late reply, but I had some issues with my system which are now worked out and can finally run the code to see what is not working. Honestly, I don't know why you received the particular error that you did other than it might be something to do with your browser. I also received errors about players being undefined but required. However, it said nothing about "n".

To be able to answer this with 100% accuracy, I would need to see all of your code and the file structure. But let's assume for the moment that your file structure looks just like Guil's.

Here's the first discrepency:

Your import statement:

import * as PlayerActionCreators from '../actions/Player';

Guil's import statement:

import * as PlayerActionCreators from '../actions/player';

Note the capitalization here. File names and directory names are case-sensitive in Node.js. If you look in the downloads tab, you can find the project files in both their starting states and completed states. Inside the actions directory is a player.js, but there is no Player.js in the actions directory. I don't believe your player.js was even being loaded at this point.

This player.js file contains functions for addPlayer, removePlayer, and updatePlayerScore. However, in your code you have multiple references to AddPlayer, RemovePlayer, and UpdatePlayerScore. Note the capitalization here. If you have not changed the code inside the player.js, to also use this capitalization then this will not work. Remember, all this is case sensitive. What I find here are multiple inconsistencies with capitalization which I believe is the root cause of your problem. When I correct all the capitalization issues, I can run the code in Chrome with no errors.

Ideally, we would have a link to a repository on GitHub to help assist you as this is one of those larger projects containing multiple files and subdirectories.

Hope this helps!

edited for alteration from "JS" to "Node.js"

Steven, my apologies. Thanks again for your help.

Jennifer, thanks! I'll be sure to make the appropriate fixes and get back to you. Much appreciated!

Jennifer, after implementing your capitalization changes, I still get the following error:

TypeError: o.PropTypes is undefined[Learn More] Counter.js:20:2

In the Debugger of the Web console, this points to the following code in my Counter.js file:

Counter.propTypes = {
  updatePlayerScore: PropTypes.func.isRequired,
  score: PropTypes.number.isRequired,
  index: PropTypes.number.isRequired
};

export default Counter;

I'm using windows 10 to run this program and using the Atom text editor, same as Guil in the videos. I still don't know what I'm doing wrong. Any suggestions would be appreciated. If you need to see any other files or subdirectories to aid in solving this issue please let me know.

Thanks again,

Ben

So after learning how to use Github (thank you Treehouse for the Git primer, very helpful), I've posted my React Scoreboard project as its own repository.

https://github.com/Benmosery/React-Scoreboard/tree/master/React%20Redux%20Course

Can someone take a look and tell me what needs fixing? When the program is run, the web console in the browser only reads:

TypeError: o.PropTypes is undefined Counter.js 21:2

When I use the debugger, it points to the following code:

Counter.propTypes = {
    updatePlayerScore: PropTypes.func.isRequired,
    score: PropTypes.number.isRequired,
    index: PropTypes.number.isRequired,
};

I see nothing wrong with this code, as it is what is written in Guil's videos. Any ideas would be greatly appreciated.

Ben

I'm now getting the following error, despite fixing the import statements as mentioned earlier:

TypeError: n is undefined Scoreboard.js:23:6

In the debugger, this points me to:

const playerComponents = players.map((player, index) => (
  <Player

In addition, I am also getting this error as well:

TypeError: "n is undefined" react-dom.production.min.js:187:139T

valuehttp://localhost:8080/bundle.js:6:52287Cihttp://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

In the debugger, this points me to code in Webpack:

     function Sg(a,b){var c=b.pendingProps;switch(b.tag){case 1:return null;case 2:return of(b),null;case 3:eg(b);pf(b);var d=b.stateNode;d.pendingContext&&(d.context=d.pendingContext,d.pendingContext=null);if(null===a||null===a.child)Cg(b),b.effectTag&=-3;Pg(b);return null;case 5:fg(b);d=cg(bg.current);var e=b.type;if(null!==a&&null!=b.stateNode){var f=a.memoizedProps,g=b.stateNode,h=cg($f.current);g=Se(g,e,f,c,d);Qg(a,b,g,e,f,c,d,h);a.ref!==b.ref&&(b.effectTag|=128)}else{if(!c)return null===b.stateNode?
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 

Should I uninstall and reinstall webpack to fix the second bug? I've fixed all of the bugs up to this point and the Scoreboard does not even appear on the webpage created by npm. Any thoughts?

Here is the Repo with the latest corrections, including both the aforementioned errors and the changed import statements.

https://github.com/Benmosery/React-Scoreboard-Updated

Sorry, here is the correct repo:

https://github.com/Benmosery/React-Scoreboard-Updated/blob/master/React%20Redux%20Course/src/components/Header.js

Yes, my latest version of node is up to date.