reactjsnext.jsreact-flow

Reactflow and Next.js with app router - nodes and edges not rendered


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;
}

File structure

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


Solution

  • 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.