Request new features or modifications


[REACT] NEXT JS 13 with app directory

Post Reply

Post by abdelouahed77 »

Gantt Chart with Next js 13

Hi

below, the project I've tried to test ( with mongo db as database) using prisma

https://github.com/ab77-oss/gantt-next13.git

The issues:

  • in the file ./components/BryntumGantt:

In next js 13

we got this error : Parsing error: '>' expected.eslint

but in next 12, it works fine

  • we've faced also an issue with the dynamic import in the page file ( app directory equivalent of pages/index in next js 12)

const GanttDynamic = dynamic(() => import("./components/Gantt"), {

No problem with the backend files api/gantt/route.ts and helpers.helpers.ts except the type of data in gantt/route ( line 90 in the POST function)

"use client"
import { useRef, LegacyRef } from "react";
import Head from "next/head";
import dynamic from "next/dynamic";
import { BryntumGantt } from "@bryntum/gantt-react";
const GanttDynamic = dynamic(() => import("./components/Gantt"), {
  ssr: false,
  loading: () => {
    return (
      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          height: "100vh",
        }}
      >
        <p>Loading...</p>
      </div>
    );
  },
});
export default function BryntumGanttPage() {
  const ganttRef = useRef() as LegacyRef<BryntumGantt> | undefined;
  return (
    <>
      <Head>
        <title>Bryntum Gantt using Next.js</title>
        <meta name="description" content="Bryntum Gantt using Next.js" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <GanttDynamic ganttRef={ganttRef} />
    </>
  );
}

/bryntum-gantt/app/components/Gantt.ts

import { LegacyRef } from "react";
import { ganttConfig } from "../../ganttConfig";
import { BryntumGantt } from "@bryntum/gantt-react";
type Props = {
  ganttRef: LegacyRef<BryntumGantt> | undefined;
};
export default function Gantt({ ganttRef }: Props) {
  return <BryntumGantt ref={ganttRef} {...ganttConfig} />;
}

Post by tasnim »

Hello,

I'm currently experiencing difficulty running your app using the npm run dev command. To assist with troubleshooting, could you please let me know which versions of node and npm you are currently using? Your cooperation would be greatly appreciated.

Thank you and best regards.

Post by abdelouahed77 »

Hi;
node version is V20.0.0
npm version is V9.6.4

Thank you

Post by saki »

Try to rename components/Gantt.ts to components/Gantt.tsx. It resolved the issue for me.

Post by abdelouahed77 »

Thank you Saki for the remainder .tsx, currentlly I'm only able to display the table of Gantt without data, my app/api/gantt/route.ts:

The code below ( Next 13), gives 404 error, with no date in the Gantt chart

export async function GET(){
  try {
    const tasks = await prisma.tasks.findMany();
    const dependencies = await prisma.dependencies.findMany();
    return NextResponse.json({
      success: true,
      tasks: {
        rows: tasks,
      },
      dependencies: {
        rows: dependencies,
      },
    });
  } catch (error) {
    return NextResponse.json({
      success: false,
      tasks: {
        rows: [],
      },
      dependencies: {
        rows: [],
      },
    });
  }
}

Post by mats »

Can you please show a screenshot what it looks like?

Post by saki »

The code looks like the application way of getting data but it doesn't show what happens to the data, how it is used in the Gantt. I would expect that tasks and dependencies would be bound to project. Something similar to:

            <BryntumProjectModel
                ref={project}
                {...projectConfig}
                calendars={calendars}
                tasks={tasks}
                assignments={assignments}
                dependencies={dependencies}
                resources={resources}
                timeRanges={timeRanges}
            />

Note: The above is excerpt from this example: https://bryntum.com/products/gantt/examples/frameworks/react/javascript/inline-data/build/

Post Reply