Cannot read properties of null (reading 'useRef') | JavaScript Mastery - Programming & Coding Community | Page 1

slender violet Jul 12, 2023, 11:35 AM

#

📎 message.txt

#

please help

mortal idol Jul 12, 2023, 11:46 AM

#

oh, seems like you haven't imported useRef

slender violet Jul 12, 2023, 11:47 AM

#

wait why do we need to import it

mortal idol Jul 12, 2023, 11:48 AM

#

You need to import all the methods/hooks you're going to use

#

Here's a very basic example: https://www.w3schools.com/react/showreact.asp?filename=demo2_react_useref

slender violet Jul 12, 2023, 11:54 AM

#

but

#

i dont remember using useRef anywhere

#

why do i still have to import it?

mortal idol Jul 12, 2023, 11:56 AM

#

well the error definitely is useRef related

slender violet Jul 12, 2023, 11:58 AM

#

Cannot read properties of null (reading 'useRef')

#

i get the same error

#

TypeError: Cannot read properties of null (reading 'useRef')

mortal idol Jul 12, 2023, 12:00 PM

#

from which line?

slender violet Jul 12, 2023, 12:02 PM

#

at Object.useRef

#

at BrowserRouter

#

at so many places

#

line is not specified

slender violet Jul 12, 2023, 1:55 PM

#

hey

#

what could be the problem here?

slender violet Jul 12, 2023, 3:01 PM

#

i shut down my computer, and ran npm start again

#

now the screen is white - no error whatsoever

thin pagoda Jul 12, 2023, 3:03 PM

#

slender violet now the screen is white - no error whatsoever

Nothing in the browser? What does the DOM look like?

slender violet Jul 12, 2023, 3:05 PM

#

when i try to inspect it

#

in the console: DevTools failed to load source map: Could not load content for

#

Uncaught TypeError: Cannot read properties of null (reading 'useRef')

#

the same set of errors

thin pagoda Jul 12, 2023, 3:07 PM

#

Which component are these comiung from? I dont see toLowerCase or useRef in the code above?

slender violet Jul 12, 2023, 3:08 PM

#

yeah that's exactly what im confused abt

#

i never used useRef, and that's causing the main problem. I even tried importing it

thin pagoda Jul 12, 2023, 3:09 PM

#

Can you please screenshot the entire error? It should contain a stacktrace

#

Yeah weird, can we maybe double check your package.json?

slender violet Jul 12, 2023, 3:13 PM

#

{
"name": "countword",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

thin pagoda Jul 12, 2023, 3:14 PM

#

I think you are missing react-router-dom?

slender violet Jul 12, 2023, 3:14 PM

#

in package.json?

#

i mean i npm installed it

thin pagoda Jul 12, 2023, 3:16 PM

#

I would try to install it again as it should be listed as a dependency

slender violet Jul 12, 2023, 3:16 PM

#

lemme try that then

#

nope

#

it's the same issue again

thin pagoda Jul 12, 2023, 3:18 PM

#

Can you share the updated package.json?

slender violet Jul 12, 2023, 3:19 PM

#

{
"name": "countword",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

thin pagoda Jul 12, 2023, 3:19 PM

#

react-router-dom is still not there

slender violet Jul 12, 2023, 3:20 PM

#

yeah

thin pagoda Jul 12, 2023, 3:21 PM

#

So that is the first thing that will need to be resolved. Do you have multiple package.json's?

slender violet Jul 12, 2023, 3:21 PM

#

am i supposed to npm run build it?

#

yes one inside src and another one outside

thin pagoda Jul 12, 2023, 3:21 PM

#

You should only need to do npm install react-router-dom

#

Hm, seems strange to have one inside SRC. Do you know why that is?

slender violet Jul 12, 2023, 3:22 PM

#

no

#

the inside the src one is the one i sent above

#

the other package.json file is a lot shorter

#

and it has that react-router-dom there

thin pagoda Jul 12, 2023, 3:23 PM

#

My hunch is that we only want that outer package.json

slender violet Jul 12, 2023, 3:23 PM

#

with just the dependencies?

thin pagoda Jul 12, 2023, 3:24 PM

#

You likely want all dependencies, but just in a single outer package.json

slender violet Jul 12, 2023, 3:24 PM

#

{
"dependencies": {
"react-router-dom": "^6.14.1",
"react-speech": "^1.0.2",
"react-speech-recognition": "^3.10.0"
}
}

slender violet Jul 12, 2023, 3:24 PM

#

thin pagoda You likely want all dependencies, but just in a single outer package.json

right, so should i delete the one inside src

#

or copy paste what's there to the other shorter package.json file?

thin pagoda Jul 12, 2023, 3:26 PM

#

slender violet right, so should i delete the one inside src

I would copy paste and then add in these additional dependencies to the existing dependency object

#

And then run npm install from the root of the project

#

{
  "name": "countword",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.14.1",
    "react-speech": "^1.0.2",
    "react-speech-recognition": "^3.10.0"
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}```

slender violet Jul 12, 2023, 3:27 PM

#

will do that

thin pagoda Jul 12, 2023, 3:27 PM

#

If you are doing some sort of monorepo setup, please ignore me. But I am assuming that is not the case

slender violet Jul 12, 2023, 3:28 PM

#

i also have two package-lock.json. should that be a problem?

thin pagoda Jul 12, 2023, 3:29 PM

#

We can clear those out

slender violet Jul 12, 2023, 3:29 PM

#

delete both? what do they do anyways?

thin pagoda Jul 12, 2023, 3:29 PM

#

As long as the package json is correct everything else we can generate

#

Yes you can delete both as well as any node_moudles folders

#

lock files record the exact versions of packages you are using so when other people run npm install they get the same thing.

#

https://www.atatus.com/blog/package-json-vs-package-lock-json/#:~:text=your entire problem.-,package-lock.,sub-dependencies and their versions.

Atatus Blog - For DevOps Engineers, Web App Developers and Server Admins.

Package.json vs Package-lock.json

Explore the differences between package.json and package-lock.json files in Node.js projects. Learn how to manage dependencies for reliable builds.

slender violet Jul 12, 2023, 3:33 PM

#

sh: react-scripts: command not found

#

this is what it says now

#

is this how it's supposed to look like?

thin pagoda Jul 12, 2023, 3:36 PM

#

Yeah that looks right

#

Can you ss the terminal output when you see that error?

#

Is this project on GitHub by chance?

slender violet Jul 12, 2023, 3:40 PM

#

no why?

thin pagoda Jul 12, 2023, 3:42 PM

#

Just would be quicker to clone and try and get it running.

#

If react scripts is installed it should be able to run

slender violet Jul 12, 2023, 3:44 PM

#

do i have to manually install it rn? this is my first react project, so im kinda confused

thin pagoda Jul 12, 2023, 3:44 PM

#

No npm install should do that

slender violet Jul 12, 2023, 3:45 PM

#

npm install react scripts

thin pagoda Jul 12, 2023, 3:45 PM

#

If you have the package json I posted above you should only need to do npm install

slender violet Jul 12, 2023, 3:48 PM

#

okay

thin pagoda Jul 12, 2023, 3:49 PM

#

If you want you can also delete node_modules and zip the project. Drop it here and I can try to run it on my end and see if anything changes.

slender violet Jul 12, 2023, 3:51 PM

#

It says 222 packages are looking for funding
run npm fund for details

thin pagoda Jul 12, 2023, 3:52 PM

#

Cool you can ignore that bit

#

Now if you run npm start does it still say the command can't be found?

slender violet Jul 12, 2023, 3:53 PM

#

yes

thin pagoda Jul 12, 2023, 3:54 PM

#

Hm, I am not totally sure then

slender violet Jul 12, 2023, 3:56 PM

#

should i just create a new folder and start the project over again

#

ill copy paste the code

#

idk what to do with this at this point

thin pagoda Jul 12, 2023, 3:57 PM

#

It is hard for me to say what is going wrong but that might not be a bad idea.

#

You could try dropping your code https://stackblitz.com/ here to share

StackBlitz

StackBlitz | Instant Dev Environments | Click. Code. Done. - StackB...

#

That won't fix it, but we could more easily debug

slender violet Jul 12, 2023, 4:00 PM

#

this is taking forever to load

#

should i just upload a zipped file?

thin pagoda Jul 12, 2023, 4:01 PM

#

LIES

thin pagoda Jul 12, 2023, 4:01 PM

#

slender violet should i just upload a zipped file?

Yeah IMO this is the easiest

#

Just delete node_modules to save size.

#

You can re-add them locally with npm install

mortal idol Jul 12, 2023, 4:03 PM

#

I only run pnpm. This loads all modules once and then just links to them.

slender violet Jul 12, 2023, 4:04 PM

#

thin pagoda LIES

it worked after some time lmao

thin pagoda Jul 12, 2023, 4:05 PM

#

mortal idol I only run pnpm. This loads all modules once and then just links to them.

Yeah pnpm is great. I like using it.

slender violet Jul 12, 2023, 4:05 PM

#

what is pnpm

thin pagoda Jul 12, 2023, 4:06 PM

#

To be totally honest, I wouldn't worry about it rn if this is your first react project

#

Stackblitz -> 🐢

mortal idol Jul 12, 2023, 4:08 PM

#

It is another package manager. Works rather like npm but you only "install" hardlinks in your project to modules which are globally available

slender violet Jul 12, 2023, 4:10 PM

#

thin pagoda To be totally honest, I wouldn't worry about it rn if this is your first react p...

yeah. i should just create a new project then?

thin pagoda Jul 12, 2023, 4:10 PM

#

If you can drop a zip folder I am now invested in getting this working lol

#

Stackblitz is still loading, but I am losing hope by the second

slender violet Jul 12, 2023, 4:11 PM

#

mortal idol It is another package manager. Works rather like npm but you only "install" hard...

that sounds so much more cooler. why dont many people use pnpm over npm?

thin pagoda Jul 12, 2023, 4:12 PM

#

We use pnpm at work. It is a pretty popular option actually. I think it is slightly more complex in practice compared to npm and has slightly less support.

mortal idol Jul 12, 2023, 4:16 PM

#

Yeah, I also realised some known commands from npm are not supported in pnpm. But I love it. I often forgot to remove the node_modulers folder and as mac doesn't have to much mem... 🙄

mortal idol Jul 12, 2023, 4:17 PM

#

slender violet that sounds so much more cooler. why dont many people use pnpm over npm?

Good question IMO 😂

thin pagoda Jul 12, 2023, 4:19 PM

#

Yeah for example package patching was not officially supported until recently

slender violet Jul 12, 2023, 4:20 PM

#

thin pagoda If you can drop a zip folder I am now invested in getting this working lol

its so strange. my computer is not able to compress and zip the file. does stackblitz load for you now?

thin pagoda Jul 12, 2023, 4:21 PM

#

slender violet its so strange. my computer is not able to compress and zip the file. does stack...

Still spinning unfortuately

#

Not a bad time to learn how to put a repo on GitHub 😅

slender violet Jul 12, 2023, 4:21 PM

#

oh well

#

i can do that

thin pagoda Jul 12, 2023, 4:27 PM

#

Ay sick!

slender violet Jul 12, 2023, 4:27 PM

#

here

thin pagoda Jul 12, 2023, 4:33 PM

#

Uh, it works for me!

slender violet Jul 12, 2023, 4:34 PM

#

wait what

thin pagoda Jul 12, 2023, 4:34 PM

#

I had to delete package-lock.json. Then run npm install then npm start

#

slender violet Jul 12, 2023, 4:34 PM

#

lemme try that

#

does routing work?

thin pagoda Jul 12, 2023, 4:35 PM

#

I am doing all of this from the root of the project as well, not src

#

Seems to

slender violet Jul 12, 2023, 4:36 PM

#

okay cool

#

ill try npm install again

#

when i try to run npm install in the root, i get this error This is related to npm not being able to find a file.

#

its only when i change the directory the file starts

thin pagoda Jul 12, 2023, 4:38 PM

#

I was getting a version error when running npm install until I deleted package lock but that was the only issue I saw

#

mkdir tmp
cd tmp
git clone [email protected]:Axiom0599/React-debugging.git
cd React-debugging
rm package-lock.json
npm install
npm start

This would be the full process I did

slender violet Jul 12, 2023, 4:41 PM

#

right

#

letsss gooo it works now

#

so the issue was with package.json?

#

and package-lock.json?

#

i still dont understand why i had two package.json though

thin pagoda Jul 12, 2023, 4:50 PM

#

slender violet so the issue was with package.json?

Yeah I think the main issue was having two package.jsons and not having react-router-dom in the main one

#

And in the process the lock file got broken. Not sure if it was broken before we started, or broke in the troubleshooting process.

slender violet Jul 12, 2023, 4:52 PM

#

Yeahh i get it now! Thanks a lottt for your help. You saved me hours of frustration:)

thin pagoda Jul 12, 2023, 4:52 PM

#

No problem! Glad we got it on github, stackblitz is still loading kek

slender violet Jul 12, 2023, 4:53 PM

#

this makes me more excited to learn more of amazing stuff. thanks.

thin pagoda Jul 12, 2023, 4:53 PM

#

Glad to hear it! Thanks to @mortal idol as well cheers

slender violet Jul 12, 2023, 4:53 PM

#

thin pagoda No problem! Glad we got it on github, stackblitz is still loading <:kek:78617499...

thin pagoda Jul 12, 2023, 4:54 PM

#

Boot a fresh environment is less than 10,000,000,000,000 milliseconds

#

I guess if they use Unix time, they aren't wrong troll

slender violet Jul 12, 2023, 4:54 PM

#

YESS thanks BarbWire (i cant tag u). Also the slowmode sucks

thin pagoda Jul 12, 2023, 4:55 PM

#

Oh I was actually going to ask if that was impacting you

#

Let me reduce it

slender violet Jul 12, 2023, 4:55 PM

#

thin pagoda I guess if they use Unix time, they aren't wrong <:troll:942889917523054682>

YESS XD

thin pagoda Jul 12, 2023, 4:55 PM

#

Reduced slowmode to 5 seconds

#

It was set to 15

slender violet Jul 12, 2023, 4:56 PM

#

cool! thanks

thin pagoda Jul 12, 2023, 4:56 PM

#

Thanks for the feedback! Alright, back to work lol. Have a good one! 👋

mortal idol Jul 12, 2023, 4:57 PM

#

thin pagoda Glad to hear it! Thanks to <@616164087512170513> as well <a:cheers:8253569985130...

Oh, I haven't done anything! You solved it 🙂

#Cannot read properties of null (reading 'useRef')