Module not found: Can't resolve

[Dodong2]

Summary

got this error after docker dploy and return to local:

Module not found: Can't resolve '@/components/charts/ChartAllUsers'

./src/app/(frontend)/(users)/home/admin/page.tsx (3:1)

Module not found: Can't resolve '@/components/charts/ChartAllUsers'
1 | import Image from "next/image"
2 | /* components */

3 | import ChartAllUsers from "@/components/charts/ChartAllUsers"
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
4 | import ProgramCountCard from "@/components/charts/ProgramCountCard"
5 | import ChartUserRegistrations from "@/components/charts/ChartUserRegistrations"
6 | import ChartFiles from "@/components/charts/ChartFiles"

Import map: aliased to relative './src/components/charts/ChartAllUsers' inside of [project]/

Additional information

this is my: tsconfig.json:

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


next.config.ts:

import type { NextConfig } from "next";
import path from "path";

const nextConfig: NextConfig = {
  eslint: {
    ignoreDuringBuilds: true,
  },
  images: {
    domains: ['lh3.googleusercontent.com']
  },
  webpack: (config) => {
    config.resolve.alias['@'] = path.join(__dirname, 'src');
    return config;
  },
  output: 'standalone',
};

export default nextConfig;

Example

No response

[engripaye]

✅ **Valid Answer **

Your Docker environment is case-sensitive, while your local Windows/Mac filesystem is not.
That means the import:

import ChartAllUsers from "@/components/charts/ChartAllUsers"

will only work if the folder and file names match exactly:

• components/charts/ChartAllUsers.tsx
  NOT chartAllUsers.tsx
  NOT Chartallusers.tsx
  NOT chartallusers.tsx

On local, these still resolve.
Inside Docker (Linux), they fail.

---

✔️ Steps to Fix

1. Check folder & file name casing

Verify the exact file path:

src/components/charts/ChartAllUsers.tsx

If the file is named something like chartAllUsers.tsx, rename it:

git mv chartAllUsers.tsx ChartAllUsers.tsx

(Use git mv so Git tracks the case change.)

---

2. Confirm the Next.js alias is correct

Your config is correct:

tsconfig.json

"paths": {
  "@/*": ["./src/*"]
}

next.config.ts

config.resolve.alias['@'] = path.join(__dirname, 'src');

No changes needed here.

---

3. Rebuild inside Docker

After fixing casing:

docker compose build
docker compose up

Now Docker (Linux) will correctly resolve the module.

---

✔️ Why it happened

Local dev (Windows/macOS) = case-insensitive filesystem
Docker container (Linux) = case-sensitive filesystem

So imports must match exactly, including capitalization.

---

[Umuts-Codes]

This is the real solution

The error

Module not found: Can't resolve '@/components/charts/ChartAllUsers'

is caused by case sensitivity differences between your local system and Docker Linux.

Steps to fix

1. Check file and folder casing
   The import must exactly match the filename:

import ChartAllUsers from "@/components/charts/ChartAllUsers";

Ensure the file is named exactly ChartAllUsers.tsx, not chartAllUsers.tsx or Chartallusers.tsx.

2. Update in Git if needed
   git mv chartAllUsers.tsx ChartAllUsers.tsx

This ensures Git tracks the case change.

3. Verify alias configuration
   In tsconfig.json:

"paths": { "@/": ["./src/"] }

In next.config.ts:

config.resolve.alias['@'] = path.join(__dirname, 'src');

No further changes needed if already set.

4. Rebuild in Docker
   docker compose build
   docker compose up

Summary
Local Windows or macOS is case-insensitive, so imports may still work even with wrong casing.
Docker/Linux is case-sensitive, so filenames must match exactly.
Correct casing and rebuild Docker to fix the issue.

This ensures your modules resolve correctly in both local and Docker environments.

[icyJoseph]

Hi,

Sorry for the apparently generated answers that didn't even bother to check your repository 😢 - and quickly see that the casing is all correct.

What I see, is that your .dockerignore file has this line, https://github.com/Dodong2/testing_lms/blob/cd07ad30b32ed443c01353203c19bd3d1bc81feb/.dockerignore#L24:

**/charts

Which AFAIK, prevents the src/components/charts from being copied into the docker image. You likely copied this from some other project and caused this unwanted side-effect.