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
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.