Next.js Discord

Discord Forum

module-not-found of component

Answered
Cornish Rex posted this in #help-forum
Open in Discord
Cornish RexOP
Hi,
I have next.js app ver 13.4 with yarn.

Only on vercel deploy I get error - 
Module not found: Can't resolve '@/components/header/header.component'


My layout that uses the component-
import Header from "@/components/header/header.component";

export default async function MainLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <>
      <Header />
      {children}
    </>
  );
}



Only on vercel the next build crash. Locally generate build.
I have try to clear cache but nothing happed
Can someone help me please?
Answered by joulev
https://nextjs-discord-common-questions.joulev.dev/module-not-found-error-on-deployment-but-build-works-fine-locally
View full answer

4 Replies

Cornish RexOP
header component- (commented all to check the error but also with this the error is appeared
// "use client";
// import { useState } from "react";
// import {
//   IconButton,
//   Collapse,
//   Navbar,
//   Typography,
// } from "@/components/material/import.material.tailwind";
// import { Bars2Icon } from "@heroicons/react/24/outline";
// import ProfileMenu from "./profile.menu.component";
// import NavList from "./nav.list.component";

const Header = () => {
  // const toggleIsNavOpen = () => setIsNavOpen((cur) => !cur);
  // const [isNavOpen, setIsNavOpen] = useState(false);

  return (
    <header>
      <h1>header</h1>
      {/* <Navbar className="sticky top-0 z-10 h-max max-w-full rounded-none py-2 px-4 lg:px-8 lg:py-4">
        <div className="relative mx-auto flex items-center text-blue-gray-900">
          <Typography
            as="a"
            href="#"
            className="mr-4 ml-2 cursor-pointer py-1.5 font-medium"
          >
            LOGO
          </Typography>
          <div className="absolute top-2/4 left-2/4 hidden -translate-x-2/4 -translate-y-2/4 ml-auto lg:block">
            <NavList />
          </div>
          <IconButton
            size="sm"
            color="blue-gray"
            variant="text"
            onClick={toggleIsNavOpen}
            className="ml-auto mr-2 lg:hidden"
          >
            <Bars2Icon className="h-6 w-6" />
          </IconButton>
          <ProfileMenu />
        </div>
        <Collapse open={isNavOpen}>
          <NavList />
        </Collapse>
      </Navbar> */}
    </header>
  );
};

export default Header;
tsconfig-
{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "es6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@components/*": ["./src/components/*"],
      "@lib/*": ["./src/lib/*"],
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
Answer