I am trying the basic example using "reactflow": "^11.8.3" and "next": "13.4.19". I am using the app router of next.js. The nodes and edges are not rendered. The relevant html elements are not created.
Adding code for reference
Root 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 page app/flow/layout.js
import styles from './flow.module.css';
export default function FlowLayout({children}) {
return (
<div className={styles.flow}>
{children}
</div>
)
}
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}
/>
)
}
app/flow/flow.module.css
.flow {
width: 100vw;
height: 100vh;
background-color: white;
}
I tried the same example with Next.js and ReactFlow same versions with pages router and the example creates nodes and edges.
[![enter image description here][2]][2]
This is what I get in the browser. Nodes and edges are not created - no html tags for nodes and edges. [2]: https://i.sstatic.net/XOR4Z.png
The problem got resolved when I upgraded my node and in turn npm version. It wasn't working with node 16.7. After upgrading to node 18.17.1 it worked.