React is working fine but when I call the react flow getting Error: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function

Question

I created a react (version 18) application with next.js with typescript it was working fine when running the application npm run dev working fine, but after installing the react flow npm install reactflow and try to use the code like below the error is happening. Please help me to fix this issue.

import ReactFlow, { Controls, Background } from 'reactflow';
import 'reactflow/dist/style.css';

const edges = [{ id: '1-2', source: '1', target: '2' }];

const nodes = [
  {
    id: '1',
    data: { label: 'Hello' },
    position: { x: 0, y: 0 },
    type: 'input',
  },
  {
    id: '2',
    data: { label: 'World' },
    position: { x: 100, y: 100 },
  },
];

function Flow() {
  return (
    <div style={{ height: '100%' }}>
      <ReactFlow nodes={nodes} edges={edges}>
        <Background />
        <Controls />
      </ReactFlow>
    </div>
  );
}

export default Flow;

page.tsx

import Flow from './components/canvas';

export default function Home() {
  return (
    <main className='flex min-h-screen flex-col items-center justify-between p-24'>
      <h1>Testing head</h1>
      <Flow />
    </main>
  );
}

Package.json

{
  "name": "demo-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "14.0.3",
    "react": "^18",
    "react-dom": "^18",
    "reactflow": "^11.10.1"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.0.3",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }
}

Terminal error log

Answer 1

I didn't get error when I tried to reproduce it, though react-flow was just not showing any flow, below is the fix of your code snippet.

Issue

When you set the height of a child element to 100%, it tries to take up 100% of its parent’s actual height. If the parent’s height is not explicitly defined, the child’s height computes to none, allowing the child to be as tall as possible.

In your case, the parent component has a class min-h-screen which sets a minimum height, but doesn’t explicitly set a height. So, when you set the child component’s height to 100%, it doesn’t have an explicit height from the parent to refer to.

Solution

1. Set defined height of the parent component, let's say 400px. (I prefer)
2. Use viewport units (vh) for the child component. Instead of height:100%, change it to 1000vh.

If you wanna play with code

Answer 2

I'm using NextJS(v14.1) and reactflow(v11.10.3). What worked for me was to declare it as a client side component, which can be achieved by adding the below line at the top of the file:

'use client';

I'm assuming the compiler might have assumed it to be a server side component by default