使用Next.js App Router时ReactFlow节点与边缘无法渲染

使用版本为^{11.8.3的reactflow和}13.4.19的next.js，采用Next.js的App Router模式运行基础示例时，节点和边缘未被渲染，相关HTML元素也未生成。但使用相同版本的依赖，切换为Pages Router模式运行同一示例时，节点和边缘可正常生成。浏览器仅显示空白页面，无对应节点/边缘的HTML标签。

相关代码 #

根布局 app/layout.js #

import './globals.css'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export const metadata = {
  title: 'Next-Reactflow App router',
  description: 'Generated by create next app',
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

Flow页面布局 app/flow/layout.js #

import styles from './flow.module.css';
export default function FlowLayout({children}) {
    return (
        <div className={styles.flow}>
            {children}
        </div>
    )
}

Flow页面 app/flow/page.js #

'use client'
import React from 'react';
import ReactFlow from 'reactflow';
import 'reactflow/dist/style.css';

const initialNodes = [
    { 
        id: '1', 
        position: { x: 100, y: 100 }, 
        data: { label: 'Node 1' } 
    },
    { 
        id: '2', 
        position: { x: 100, y: 200 }, 
        data: { label: 'Node 2' } 
    },
  ];
const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];

export default function Flow() {
    return (
        <ReactFlow 
            nodes={initialNodes}
            edges={initialEdges}
        />
    )
}

Flow样式文件 app/flow/flow.module.css #

.flow {
  width: 100vw;
  height: 100vh;
  background-color: white;
}

文件结构 #

app/
├── layout.js
└── flow/
    ├── layout.js
    ├── page.js
    └── flow.module.css

内容的提问来源于stack exchange，提问作者Bhargav Yvsb