{
  "name": "music-platform",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "prisma generate && next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@clerk/nextjs": "^4.23.2",
    "@prisma/client": "^5.2.0",
    "@radix-ui/react-alert-dialog": "^1.0.4",
    "@radix-ui/react-collapsible": "^1.0.3",
    "@radix-ui/react-dialog": "^1.0.4",
    "@radix-ui/react-dropdown-menu": "^2.0.5",
    "@radix-ui/react-icons": "^1.3.0",
    "@radix-ui/react-navigation-menu": "^1.1.3",
    "@radix-ui/react-slot": "^1.0.2",
    "@types/node": "20.5.3",
    "@types/react": "18.2.0",
    "@types/react-dom": "18.2.0",
    "autoprefixer": "10.4.15",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "cmdk": "^0.2.0",
    "eslint": "8.47.0",
    "eslint-config-next": "13.4.19",
    "lucide-react": "^0.269.0",
    "next": "13.4.19",
    "next-intl": "^2.20.0",
    "next-themes": "^0.2.1",
    "postcss": "8.4.28",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwind-merge": "^1.14.0",
    "tailwindcss": "3.3.3",
    "tailwindcss-animate": "^1.0.6",
    "typescript": "5.1.6"
  },
  "devDependencies": {
    "prisma": "^5.2.0"
  }
}

this is my package.json

I'm going crazy with this one 💀 can't seem to find anything wrong

Are you sure the error is from this file and that you've saved the file?

Yes it is here's the error

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

Source
app[locale]\components\CustomCollapsible\index.tsx (12:39) @ CustomCollapsible

10 |
11 | export function CustomCollapsible() {

12 | const [isOpen, setIsOpen] = useState(false);

| ^
13 |
14 | return (
15 | <Collapsible

"use client";

import { useTranslations } from "next-intl";
import { CustomCollapsible } from "./components/CustomCollapsible";

const Index = () => {
  const t = useTranslations("Index");
  return (
    <>
      <h1>{t("title")}</h1>
      <CustomCollapsible />
    </>
  );
};

export default Index;

Here is where i'm using it

Is there anything i can provide for this issue ? i have never faced such an issue especially not with useState

And just to confirm, the issue goes away if you remove useState and any state variables from that component?

Yep just did it right now and everything works seamlessly

"use client";

import { useTranslations } from "next-intl";
import { CustomCollapsible } from "./components/CustomCollapsible";
import { useState } from "react";

const Index = () => {
  const t = useTranslations("Index");
  const [state, setState] = useState(false);
  return (
    <>
      <h1>{t("title")}</h1>
      <CustomCollapsible />
    </>
  );
};

export default Index;

Even when i use it on another component the same issue pops back

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

Source
app[locale]\page.tsx (9:37) @ Index

7 | const Index = () => {
8 | const t = useTranslations("Index");

9 | const [state, setState] = useState(false);

| ^
10 | return (
11 | #Unknown Channel
12 | <h1>{t("title")}</h1>

@Bombay If you have time i would appreciate it if not it's fine too!

Hella wierd bug

Can you try using other name variables

Wait why you are using useState as variable name

Hmm where ? i'm only using useState as false for default value

const [state, setState] = useState(false);

This is correct syntax right ?

My bad sorry i misunderstood

np np i tried everything i tried changing variables going back versions in next

tried clearing .next folder

and even the error is unhelpful like what is TypeError: Cannot read properties of null (reading 'useState')

Yeah the error doesn't even make sense

I'm using pnpm

i might redo it with npm

maybe pnpm messed up some packages

Try resinstalling node modulez

I think react itself got messed up

Yeah will do that, i think react itself isnt

working as expected

from Context to State

even in context when i use it even inside a client component it says "Error: AuthContext not found"

Maybe reinstall would fix the issue

hopefully if it turns out to be a pnpm issue i'm never using it again

because once i had an issue with it and prisma

and i was banging my head against the wall for hours and turns out it's pnpm's fault

Try yarn or npm

you may have multiple versions of react and react-dom installed

are you using package linking by any chance?

I'm sorry i never heard of that

Does pnpm use package linking?

Yes it does actually

at least i believe i read something about it in their docs

Try resinstalling package with npm then

idk how pnpm handles that, but I've seen this error thrown before when there are multiple react versions, which usually happens when you're using npm or yarn link

using a different package manager is a good thing to try out

I'll check that further because i never heard of that and honestly i believe the issue is from multiple react versions

check out the resolutions field in package.json

Thank you! i hope that fixes everything i was ready to give up on app directory

Even in next-intl beta version i followed everything step by step and it gave me an error about not being able to use context in server components

when i never did use context in a server component i only followed the docs

Good luck figuring this out

(also, pages directory isnt so bad)

True and it has better support i feel

i think app directory isn't ready for production yet at least without hacky methods when using certain libraries

really depends on what you're making

Especially for internalization there is only next-intl available for it and it's in beta

I only recently started using app directory but still not in production (it will be though eventually)

Did you put "use client" on top the file.
Try resinstalling node modules and let us know if it fixed the issue

Yes i did use 'use client' and i'm currently reinstalling it npm is slow for some reason

It is production ready but for internalization and auth it's a mess as i see it currently

auth maybe not so much with clerk

i did have problems with internalizxation, auth not so muchj

how did you manage it at the end

I was using pages directory at first and a thing related to server data and navbar . I wasn't able to implement it in pages directory so i rewrote the code to app directory just for that

read the docs a bit more and search github for examples

That's the issue, seeing that there isn't an actual tried and tested solution for internalization

of course i got it working and all, but there isn't something like clerk for it as an example, even i18n-next isn't willing to support app directory yet

and i18n-intl is in beta for server components, and next-translate seems immature as a library but might use it

pages directory it is, I think stabililty and support > bleeding edge but i'm also afraid they will drop pages dir soon

👍

i just kicked off a project and it's using pages directory...

it worked great for the last 5 years?

it'll work for the next couple years too, at least for my purposes

Happy to hear that! i feel more confident about switching to pages directory now

Was the issue solved