[BUG]: Can't build NextJS app from source

[oleole39]

Issue description

Hello,

I have tried to build the following way:

sudo useradd jsoncrack
git clone https://github.com/AykutSarac/jsoncrack.com.git
cd jsoncrack.com/src
sudo corepack enable #has to be enabled at root level
sudo -u jsoncrack corepack enable pnpm
sudo -u jsoncrack corepack use pnpm@latest
sudo -u jsoncrack pnpm install --config.confirmModulesPurge=false #--config option is here to solve issue that COREPACK_ENABLE_DOWNLOAD_PROMPT=0 was not enough to solve.
sudo -u jsoncrack tar -cf parent.tar ../ && tar -xf parent.tar #copy all parent files in /src folder to mimic the build process of the Dockerfile 
chown -R "jsoncrack:www-data" .
rm ../.eslintrc.json #without that step the build is launched by default using this file instead of the one in /src where are located node modules 
sudo -u jsoncrack COREPACK_ENABLE_DOWNLOAD_PROMPT=0 pnpm exec next telemetry disable
sudo -u jsoncrack pnpm build --debug

but it fails with the following error:

./src/containers/Editor/components/views/GraphView/lib/utils/getNodePath.ts
./src/containers/Editor/components/views/GraphView/lib/jsonParser.ts
./src/containers/Editor/components/views/GraphView/stores/useGraph.ts
./pages/widget.tsx

./src/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/reaflow/dist/index.umd.cjs
Module not found: ESM packages (d3-shape) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./src/containers/Editor/components/views/GraphView/lib/utils/getNodePath.ts
./src/containers/Editor/components/views/GraphView/lib/jsonParser.ts
./src/containers/Editor/components/views/GraphView/stores/useGraph.ts
./pages/widget.tsx

> Build failed because of webpack errors

I assume the error comes from the require("reaflow") line in /src/containers/Editor/components/views/GraphView/lib/utils/getNodePath.ts

I have tried several things without success, including what is suggested in NextJS docs, that is to say replacing the first lines of getNodePath.ts with something like:

import type { NodeData, EdgeData } from "src/types/graph";
import dynamic from 'next/dynamic';

export function getNodePath(nodes: NodeData[], edges: EdgeData[], nodeId: string) {
  const getParentsForNodeId = dynamic(() => import("reaflow"), { 
    ssr:false 
  });  

But then the build fails with following error:

Type error: Argument of type '() => Promise<(nodes: NodeData<any>[], edges: EdgeData<any>[], startId: string) => any[]>' is not assignable to parameter of type 'DynamicOptions<NodeData<any>[]> | Loader<NodeData<any>[]>'.
  Type '() => Promise<(nodes: NodeData<any>[], edges: EdgeData<any>[], startId: string) => any[]>' is not assignable to type '() => LoaderComponent<NodeData<any>[]>'.
    Type 'Promise<(nodes: NodeData<any>[], edges: EdgeData<any>[], startId: string) => any[]>' is not assignable to type 'LoaderComponent<NodeData<any>[]>'.
      Type '(nodes: NodeData<any>[], edges: EdgeData<any>[], startId: string) => any[]' is not assignable to type 'ComponentType<NodeData<any>[]> | ComponentModule<NodeData<any>[]>'.
        Type '(nodes: NodeData<any>[], edges: EdgeData<any>[], startId: string) => any[]' is not assignable to type 'FunctionComponent<NodeData<any>[]>'.
          Target signature provides too few arguments. Expected 3 or more, but got 2.

> 6 |   const getParentsForNodeId = dynamic(() => import("reaflow"), {
  7 |     ssr: false,
  8 |   });
  9 |

Or if I use instead as found somewhere on the Internet:

const getParentsForNodeId = dynamic(() => import("reaflow").then(c => c.getParentsForNodeId), {
  ssr: false,
});

a similar error:

Type error: Argument of type '() => Promise<(nodes: NodeData<any>[], edges: EdgeData<any>[], startId: string) => any[]>' is not assignable to parameter of type 'DynamicOptions<NodeData<any>[]> | Loader<NodeData<any>[]>'.
  Type '() => Promise<(nodes: NodeData<any>[], edges: EdgeData<any>[], startId: string) => any[]>' is not assignable to type '() => LoaderComponent<NodeData<any>[]>'.
    Type 'Promise<(nodes: NodeData<any>[], edges: EdgeData<any>[], startId: string) => any[]>' is not assignable to type 'LoaderComponent<NodeData<any>[]>'.
      Type '(nodes: NodeData<any>[], edges: EdgeData<any>[], startId: string) => any[]' is not assignable to type 'ComponentType<NodeData<any>[]> | ComponentModule<NodeData<any>[]>'.
        Type '(nodes: NodeData<any>[], edges: EdgeData<any>[], startId: string) => any[]' is not assignable to type 'FunctionComponent<NodeData<any>[]>'.
          Target signature provides too few arguments. Expected 3 or more, but got 2.

  4 | export function getNodePath(nodes: NodeData[], edges: EdgeData[], nodeId: string) {
  5 |   // eslint-disable-next-line @typescript-eslint/no-var-requires
> 6 |   const getParentsForNodeId = dynamic(() => import("reaflow").then(c => c.getParentsForNodeId), {
    |                                       ^
  7 |     ssr: false,
  8 |   });
  9 |

Would you have any clue ?

Media & Screenshots

No response

Operating system

• OS: Debian 12
• Nodejs: 20.18.0
• pnpm: latest (9.12.2)
• Next.js: 14.2.3

Priority this issue should have

Low (slightly annoying)

[AykutSarac]

Can you try again using Docker?

[oleole39]

Can you try again using Docker?

You mean just to check ?
Because in the end I am looking for a way to build it without Docker (I'd like to package it for Yunohost).