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

Question

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.stack.imgur.com/XOR4Z.png

Can you show a screenshot of your folder structure highlighting where the component you have shown? — Youssouf Oumar, Aug 23 '23 at 20:16
@YoussoufOumar I have added the folder structure. please check — Bhargav Yvsb, Aug 24 '23 at 06:24
The code you have given is working for me. How you are accessing the route? — Youssouf Oumar, Aug 24 '23 at 07:08
Same and it's working for me. What do you see when you go to the route? Anything on the browser console, or in your terminal? — Youssouf Oumar, Aug 24 '23 at 08:55
I have added an image in the question at the end. Just a blank page with ReactFlow hyperlink at the bottom. Terminal shows nothing. — Bhargav Yvsb, Aug 24 '23 at 08:56
To replicate this problem: 1. Create the project using `npx create-next-app@latest` select TypeScript - No, ESLint - Yes, Tailwind - No, src dir - Yes, App Router - Yes, customise default import alias - No 2. Install reactflow - npm i --save reactflow 3. Add the folder app/flow with the above code. 4. npm run dev and then go to localhost:3000/flow — Bhargav Yvsb, Aug 24 '23 at 09:12
Thanks @YoussoufOumar for checking and letting me know that this code is working. I updated my node version as you said its working and figured it out finally. — Bhargav Yvsb, Aug 24 '23 at 17:28

score 2 · Accepted Answer · answered Aug 24 '23 at 17:27

2

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.

answered Aug 24 '23 at 17:27

Bhargav Yvsb

31
4

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

1 Answers1