Next.js Discord

Discord Forum

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

Unanswered
Thrianta posted this in #help-forum
Open in Discord
Avatar
ThriantaOP
I have a pretty fresh project, I am getting a type error for null on state relating to a component called prompt input
I have a pretty simpe function function PromptInput() { return(some HTML for layout) }
Once I add const [input, setInput] = useState(''); I get the error : Unhandled Runtime Error
TypeError: Cannot read properties of null (reading 'useState') which references this new line.
I have wrestled with this for a few hours, I even started a fresh project and just brought in the component and layout code & home page code, still get the exact same error, am i missing some fundamental change or like or what seems like a bug not sure. Please help =/
Image
Image
Image
Image

71 Replies

Avatar
Cape horse mackerel
Maybe it's VSCode thing, have you tried to restart your VSCode?
Avatar
ThriantaOP
that and my machine
getting the error in my browser when i run the app , everything looks find in vs code
Image
sorry i do get this in terminal on vs code Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could
happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
⨯ node_modules\react\cjs\react.development.js (1622:0) @ useState
⨯ TypeError: Cannot read properties of null (reading 'useState')
at PromptInput (./src/components/PromptInput.tsx:12:78)
null
Avatar
Cape horse mackerel
can you put export default function PromptInput() {} instead of function PromptInput and then exporting it below
Avatar
ThriantaOP
yeah thats not a problem, still gives the same error though =/
same with functional arrow ocomponent
https://github.com/Digitl-Alchemyst/alchemy-image
for the code
Avatar
Cape horse mackerel
that's weird..
Avatar
ThriantaOP
so tis safe to start banging my head on a wall then?
Avatar
Cape horse mackerel
what did you use to create a project?
Avatar
Cape horse mackerel
Oh ok, I can see where is the problem, you've modified tsconfig.json
so when I remove all paths it works
"@/c/*": [
  "./src/components/*" => "./src/app/components/*" // this should be like this
],
Avatar
ThriantaOP
create next app @ latest
that is a custom import schema
Image
oh i see
the app
oh no that wont work the component folder sits at the same level as app not inside
Avatar
ThriantaOP
This cannot be real life....
started a totally new project, same results the moment i try to use state.
Image
Avatar
Cape horse mackerel
If you're using the same tsconfig.json file there is obviously an issue
Avatar
risky
im pretty sure the error in that page is that option isn't defined anywhere, so TS says it is null and thus gets very confused...
Avatar
ThriantaOP
and in the previous project as well where i have the state set as an empty string?
{
  "compilerOptions": {
    "target": "es6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noUnusedLocals": true,
    "jsx": "preserve",
    "incremental": true,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "noImplicitAny": false,
    "noImplicitThis": true,
    "sourceMap": true,
    "strictNullChecks": false,
    // "target": "ES2015",
    "plugins": [
      {
        "name": "next"
      }
    ],
    "rootDir": "./",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@/a/*": ["./src/app/*"],
      "@/c/*": ["./src/components/*"],
      "@/h/*": ["./src/hooks/*"],
      "@/l/*": ["./src/lib/*"],
      "@/s/*": ["./src/styles/*"],
      "@/u/*": ["./src/util/*"],
      "#/*": ["./*"],
      "!/*": ["./public/*"],
      "$/*": ["./schemas/*"],
      "react": ["node_modules/react"]
    },
    "outDir": "./out"
  },
  "include": [
    "next-env.d.ts",
    "src/**/*.ts",
    "src/**/*.tsx",
    ".next/types/**/*.ts",
    "types.d.ts"
  ],
  "exclude": ["node_modules"]
}
i was wondering if it was my machine too, ive been having other issues outside of dev so i did a reformat last night fresh vs code fresh windows nothing but node and vs code installed still get errors in both projects
yesterday i also tried setting props for the first project and couldnt get anything to work on that end , i am new to typescript so its still a little confusing to me at times, this would be one of them for sure
and just for the record tried on next 13.5.2-.4 or 5 what ever what was released yesterday
Avatar
linesofcode
@Thrianta
Are you doing package dev by any chance
And linking a package to your project?
Using npm link?
react freaks out when it if there are multiple versions of it being used, which is often the case during linking
Avatar
ThriantaOP
i am not using link at all
i do get this though
Image
Avatar
linesofcode
Install the exact version of react and react dom
Instead of using ^
Avatar
ThriantaOP
and im not sure how this ties in to that or anything the whole multiple version of react thing
Avatar
linesofcode
Also add react and react dom to your package.json resolutions
(Look that up)
Avatar
ThriantaOP
as far as i understand from what i read yesterday the package file is correct here
Image
Avatar
linesofcode
🙃
Pin the packages and try again
And delete your node modules and locks
Avatar
ThriantaOP
not sure what pin the packages means
Avatar
linesofcode
Use exact package versions in package.json
Instead of ^18.2.0
And add a resolutions field too
Avatar
ThriantaOP
should i use =?
Avatar
linesofcode
Look at how the next package is listed in your screenshot.
Avatar
ThriantaOP
Image
Avatar
linesofcode
No = is needed
Avatar
ThriantaOP
bleh same result
is this a problem?
Image
Avatar
linesofcode
I don’t think so
Avatar
ThriantaOP
https://tenor.com/view/knocking-head-stupid-gif-22346679
Avatar
ThriantaOP
Dont understand why this doesnt work
Image
But this does
Image
oh I see its because I hadnt called the function yyet
Image
Avatar
ThriantaOP
Ugh still nothing, anyone out there that can crack this one will be a big time hero
Image
Avatar
ThriantaOP
bumping in hopes for some fresh insight into what im doing wrong
Avatar
Dayo
i cloned your repo.

tbh i'm not entirely sure what the issue was.

but here's what i did.

first, i moved all the dev dependencies in the package json that should be dependencies to dependencies x vice versa e.g react-dom should be a dependency. this is what the updated package json looks like

{
  "name": "alchemy-image",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@types/node": "20.8.2",
    "@types/react": "18.2.24",
    "@types/react-dom": "18.2.9",
    "autoprefixer": "10.4.16",
    "next": "13.5.4",
    "openai": "4.11.1",
    "postcss": "8.4.31",
    "prettier-plugin-tailwindcss": "0.5.5",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-icons": "4.11.0",
    "tailwind-scrollbar": "3.0.5",
    "tailwind-scrollbar-hide": "1.1.7",
    "tailwindcss": "3.3.3",
    "typescript": "5.2.2"
  },
  "devDependencies": {
    "prettier": "^3.0.3"
  }
}


then i noticed prettier wasn't working. so i deleted all the eslint configs and set the eslintrc.json to the initial - 

{
  "extends": "next/core-web-vitals"
}


then i reverted your tsconfig to the one that comes when you install next afresh - 

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}


after which i restarted vs code

and everything seems to work fine.
means that the first issue was i'm not sure how you created your repo 'cause if you installed with npx create-next-app@latest you should have the right deps where they should be

second, there may be an issue with your tsconfig so you may wanna check it out.

and then eslint. probably there was a problem with the installation as well.

my recommendation is to run npx create-next-app@latest and create a new repo and start adding new stuff.

hope that helps.
Avatar
ThriantaOP
ive pinpointed it now actually i really dove into it and it is certainly something in the ts confg file causing this im going through all the rules and such now to try to see why
thank you though i seem to have some how cuased my projects to create with a different ruleset in tsconfig not sure how, but after creating a new project on a fresh os it works fine, now i just want to understand why which ever setting is making it behave like that
Avatar
Dayo
alright cool.
all the best!
Avatar
ThriantaOP
haha now i dont even know what i elimated to get it working lol
Image
Avatar
ThriantaOP
still get the error in the 1st project, it renders though, even stranger it deploys to vercel
Image