Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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 undefined

I am attempting to learn Redux through the "Building Applications with React and Redux" portion of the React Redux track. However, my scoreboard, used as the project to explain Redux, is not displaying when the project is run.

I've attempted to use the forums to address the issue but no one seems to have any suggestions.

I get the following error from the browser's web console when attempting to run my program, despite the fact that Node compiles the program correctly:

TypeError: n is undefined[Learn More] Scoreboard.js:23:6

When using the web console's Debugger, I get sent to the following portion of my program:

const PlayerComponents = players.map((player, index) => (

));

Any help would be appreciated. If anything else is needed please let me know.

Thanks,

Ben

8 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there, benjaminmosery! First, congratulations on learning how to use git and GitHub! There's a bit of a learning curve on that but well worth your time, I guarantee you. I cloned your repo and ran it on my system, and I got the same errors you did. But then I read something interesting. The PropTypes was moved to its own library! So although your import statements aren't generating any errors for your PropTypes, they aren't actually importing them either :scream:

But luckily this is pretty easily fixed. In the very first response you had to Steven Parker , you showed this line:

import PropTypes from 'prop-types';

This is correct. This is where PropTypes was moved to. But you have several other files which are using the old import for PropTypes starting with your Counter.js file. In your Counter.js file, you have:

import React, {PropTypes} from 'react';

You should change that to two lines:

import React from 'react';
import PropTypes from  'prop-types';

When you fix that it will rebuild the project and you'll see another error which will point out another file where this same thing is occurring. Once I went through and fixed all the import statements, your app worked like a charm!

Hope this helps! :sparkles:

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

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! :sparkles:

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

Steven Parker
Steven Parker
218,848 Points

One slight correction, JavaScript doesn't determine whether file names and directory names are case-sensitive. That's up to the operating system being used. The workspaces are implemented using Linux, which does make them case-sensitive.

That said, it's still a "best practice" to use the same capitalization in the code as used in the file name.

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Steven Parker yes, but what I meant is that that Node.js is specifically case sensitive in regards to files and paths. See this issue here. I've altered my answer to reflect this to be more clear.

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Steven Parker You're correct. If running on a Windows system, you can import Player instead of player. I clearly made a typo in my testing. That being said benjaminmosery, if you're working on a Mac or Linux system, you will need to correct that capitalization to get it to work. But make sure to check both files player.js and Scoreboard.js for consistency in capitalization. Something is off there :smiley:

benjaminmosery
benjaminmosery
6,346 Points

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!

benjaminmosery
benjaminmosery
6,346 Points

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

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

We're only really going to be able to help you debug this if we can see all your code. The easiest way to do this would be to push this up to a GitHub repository and link it here. :sparkles:

benjaminmosery
benjaminmosery
6,346 Points

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

benjaminmosery
benjaminmosery
6,346 Points

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?

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

It's hard to say. As stated we need to see all your code. Unfortunately, the GitHub repo that you posted earlier has not been updated since you made the corrections. What I can tell you was that I corrected the import statements across the board and it worked perfectly for me. Before I did that nothing appeared on the page, nor will it, as long as you have these types of errors. As Steven Parker pointed out previously, the error is very often not on the line that is indicated. The error generally happens somewhere before it. My suggestion is for you to updated your repository with your current changes so we can take another look.

benjaminmosery
benjaminmosery
6,346 Points

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

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

This repo doesn't contain all the files nor even the package.json which would be required to install any dependencies. I cannot run this code as is and your previous repository results in a 404. Also, can you confirm that your version of Node.js is up to date?

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

benjaminmosery You might consider posting this as a new question to get some more eyes on it. That being said, I highly recommend you post the question along with a GitHub repository that allows us to see all the code. While the node_modules will not be needed we will at least need the package.json so that we can load any depencies.