Next.js Discord

Discord Forum

importing sidenav issue

Answered
New Guinea Freshwater Crocodile posted this in #help-forum
Open in Discord
New Guinea Freshwater CrocodileOP
cant import sidenav in this project (new to next.js)
import SideNav from '@/app/ui/dashboard/sidenav';
 
export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
      <div className="w-full flex-none md:w-64">
        <SideNav />
      </div>
      <div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
    </div>
  );
}
Answered by joulev
in the template you used in chapter 1, there should already be a sidenav.tsx (https://github.com/vercel/next-learn/blob/main/dashboard/starter-example/app/ui/dashboard/sidenav.tsx). i think you accidentally deleted it...
View full answer

15 Replies

joulev
what is the issue?
@joulev what is the issue?
New Guinea Freshwater CrocodileOP
module not found for sidenab
sidenav
@New Guinea Freshwater Crocodile module not found for sidenab
joulev
show directory structure and tsconfig.json
New Guinea Freshwater CrocodileOP
{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
    "app/lib/placeholder-data.ts",
    "scripts/seed.js"
  ],
  "exclude": ["node_modules"]
}
@New Guinea Freshwater Crocodile Click to see attachment
joulev
where is sidenav.tsx? i don't see it here
@joulev where is sidenav.tsx? i don't see it here
New Guinea Freshwater CrocodileOP
i was going through the tutorial and i thought sidenav was pre-installed or something
no you need to create the file
Answer
joulev
can always restart with the initialisation command
npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpm
New Guinea Freshwater CrocodileOP
thanks