new error in docker compose build 16/10/2024

[johnfelipe]

System Info

latest ubuntu 22 3.11

🐛 Describe the bug

 => ERROR [client 6/6] RUN npm run build                                  26.5s
------
 > [client 6/6] RUN npm run build:
0.720
0.720 > client@0.1.0 build
0.720 > next build
0.720
1.601 Attention: Next.js now collects completely anonymous telemetry regarding usage.
1.601 This information is used to shape Next.js' roadmap and prioritize features.
1.601 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.601 https://nextjs.org/telemetry
1.601
1.687   ▲ Next.js 14.2.3
1.687   - Environments: .env
1.688
1.783    Creating an optimized production build ...
26.21 Failed to compile.
26.21
26.21 ./app/(ee)/settings/logs/page.tsx
26.21 Error:
26.21   x the name `dynamic` is defined multiple times
26.21     ,-[/app/app/(ee)/settings/logs/page.tsx:2:1]
26.21   2 | import { GetLogs } from "@/services/logs";
26.21   3 | import LogsCard from "./logs-card";
26.21   4 |
26.21   5 | export const dynamic = 'force-dynamic';
26.21     :              ^^^|^^^
26.21     :                 `-- previous definition of `dynamic` here
26.21   6 |
26.21   7 | export default async function Logs() {
26.21   8 |   const data = await GetLogs();
26.21   9 |
26.21  10 |   return (
26.21  11 |     <div className="w-full h-full overflow-y-auto custom-scroll mt-5 px-2 md:px-4">
26.21  12 |       <h1 className="text-2xl font-bold dark:text-white mb-10">Logs</h1>
26.21  13 |       <LogsCard logs={data?.logs || []} logs_count={data?.logs_count} />
26.21  14 |     </div>
26.21  15 |   );
26.21  16 | }
26.21  17 | export const dynamic='force-dynamic';
26.21     :              ^^^|^^^
26.21     :                 `-- `dynamic` redefined here
26.21  18 |
26.21     `----
26.21
26.21 Import trace for requested module:
26.21 ./app/(ee)/settings/logs/page.tsx
26.21
26.21 ./app/settings/datasets/[id]/page.tsx
26.21 Error:
26.21   x the name `dynamic` is defined multiple times
26.21     ,-[/app/app/settings/datasets/[id]/page.tsx:3:1]
26.21   3 | import DatasetCard from "./DatasetCard";
26.21   4 | import { GetDatasetDetails } from "@/services/datasets";
26.21   5 |
26.21   6 | export const dynamic = 'force-dynamic';
26.21     :              ^^^|^^^
26.21     :                 `-- previous definition of `dynamic` here
26.21   7 |
26.21   8 | interface PageProps {
26.21   9 |   params: {
26.21  10 |     id: string;
26.21  11 |   };
26.21  12 | }
26.21  13 |
26.21  14 | export default async function DatasetDetailsPage({ params }: PageProps) {
26.21  15 |   const data = await GetDatasetDetails(params.id);
26.21  16 |   const dataframe = data?.dataset;
26.21  17 |
26.21  18 |   return (
26.21  19 |     <>
26.21  20 |       <div className="w-full h-full overflow-y-auto custom-scroll mt-5 px-2 md:px-4">
26.21  21 |         <h1 className="text-2xl font-bold dark:text-white mb-10">
26.21  22 |           <Link href="/settings/datasets">Datasets</Link>
26.21  23 |           <small>{` › ${dataframe?.name || ""}`}</small>
26.21  24 |         </h1>
26.21  25 |
26.21  26 |         <div className="flex flex-col p-2 md:p-4 font-montserrat">
26.21  27 |           <div className="flex items-center justify-center w-[50%]">
26.21  28 |             <DatasetCard dataframe={dataframe} />
26.21  29 |           </div>
26.21  30 |         </div>
26.21  31 |       </div>
26.21  32 |     </>
26.21  33 |   );
26.21  34 | }
26.21  35 | export const dynamic='force-dynamic';
26.21     :              ^^^|^^^
26.21     :                 `-- `dynamic` redefined here
26.21  36 |
26.21     `----
26.21
26.21 Import trace for requested module:
26.21 ./app/settings/datasets/[id]/page.tsx
26.21
26.21 ./app/settings/datasets/page.tsx
26.21 Error:
26.21   x the name `dynamic` is defined multiple times
26.21     ,-[/app/app/settings/datasets/page.tsx:7:1]
26.21   7 | import { GetAllDataSets } from "@/services/datasets";
26.21   8 | import AddNewCard from "./AddNewCard";
26.21   9 |
26.21  10 | export const dynamic = 'force-dynamic';
26.21     :              ^^^|^^^
26.21     :                 `-- previous definition of `dynamic` here
26.21  11 |
26.21  12 | export default async function Datasets() {
26.21  13 |   const data = await GetAllDataSets();
26.21  14 |
26.21  15 |   return (
26.21  16 |     <div className="w-full h-full overflow-y-auto custom-scroll mt-5 px-2 md:px-4">
26.21  17 |       <h1 className="text-2xl font-bold dark:text-white mb-10">Datasets</h1>
26.21  18 |       <div className="grid 2xl:grid-cols-4 xl:grid-cols-3 lg:grid-cols-2 gap-4">
26.21  19 |         {data?.datasets?.map((item) => (
26.21  20 |           <Card
26.21  21 |             key={item.id}
26.21  22 |             extra={
26.21  23 |               "w-full pt-4 px-6 h-full border dark:border-none border-[#ccc] pb-8"
26.21  24 |             }
26.21  25 |           >
26.21  26 |             <header className="relative flex items-center justify-between">
26.21  27 |               <div className="w-full">
26.21  28 |                 <div className="flex justify-center h-24">
26.21  29 |                   <FaFileCsv size="4em" key={0} />
26.21  30 |                 </div>
26.21  31 |                 <div className="h-[65px] w-full overflow-hidden">
26.21  32 |                   <AppTooltip text={item.name}>
26.21  33 |                     <h1
26.21  34 |                       data-tooltip-id={`${item.id}`}
26.21  35 |                       className="dark:text-white font-bold font-montserrat text-[20px] text-center customellipsis"
26.21  36 |                     >
26.21  37 |                       {item.name}
26.21  38 |                     </h1>
26.21  39 |                   </AppTooltip>
26.21  40 |                 </div>
26.21  41 |               </div>
26.21  42 |             </header>
26.21  43 |             <div className="w-full flex flex-wrap items-center justify-center mt-1">
26.21  44 |               <Link href={`/settings/datasets/${item?.id}`}>
26.21  45 |                 <Button>Details</Button>
26.21  46 |               </Link>
26.21  47 |             </div>
26.21  48 |           </Card>
26.21  49 |         ))}
26.21  50 |
26.21  51 |         <Link href={`/settings/datasets/add`}>
26.21  52 |           <AddNewCard text="New dataset" />
26.21  53 |         </Link>
26.21  54 |       </div>
26.21  55 |     </div>
26.21  56 |   );
26.21  57 | }
26.21  58 | export const dynamic='force-dynamic';
26.21     :              ^^^|^^^
26.21     :                 `-- `dynamic` redefined here
26.21  59 |
26.21     `----
26.21
26.21 Import trace for requested module:
26.21 ./app/settings/datasets/page.tsx
26.21
26.21 ./app/settings/page.tsx
26.21 Error:
26.21   x the name `dynamic` is defined multiple times
26.21    ,-[/app/app/settings/page.tsx:1:1]
26.21  1 | import { redirect } from "next/navigation";
26.21  2 |
26.21  3 | export const dynamic = 'force-dynamic';
26.21    :              ^^^|^^^
26.21    :                 `-- previous definition of `dynamic` here
26.21  4 |
26.21  5 | export default function Home() {
26.21  6 |   redirect("/settings/datasets");
26.21  7 | }
26.21  8 | export const dynamic='force-dynamic';
26.21    :              ^^^|^^^
26.21    :                 `-- `dynamic` redefined here
26.21  9 |
26.21    `----
26.21
26.21 Import trace for requested module:
26.21 ./app/settings/page.tsx
26.21
26.21 ./app/settings/workspaces/addspaces/page.tsx
26.21 Error:
26.21   x the name `dynamic` is defined multiple times
26.21     ,-[/app/app/settings/workspaces/addspaces/page.tsx:4:1]
26.21   4 | import AddSpaceCard from "./AddSpaceCard";
26.21   5 | import { Button } from "@/components/ui/button";
26.21   6 |
26.21   7 | export const dynamic = 'force-dynamic';
26.21     :              ^^^|^^^
26.21     :                 `-- previous definition of `dynamic` here
26.21   8 |
26.21   9 | export default async function AddSpaces() {
26.21  10 |   const data = await GetAllDataSets();
26.21  11 |
26.21  12 |   return (
26.21  13 |     <div className="w-full h-full overflow-y-auto custom-scroll mt-5 px-2 md:px-4">
26.21  14 |       <h1 className="text-2xl font-bold dark:text-white mb-10">
26.21  15 |         <Link href="/settings/workspaces">Workspaces</Link>
26.21  16 |         <small> › New</small>
26.21  17 |       </h1>
26.21  18 |
26.21  19 |       {data?.datasets?.length === 0 ? (
26.21  20 |         <div className="flex flex-col items-center justify-center m-auto">
26.21  21 |           <p className="dark:text-white font-montserrat text-lg mb-3">
26.21  22 |             No datasets available, please add one
26.21  23 |           </p>
26.21  24 |
26.21  25 |           <Link href={"/settings/datasets/add"}></Link>
26.21  26 |           <Button>Add</Button>
26.21  27 |         </div>
26.21  28 |       ) : (
26.21  29 |         <AddSpaceCard datasets={data?.datasets} />
26.21  30 |       )}
26.21  31 |     </div>
26.21  32 |   );
26.21  33 | }
26.21  34 | export const dynamic='force-dynamic';
26.21     :              ^^^|^^^
26.21     :                 `-- `dynamic` redefined here
26.21  35 |
26.21     `----
26.21
26.21 Import trace for requested module:
26.21 ./app/settings/workspaces/addspaces/page.tsx
26.21
26.22
26.22 > Build failed because of webpack errors
------
failed to solve: process "/bin/sh -c npm run build" did not complete successfully: exit code: 1

[dosubot[bot]]

To resolve the "dynamic is defined multiple times" error in your Next.js project during a Docker Compose build, you need to ensure that the dynamic export is defined only once in each file. In the error messages you provided, the dynamic export is defined twice in several files. You should remove one of the duplicate dynamic exports in each of these files. For example, in the file ./app/(ee)/settings/logs/page.tsx, you should remove one of the dynamic definitions:

import { GetLogs } from "@/services/logs";
import LogsCard from "./logs-card";

export const dynamic = 'force-dynamic';

export default async function Logs() {
  const data = await GetLogs();

  return (
    <div className="w-full h-full overflow-y-auto custom-scroll mt-5 px-2 md:px-4">
      <h1 className="text-2xl font-bold dark:text-white mb-10">Logs</h1>
      <LogsCard logs={data?.logs || []} logs_count={data?.logs_count} />
    </div>
  );
}

Repeat this process for each file where the error occurs, ensuring that dynamic is only defined once per file. This should resolve the compilation errors.

To continue talking to Dosu, mention @dosu.

[johnfelipe]

solved:

Based on the error you're seeing, the main issue is that you have multiple definitions of the dynamic variable in several files. This is causing conflicts in the Next.js compilation. To resolve this problem, you need to remove the duplicate dynamic definitions in each affected file. Here are the steps to fix this issue:

1. Open each of the following files:

   • /app/(ee)/settings/logs/page.tsx
   • /app/settings/datasets/[id]/page.tsx
   • /app/settings/datasets/page.tsx
   • /app/settings/page.tsx
   • /app/settings/workspaces/addspaces/page.tsx

2. In each file, remove one of the two dynamic definitions. Keep only one instance of:

   export const dynamic = 'force-dynamic';

3. Make sure this line is near the top of the file, just after the imports and before the main component definition.

4. After making these changes, your code in each file should have only one dynamic definition, similar to this:

   import { ... } from '...';
   
   export const dynamic = 'force-dynamic';
   
   export default function ComponentName() {
    // ... rest of the code ...
   }

5. Save all modified files.

6. Try running the build again with:

   npm run build

These changes should resolve the compilation error related to multiple dynamic definitions. If you continue to have issues after making these changes, be sure to carefully review each file for other possible duplications or syntax errors.

If the problem persists after these changes, it might be helpful to review your overall Next.js project configuration and ensure that all dependencies are updated to compatible versions.