Issue Station
Sign In
Tools hereToolbox

nextjs - 💡(How to fix) Fix Jab chahe tab chat mein online a sakte hain jab Marji jaaye tab video call per baat kar sakte hain [1 comments, 2 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
vercel/next.js#91046•Fetched 2026-04-08 00:19:02
View on GitHub
Comments
1
Participants
2
Timeline
7
Reactions
0
Author
vikram76rathod-cryptovikram76rathod-crypto
Participants
github-actions[bot]github-actions[bot]vikram76rathod-cryptovikram76rathod-crypto
Timeline (top)
labeled ×3closed ×1commented ×1issue_type_added ×1

Error Message

cn is not defined

at ChatWindow (src/components/chat/chat-window.tsx:96:31)
at Home (src/app/page.tsx:154:13)

Code Example

Please run next info in the root directory of your project and paste the results. You might need to use npx --no-install next info if next is not in the current PATH.
RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

[email protected]

To Reproduce

Error Type

Runtime ReferenceError

Error Message

cn is not defined

at ChatWindow (src/components/chat/chat-window.tsx:96:31)
at Home (src/app/page.tsx:154:13)

Code Frame

94 | <span className="text-sm font-bold leading-tight">{contact.name}</span> 95 | <div className="flex items-center gap-1.5">

96 | <div className={cn("h-2 w-2 rounded-full", contact.status === "online" ? "bg-green-500" : "bg-muted-foreground/30")} /> | ^ 97 | <span className="text-[10px] text-muted-foreground"> 98 | {contact.status === "online" ? "Online" : "Offline"} 99 | </span>

Next.js version: 15.5.9 (Turbopack)

Current vs. Expected behavior

https://github.com/vercel/next.js/issues/new?template=1.bug_report.yml

<img width="1408" height="768" alt="Image" src="https://github.com/user-attachments/assets/358ea001-24ae-4ee4-b224-27ac8b96a283" />

Provide environment information

Please run next info in the root directory of your project and paste the results. You might need to use npx --no-install next info if next is not in the current PATH.

Which area(s) are affected? (Select all that apply)

create-next-app, Internationalization (i18n)

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

Error Type

Runtime ReferenceError

Error Message

cn is not defined

at ChatWindow (src/components/chat/chat-window.tsx:96:31)
at Home (src/app/page.tsx:154:13)

Code Frame

94 | <span className="text-sm font-bold leading-tight">{contact.name}</span> 95 | <div className="flex items-center gap-1.5">

96 | <div className={cn("h-2 w-2 rounded-full", contact.status === "online" ? "bg-green-500" : "bg-muted-foreground/30")} /> | ^ 97 | <span className="text-[10px] text-muted-foreground"> 98 | {contact.status === "online" ? "Online" : "Offline"} 99 | </span>

Next.js version: 15.5.9 (Turbopack) contact.status98Next.js

extent analysis

Fix: Import / define the cn (class‑names) helper

The runtime error “cn is not defined” means the component is trying to call a utility that hasn’t been imported (or doesn’t exist).
cn is usually a thin wrapper around the popular classnames / clsx packages.

1️⃣ Install a class‑names library (if you don’t already have one)

# Choose one – both work the same for this use‑case
npm i classnames   # or: yarn add classnames
# or
npm i clsx         # or: yarn add clsx

2️⃣ Add the import to the file that uses cn

// src/components/chat/chat-window.tsx
import React from "react";

// ✅ If you installed `classnames`
import classNames from "classnames";
// or if you installed `clsx`
import clsx from "clsx";

// If you already have a local wrapper (e.g. src/lib/utils.ts) you can keep using it:
// import { cn } from "@/lib/utils";

3️⃣ Replace the call with the imported helper

<div className="flex items-center gap-1.5">
  {/* Using classNames */}
  <div
    className={classNames(
      "h-2 w-2 rounded-full",
      contact.status === "online"
        ? "bg-green-500"
        : "bg-muted-foreground/30"
    )}
  />
  {/* If you prefer clsx, just swap the name */}
  {/* <div className={clsx(...)} /> */}
  <span className="text-[10px] text-muted-foreground">
    {contact.status === "online" ? "Online" : "Offline"}
  </span>
</div>

If you already have a custom cn helper (common in many starter kits), simply import it:

import { cn } from "@/lib/utils

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…
#api#ssr#installation#tensor shape#autograd error#authentication setup#request error#file not found#serialization error#model compatibility

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING