search

shadcn-ui / ui

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
https://ui.shadcn.com
MIT License
73.44k stars 4.51k forks source link

[bug]: (Module not found: Can't resolve '@/components/ui/input') Next.js Application Fails to Build with Docker but Works Locally and on Vercel #5450

Open Hx-Regex opened 1 week ago

Hx-Regex commented 1 week ago

Describe the bug

I'm experiencing an issue where my Next.js application builds successfully locally and on Vercel, but fails when attempting to build using Docker. The build process in Docker results in module resolution errors, specifically related to path aliases.

**Build Error Logs:

0.375 
0.375 > future@0.1.0 build
0.375 > next build
0.375 
1.008 Attention: Next.js now collects completely anonymous telemetry regarding usage.
1.008 This information is used to shape Next.js' roadmap and prioritize features.
1.008 You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
1.008 https://nextjs.org/telemetry
1.008
1.077   ▲ Next.js 14.2.12
1.077
1.155    Creating an optimized production build ...
13.63 Failed to compile.
13.63
13.63 ./app/auth/login/components/LoginForm.tsx
13.63 Module not found: Can't resolve '@/components/ui/form'
13.63
13.63 https://nextjs.org/docs/messages/module-not-found
13.63
13.63 Import trace for requested module:
13.63 ./app/auth/login/page.tsx
13.63
13.63 ./app/auth/login/components/LoginForm.tsx
13.63 Module not found: Can't resolve '@/components/ui/input'
13.63
13.63 https://nextjs.org/docs/messages/module-not-found
13.63
13.63 Import trace for requested module:
13.63 ./app/auth/login/page.tsx
13.63
13.63 ./app/auth/login/components/LoginForm.tsx
13.63 Module not found: Can't resolve '@/hooks/use-toast'
13.63
13.63 https://nextjs.org/docs/messages/module-not-found
13.63
13.63 Import trace for requested module:
13.63 ./app/auth/login/page.tsx
13.63
13.63 ./app/auth/login/components/LoginForm.tsx
13.63 Module not found: Can't resolve '@/hooks/useAuth'
13.63
13.63 https://nextjs.org/docs/messages/module-not-found
13.63
13.63 Import trace for requested module:
13.63 ./app/auth/login/page.tsx
13.63
13.63 ./app/auth/login/page.tsx
13.63 Module not found: Can't resolve '@/hooks/useAuth'
13.63
13.63 https://nextjs.org/docs/messages/module-not-found
13.63
13.64
13.64 > Build failed because of webpack errors
------
Dockerfile:20
--------------------
  18 |
  19 |     # Build the Next.js app
  20 | >>> RUN npm run build
  21 |
  22 |     # Remove devDependencies to reduce image size
--------------------
ERROR: failed to solve: process "/bin/sh -c npm run build" did not complete successfully: exit code: 1

Steps to Reproduce: Local Build:

Run npm run build locally. Result: Builds successfully. Vercel Deployment:

Deploy the application to Vercel. Result: Deploys and works fine. Docker Build:

Use the provided Dockerfile to build the Docker image. Command: docker build -t projectD . Result: Fails with module resolution errors as shown in the logs.

The Docker build fails during the npm run build step with errors indicating that certain modules cannot be resolved, specifically those using the @ path alias.

**Configuration Files:

  1. Next.js Configuration (next.config.js):

/** @type {import('next').NextConfig} */
const path = require('path');
const nextConfig = {
  images: { unoptimized: true },
  eslint: {
    ignoreDuringBuilds: true,
  },
};

module.exports = nextConfig;
  1. Dockerfile: 
    
FROM node:18-alpine

Set environment variables

ENV NODE_ENV=production

Set the working directory

WORKDIR /app

Copy package.json and package-lock.json

COPY package*.json ./

Install all dependencies (including devDependencies)

RUN npm install

Copy the rest of the application code

COPY . .

Build the Next.js app

RUN npm run build

Remove devDependencies to reduce image size

RUN npm prune --production

Expose the port the app runs on

EXPOSE 3000

Define the command to run the app

CMD ["npm", "start"]


### Affected component/components

input

### How to reproduce

Local Build:

Run npm run build locally.
Result: Builds successfully.
Vercel Deployment:

Deploy the application to Vercel.
Result: Deploys and works fine.
Docker Build:

Use the provided Dockerfile to build the Docker image.
Command: docker build -t future .
Result: Fails with module resolution errors as shown in the logs.

### Codesandbox/StackBlitz link

_No response_

### Logs

```bash
> [6/7] RUN npm run build:
0.375 
0.375 > future@0.1.0 build
0.375 > next build
0.375 
1.008 Attention: Next.js now collects completely anonymous telemetry regarding usage.
1.008 This information is used to shape Next.js' roadmap and prioritize features.
1.008 You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
1.008 https://nextjs.org/telemetry
1.008
1.077   ▲ Next.js 14.2.12
1.077
1.155    Creating an optimized production build ...
13.63 Failed to compile.
13.63
13.63 ./app/auth/login/components/LoginForm.tsx
13.63 Module not found: Can't resolve '@/components/ui/form'
13.63
13.63 https://nextjs.org/docs/messages/module-not-found
13.63
13.63 Import trace for requested module:
13.63 ./app/auth/login/page.tsx
13.63
13.63 ./app/auth/login/components/LoginForm.tsx
13.63 Module not found: Can't resolve '@/components/ui/input'
13.63
13.63 https://nextjs.org/docs/messages/module-not-found
13.63
13.63 Import trace for requested module:
13.63 ./app/auth/login/page.tsx
13.63
13.63 ./app/auth/login/components/LoginForm.tsx
13.63 Module not found: Can't resolve '@/hooks/use-toast'
13.63
13.63 https://nextjs.org/docs/messages/module-not-found
13.63
13.63 Import trace for requested module:
13.63 ./app/auth/login/page.tsx
13.63
13.63 ./app/auth/login/components/LoginForm.tsx
13.63 Module not found: Can't resolve '@/hooks/useAuth'
13.63
13.63 https://nextjs.org/docs/messages/module-not-found
13.63
13.63 Import trace for requested module:
13.63 ./app/auth/login/page.tsx
13.63
13.63 ./app/auth/login/page.tsx
13.63 Module not found: Can't resolve '@/hooks/useAuth'
13.63
13.63 https://nextjs.org/docs/messages/module-not-found
13.63
13.64
13.64 > Build failed because of webpack errors
------
Dockerfile:20
--------------------
  18 |
  19 |     # Build the Next.js app
  20 | >>> RUN npm run build
  21 |
  22 |     # Remove devDependencies to reduce image size
--------------------
ERROR: failed to solve: process "/bin/sh -c npm run build" did not complete successfully: exit code: 1

System Info

docker

Before submitting

I'm seeking help to identify why the Docker build process cannot resolve modules using the @ path alias, despite the application building successfully in other environments. If additional information is required, I can provide further details such as complete project structure, additional configuration files, or logs (I've found exisiting issues but didn't fix my problem)

hithere-devs commented 1 week ago

I defined a new nextjs project gave exactly your next config, and then used the same Dockerfile as you mentioned above and my application builds smoothly with the button and input imported using @alias in the page.tsx, No issue No errors, If you could provide some more info about your configurations, Maybe I'll be able to help out.

Probable Issue

Maybe your components.json is different if you can provide that, maybe could help you solve this.

Summary

Used the input component and the same dockerfile as you! Still not able to reproduce if you can give me something else that might be the cause of the issue cause looks like the regular config doesn't have the same issue!

Commands Used

Screenshot 2024-10-21 at 1 46 49 AM Screenshot 2024-10-21 at 1 47 19 AM

Config

Screenshot 2024-10-21 at 1 48 15 AM
Hx-Regex commented 1 week ago

@its-azharmalik thanks for the help here is my components.json i removed all the @ and the app run just fine with docker maybe its my fault i changed something when i started developing the app and forgot 

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  }
}