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

[naseef0]

• components: NavLink
• reactstrap version #9.1.10
• react version #18.2.0
• bootstrap version #x.x.x
• nextjs version #13.4.2

What is happening?

After installing reactstrap in to my next 13 app Showing error "Class extends value undefined is not a constructor or null"
I dint even import any components from reactstrap. still showing this error

What should be happening?

Steps to reproduce issue

1. create next js 13 app with app dir
2. install latest reactstrap
3. npm run dev

Error message in console

• error node_modules\reactstrap\lib\NavLink.js (35:37) @ Component
• error Class extends value undefined is not a constructor or null

- error node_modules\reactstrap\lib\NavLink.js (35:37) @ Component
- error Class extends value undefined is not a constructor or null

This might be caused by a React Class Component being rendered in a Server Component, React Class Components only works in Client Components. Read more: https://nextjs.org/docs/messages/class-component-in-server-component

This might be caused by a React Class Component being rendered in a Server Component, React Class Components only works in Client Components. Read more: https://nextjs.org/docs/messages/class-component-in-server-component
    at __webpack_require__ (C:\Users\Naseef\OneDrive\Desktop\playground\poc\saleor\storefront\.next\server\webpack-runtime.js:33:42)
    at __webpack_require__ (C:\Users\Naseef\OneDrive\Desktop\playground\poc\saleor\storefront\.next\server\webpack-runtime.js:33:42)
    at eval (./src/components/core/Container.jsx:5:68)
    at Object.(sc_server)/./src/components/core/Container.jsx (C:\Users\Naseef\OneDrive\Desktop\playground\poc\saleor\storefront\.next\server\app\[lang]\page.js:7067:1)  
    at __webpack_require__ (C:\Users\Naseef\OneDrive\Desktop\playground\poc\saleor\storefront\.next\server\webpack-runtime.js:33:42)
    at eval (./src/app/[lang]/page.js:8:73)
    at Object.(sc_server)/./src/app/[lang]/page.js (C:\Users\Naseef\OneDrive\Desktop\playground\poc\saleor\storefront\.next\server\app\[lang]\page.js:7056:1)
    at Function.__webpack_require__ (C:\Users\Naseef\OneDrive\Desktop\playground\poc\saleor\storefront\.next\server\webpack-runtime.js:33:42)
null

Code

[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