How to fix "use client" cannot be imported from a Server Component in React

// This needs "use client" - uses useState
"use client";
import { useState } from "react";

export function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

// This does NOT need "use client" - just renders content
export function Header({ title }: { title: string }) {
  return <h1>{title}</h1>;
}

// app/page.tsx (Server Component)
import { ServerDataComponent } from "./server-data";
// DO NOT import client component directly here

export default async function Page() {
  const data = await fetchServerData();
  
  return (
    <div>
      <ServerDataComponent data={data} />
      {/* Client component will be passed as children */}
    </div>
  );
}

// app/layout.tsx (Server Component)
import { ClientInteractiveWidget } from "./client-widget";
import { MainContent } from "./main-content";

export default function Layout() {
  return (
    <MainContent>
      <ClientInteractiveWidget />
    </MainContent>
  );
}

// components/chart-wrapper.tsx
"use client";

import { Chart } from "third-party-chart-library";

export function ChartWrapper({ data }: { data: any[] }) {
  return <Chart data={data} />;
}

// app/dashboard/page.tsx (Server Component)
import { ChartWrapper } from "@/components/chart-wrapper";

export default async function DashboardPage() {
  const analyticsData = await fetchAnalytics();
  
  return (
    <div>
      <h1>Dashboard</h1>
      <ChartWrapper data={analyticsData} />
    </div>
  );
}

// utils/constants.ts (NO "use client")
export const API_ENDPOINT = "https://api.example.com";
export const MAX_ITEMS = 100;

// utils/format.ts (NO "use client")
export function formatDate(date: Date): string {
  return date.toISOString().split("T")[0];
}

// components/client-utils.ts (WITH "use client")
"use client";

export function useLocalStorage(key: string) {
  // Client-only hook
}

// app/products/page.tsx (Server Component)
import { ProductList } from "./product-list";
import { FilterSidebar } from "./filter-sidebar";

export default async function ProductsPage() {
  const products = await fetchProducts();
  
  return (
    <div className="flex">
      <FilterSidebar />
      <ProductList initialProducts={products} />
    </div>
  );
}

// app/products/filter-sidebar.tsx (Client Component)
"use client";
import { useState } from "react";

export function FilterSidebar() {
  const [filters, setFilters] = useState({});
  // Client-side filtering logic
}

// app/products/product-list.tsx (Client Component)
"use client";
import { useState } from "react";

export function ProductList({ initialProducts }) {
  const [products, setProducts] = useState(initialProducts);
  // Client-side state management
}

// CORRECT
"use client";

import { useState } from "react";
import { Button } from "./button";

export function MyComponent() {
  // component code
}

// WRONG - directive after imports
import { useState } from "react";

"use client";

export function MyComponent() {
  // This will cause errors
}

npm install server-only

// lib/server-utils.ts
import "server-only";

export async function getSecretData() {
  // This function can only be used in server components
  const secret = process.env.SECRET_KEY;
  return fetchDataWithSecret(secret);
}