Production Build in Next.js: UI Changes Not Reflecting and Data Fetching Fails on One Page

[alirezarastineh]

Summary

I'm working on a Next.js project with TypeScript, using Redux Toolkit for state management and API calls. The application works perfectly in development mode (npm run dev), but I'm encountering serious issues after building the project for production (npm run build) and running it (npm run start).

Issues:

1. UI Changes Not Reflecting:

After making changes to my UI components and styles, these updates are visible in development mode, but they don't appear when I run the application in production mode. The UI remains as it was before the changes.

2. Data Fetching Fails on One Specific Page:

• A specific page (/customer/handbook and /admin/all-handbooks) that fetches data using Redux Toolkit Query fails to load the data in production mode, displaying a generic error message: Error: An unexpected error occurred. However, this page works fine in development mode and was working in production before this issue suddenly appeared.

The error is generated from a utility function that processes API errors:

app/utils/utils.ts

import { SerializedError } from "@reduxjs/toolkit";
import { FetchBaseQueryError } from "@reduxjs/toolkit/query";

export function getErrorMessage(
  error: FetchBaseQueryError | SerializedError | string
): string {
  if (typeof error === "string") {
    return error;
  }

  if ("status" in error) {
    return (
      (error.data as { detail?: string })?.detail ??
      "An unexpected error occurred"
    );
  }

  if ("message" in error) {
    return error.message ?? "An unexpected error occurred";
  }

  return "An unknown error occurred";
}

These issues arose without any changes to the settings or configurations. The only thing I did was the usual development work, and then I wanted to test the application in production mode.

Steps I’ve Taken:

1. Cleared Caches and Reinstalled Dependencies:

• I removed node_modules, deleted the .next folder, cleared the npm cache, and reinstalled everything. I then rebuilt the project with npm run build. Unfortunately, the issues persisted.

2. Checked Environment Variables:

• I ensured that all necessary environment variables are correctly set for both development and production environments.

3. Analyzed Build Process:

• I ran the build with NEXT_DEBUG=true npm run build to get detailed logs. The build completes successfully with some ESLint warnings, but nothing that seems to explain the issues.

4. Verified API Responses:

• I checked the API endpoints used by the failing page to ensure they are accessible and returning the correct data in production. The APIs work fine when accessed directly.

5. Simplified Configurations:

• I removed custom Webpack configurations and simplified next.config.mjs to ensure there’s nothing specific causing issues in the production build.

6. Tested in a Clean Environment:

• I deployed the production build to a clean staging environment, but the problems continued.

What I Expected:

• I expected the UI changes to reflect correctly in production mode, just as they do in development mode.
• I expected the data fetching to work seamlessly in production mode, without errors, as it does in development.

[AntA001]

First thought I had was caching but you said you removed the .next folder. So it can't be that.

Try disabling swcMinify is your next config and let us know if that fixes it. My thinking here is that maybe something is getting messed up during bundling.