xyflow / react-flow-example-apps

Example React Flow apps for Create React App, Next.js and Remix.

React Flow Example Apps

This repo contains starting points / references for projects that use React Flow.

• Create React App Example
• Next.js Example
• Remix Example

Please refer to the React Flow Docs for more information about how to use React Flow.

react-flow-example-apps's Issues

Errors in unchanged example source code -- reactflow-nextjs

1. I downloaded this repo
2. cd reactflow-nextjs-app-router
3. yarn install
4. view code in VS Code:

Error 1

❯ npx tsc

src/pages/_app.tsx:7:11 - error TS2786: 'Component' cannot be used as a JSX component.
  Its element type 'ReactElement<any, any> | Component<any, any, any> | null' is not a valid JSX element.
    Type 'Component<any, any, any>' is not assignable to type 'Element | ElementClass | null'.
      Type 'Component<any, any, any>' is not assignable to type 'ElementClass'.
        The types returned by 'render()' are incompatible between these types.
          Type 'React.ReactNode' is not assignable to type 'import("/Users/chris/projects/2-react-flow-example-apps/reactflow-nextjs/node_modules/@types/react-dom/node_modules/@types/react/ts5.0/index").ReactNode'.
            Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
              Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.

7   return <Component {...pageProps} />;
            ~~~~~~~~~

  node_modules/@types/react-dom/node_modules/@types/react/ts5.0/index.d.ts:378:9
    378         children: ReactNode;
                ~~~~~~~~
    'children' is declared here.

Found 1 error in src/pages/_app.tsx:7

Error 1 prevents the app from being built. It can be run via yarn run dev, but yarn run build fails.

May matter -- I'm running Node v21.7.1. Note the repo doesn't specify what Node version to use.

See related #5.

Errors in unchanged example source code -- reactflow-nextjs-app-router

1. I downloaded this repo
2. cd reactflow-nextjs-app-router
3. yarn install
4. view code in VS Code:

Error 1

That can be suppressed in VS Code only (not resolved) by preceding with // eslint-disable-next-line @next/next/no-async-client-component. When I run yarn run build, the build fails for the same issue: Type error: Type '{ children: Element; initialNodes: Node[]; initialEdges: Edge[]; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'. Property 'initialNodes' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'.

Error 2

I haven't found a fix. This is likely a React 18 types issue. It would be helpful to know how you've solved it, if you have.

Error 3

This can be suppressed (not resolved) by preceding each size: line with // @ts-ignore TS2322.

---

Errors 2 and 3 are nuisance -- can be suppressed to reduce IDE noise, although that's not as safe as possible.

However error 1 prevents the app from being built. It can be run via yarn run dev, but yarn run build fails.

May matter -- I'm running Node v21.7.1. Note the repo doesn't specify what Node version to use.

See related #6.

Under cypress e2e testing, reactflow error #004 happens occasionally

Hi team, I'm using the nextjs example in this repository to reproduce the issue where reactflow onPaneClick handler doesnt receive the cypress ( "cypress": "^12.17.4") onClick event. The event is logged in console and I triggered the test manually via the cypress browser. After ten or more hits, I got index.js:150 [React Flow]: The React Flow parent container needs a width and a height to render the graph. Help: https://reactflow.dev/error#004 occasionally. To me, it doesnt seem to be any width/height error with the reactflow usages. Could anyone shred some light on this please? any ideas/suggestions would be appreciated.

onPaneClick handler

....
  const onPaneClick = useCallback((e: React.MouseEvent<Element, MouseEvent>) => {
    console.log('clicked', e);
  }, []);

  return (
    <div className={styles.flow}>
      <ReactFlow
        nodes={nodes}
        onNodesChange={onNodesChange}
        onPaneClick={onPaneClick}
.....

cypress script

describe('template spec', () => {
  it('passes', () => {
    cy.visit('http://localhost:3000')
    cy.get('.react-flow__pane')
    .click()
  })
})

cypress chrome console log

Please add an example in next.js with app router

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. The same code works for pages router of next.js.

Adding code for reference

Root 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
layout.js

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

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.module.css

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

Add Deploy to Vercel button to project description

Add the Deploy to Vercel button to the project description for Next js App

Markdown snippets below:

Source https://vercel.com/docs/deploy-button