Netlify and Heroku won't deploy my Nextjs project-CodePudding

I'm trying to deploy my app on heroku or netlify but on both of this i get this incorrect import path ERROR. I'm soo confused why is this happening the import is correct and works in local. I Really need to fix this ASAP. I will appreciate some help

Log

 ./pages/_app.tsx:7:27
6:31:19 PM: Type error: Cannot find module '../styles/Body' or its corresponding type declarations.
6:31:19 PM:    5 | import { Box } from "@mui/material";
6:31:19 PM:    6 | import { useState } from "react";
6:31:19 PM: >  7 | import pageContainer from "../styles/Body";
6:31:19 PM:      |                           ^
6:31:19 PM:    8 | 
6:31:19 PM:    9 | function MyApp({ Component, pageProps }: AppProps) {
6:31:19 PM:   10 |   const [darkMode, setDarkMode] = useState(false);
6:31:19 PM: > Build error occurred
6:31:19 PM: Error: Call retries were exceeded
6:31:19 PM:     at ChildProcessWorker.initialize (/opt/build/repo/node_modules/next/dist/compiled/jest-worker/index.js:1:11661)
6:31:19 PM:     at ChildProcessWorker._onExit (/opt/build/repo/node_modules/next/dist/compiled/jest-worker/index.js:1:12599)
6:31:19 PM:     at ChildProcess.emit (node:events:513:28)
6:31:19 PM:     at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12) {
6:31:19 PM:   type: 'WorkerError'
6:31:19 PM: }
6:31:19 PM: 
6:31:19 PM: ────────────────────────────────────────────────────────────────
6:31:19 PM:   "build.command" failed                                        
6:31:19 PM: ────────────────────────────────────────────────────────────────
6:31:19 PM: 
6:31:19 PM:   Error message
6:31:19 PM:   Command failed with exit code 1: CI= npm run build (https://ntl.fyi/exit-code-1)

_app.tsx

import "../styles/globals.css";

import pageContainer from "../styles/Body";

function MyApp({ Component, pageProps }: AppProps) {
  const [darkMode, setDarkMode] = useState(false);

  return (
    <>
      <Box sx={pageContainer(darkMode)}>
          <NavBar darkMode={darkMode} onSetDarkMode={setDarkMode} />
          <Component darkMode={darkMode} {...pageProps} />
      </Box>
    </>
  );
}

export default MyApp;

styles/Body.tsx

const container = {
  direction: "rtl",
  padding: "1rem 0 1.6rem",
  backgroundColor: "#f5f5f5",
};

const nightMode = {
  backgroundColor: "#1E272E",
};

export default function pageContainer(isNight: boolean): object[] | object {
  return isNight ? [container, nightMode] : container;
}

CodePudding user response：

I'm not sure if it can be helpful or not but you need to change

import pageContainer from "../styles/Body";

import PageContainer from "../styles/Body";

hope it can help

CodePudding user response：

mostly it might be the case when the path is not correct please check the path but if this is not the issue then rename it as PageContainer.