Railway Deploy Fail: Next.js - Module not found: Can't resolve '@/components/Header'

nmoreno-devTRIAL

9 months ago

Description

When attempting to deploy a Next.js application to Railway, the build process fails due to an issue with resolving a module in the layout.tsx file. Below are the relevant error logs:

#12 7.871 ./app/layout.tsx

#12 7.871 Module not found: Can't resolve '@/components/Header'

#12 7.871

#12 7.871 https://nextjs.org/docs/messages/module-not-found

#12 7.886 > Build failed because of webpack errors

This is the componet that imports Header component:

import type { Metadata } from 'next';
import Header from '@/components/Header';
import { Inter } from 'next/font/google';
import { config } from '@fortawesome/fontawesome-svg-core';
import '@fortawesome/fontawesome-svg-core/styles.css';
import './globals.scss';
import Footer from '../components/Footer';

config.autoAddCss = false;

const inter = Inter({ subsets: ['latin'] });

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Header />
        <main>{children}</main>
        <Footer />
      </body>
    </html>
  );
}

Here its the package.json file:

{
  "name": "landing-alcasa",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "pretty": "prettier --write \"./**/*.{js,jsx,mjs,cjs,ts,tsx,json,css}\""
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.6.0",
    "@fortawesome/free-brands-svg-icons": "^6.6.0",
    "@fortawesome/free-solid-svg-icons": "^6.6.0",
    "@fortawesome/react-fontawesome": "^0.2.2",
    "classnames": "^2.5.1",
    "formik": "^2.4.6",
    "next": "14.2.5",
    "react": "18",
    "react-dom": "18",
    "sass": "1.77.8",
    "sharp": "^0.33.4",
    "yup": "^1.4.0",
    "zustand": "^4.5.4"
  },
  "devDependencies": {
    "@types/node": "20",
    "@types/react": "18",
    "@types/react-dom": "18",
    "eslint": "8",
    "eslint-config-next": "14.2.5",
    "prettier": "3.3.3",
    "typescript": "5"
  }
}

Here its the tsconfig.json file:

{
  "compilerOptions": {
    "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"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

1 Replies

brodyEMPLOYEE

9 months ago

Unfortunately we are unable to provide coding help on these forums.

This issue wouldn't be specific to the Railway platform so please try to do some research on the issue you are facing.