ERROR: "Class extends value undefined is not a constructor or null" after running Next.js 13 with app dir about reactstrap

[hsk-kr]

You should use

"use client";

on the top of the file you used a component NavLink.

[naseef0]

You should use

"use client";

on the top of the file you used a component NavLink.

@hsk-kr I didn't use NavLink but instead installed reactstrap and re-ran the Next.js app. However, I encountered the error mentioned above during this process.

[hsk-kr]

@naseef0 I installed reactstrap and ru-run the Next.js app. It seems working out well.

The following is my package.json.

{
  "name": "reactstrap-test-01",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@types/node": "20.2.1",
    "@types/react": "18.2.6",
    "@types/react-dom": "18.2.4",
    "bootstrap": "^5.2.3",
    "eslint": "8.40.0",
    "eslint-config-next": "13.4.3",
    "next": "13.4.3",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "reactstrap": "^9.1.10",
    "typescript": "5.0.4"
  }
}

[hetu06]

I added a "user client" page, however it didn't work because of an issue that showed me in the console how to fix it.

https://ibb.co/VYxHsYV

You may view the screenshot I uploaded here.

Let me know if there is a solution, please.

Many thanks

[LowScarlet]

same here, idk why

[naseef0]

Anu updates?

[acocheo]

same here

[dedikisme]

add "use client" on components that call reactstrap element and the children will automatically render as client.
for example you call reactstrap components from layout.tsx then you should put "use client" on layout.tsx
I solved with this

https://nextjs.org/docs/app/building-your-application/rendering/client-components

[jorgev259]

Any updates on this