Netlify and Heroku won't deploy my Nextjs project

Question

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 confused why is this happening the import is correct and works in local.

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;
}

FIX: To viewers that maybe have this problem. The log error is correct in my case the problem was I Changed the file name from 'body.tsx' to 'Body.tsx' and than commit it. I checked my github and that file name was still 'body.tsx' and my import was 'Body.tsx' and that was to problem. hope this solve your problem

Answer 1

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

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

to

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

hope it can help

Answer 2

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.