React Flow Error: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function

The error (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function occurs when Webpack fails to resolve the correct React version, typically due to duplicate installations or incorrect aliasing in Next.js. This usually stems from having multiple versions of React in your node_modules, causing the bundler to pick an incompatible one that lacks the expected API.

Understanding the Root Cause

This specific webpack error indicates that the module loader is attempting to access createContext on a React object that does not have it. In modern React applications, this is almost exclusively caused by version mismatches between the main application and its dependencies. When you install libraries like React Flow, they often specify peer dependencies for React. If your project has a different version installed than what the library expects, or if there are nested duplicates, the build process may bundle a legacy or incompatible version of React into the client-side bundle. Next.js handles React rendering differently than standard Create React App projects. It relies heavily on strict dependency resolution. If next requires React 18 but your local package.json forces React 17, or if a sub-dependency installs React 16 as a nested module, the webpack aliasing can break. The symbol react__WEBPACK_IMPORTED_MODULE_0__ refers to the first imported React module found by the resolver. If that module is an older version or a corrupted installation, createContext will be undefined or behave unexpectedly.

Why Pinning Versions is Not Enough

While some guides suggest pinning exact versions in package.json, this often masks the underlying issue of duplicate packages. Simply changing ^18.0.0 to 18.2.0 does not remove existing conflicting packages already present in your lock file. A more robust approach involves cleaning the dependency tree and ensuring consistency across all layers of your application. For deeper insights into resolving client-side exceptions in Next.js, which often share these root causes, see our guide on Troubleshooting Application Error: Client-Side Exception in Next.js.

Step-by-Step Resolution

To fix this issue, you must ensure that only one version of React exists in your entire dependency tree. Follow these steps to clean up your environment and rebuild correctly.

1. Delete Node Modules and Lock Files: Remove the node_modules directory and the lock file (package-lock.json for npm or pnpm-lock.yaml / yarn.lock for other package managers). This ensures that no cached or nested duplicate versions remain on disk.

   rm -rf node_modules
   rm package-lock.json # or yarn.lock / pnpm-lock.yaml

2. Verify Package.json Dependencies: Open your package.json and check the dependencies and devDependencies sections. Ensure that react and react-dom are listed with compatible versions (e.g., both at 18.x.x). Also, check next; it should be compatible with your React version.

   {
     "dependencies": {
       "next": "^14.0.0",
       "react": "^18.2.0",
       "react-dom": "^18.2.0",
       "react-flow-renderer": "^10.0.0"
     }
   }

3. Install Dependencies Freshly: Run your package manager install command. This will regenerate the lock file based on the current state of your package.json.

   npm install
   # or
   yarn install
   # or
   pnpm install

4. Check for Duplicate React Instances: After installation, verify that only one version of React is installed. You can do this by checking the output of your package manager or using a tool like npm ls react.

   npm ls react

   If you see multiple versions listed, it means a sub-dependency is forcing a different version. You may need to use overrides (npm v8.3+) or resolutions (Yarn) to force a single version.

   // package.json for npm
   "overrides": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }

5. Clear Next.js Cache: Next.js caches compiled code. Even after fixing dependencies, old cache might persist. Delete the .next folder before restarting the development server.

   rm -rf .next
   npm run dev

Common Pitfalls with React Flow

React Flow is a powerful library for building node-based editors, but it is sensitive to the React environment. One common mistake is importing components incorrectly or mixing class-based components with functional hooks in ways that confuse the bundler. However, the createContext error is rarely about usage syntax; it is almost always about module resolution. Another potential issue arises if you are using TypeScript. Ensure that your @types/react version matches your actual React version. Mismatches here can cause type errors during compilation, though they usually don't cause runtime createContext failures unless the types are severely out of sync with the implementation. For related TypeScript issues in React ecosystems, refer to Fixing Typescript Error in useMutation (React-Query).

Verifying the Fix

After performing the cleanup and reinstall, start your development server. Navigate to the page where React Flow is used. If the error persists, open your browser's developer console and look for any other warnings. Sometimes, a secondary error reveals the true culprit, such as a missing polyfill or a conflicting library. You can also inspect the bundled output in development mode. If you are using Webpack directly (not via Next.js), check the resolve.alias configuration to ensure it points to the correct React root. In Next.js, this is handled automatically, so manual aliasing is rarely needed and often harmful.

When to Use Overrides

If npm ls react still shows multiple versions after a clean install, it means a third-party library you depend on explicitly requires a different React version. In this case, you must use package manager overrides to force all instances to unify. This is safer than manually editing files in node_modules, which gets wiped on every install. Always prioritize keeping your core framework (Next.js) and UI library (React) aligned, as they form the foundation of your application stability.

Frequently Asked Questions

Does this error affect production builds?

Yes, this error will prevent your application from compiling successfully in production mode. Since the bundler cannot find the valid createContext function, the build process will fail or generate a broken bundle that crashes immediately upon loading in the browser.

Can I ignore this error by using a different import path?

No, ignoring the error is not possible because it is a fundamental module resolution failure. Changing import paths will not help if the underlying React package installed in node_modules is incorrect or corrupted. You must fix the dependency tree.

Why did this happen suddenly if my code didn't change?

This often happens after updating a third-party library that has a different React peer dependency requirement. When you update that library, it may introduce a new version of React into your node_modules folder, creating a conflict with your existing React installation.

Is it safe to delete the .next folder?

Yes, deleting the .next folder is safe and recommended when troubleshooting build issues. It contains cached compiled assets that might be stale. Deleting it forces Next.js to recompile everything from scratch using the current dependencies.

What if I am using Yarn Workspaces?

In monorepos using Yarn Workspaces, hoisting rules can sometimes cause unexpected version conflicts. Ensure that resolutions are set in the root package.json to force a single React version across all packages, preventing nested duplicates from forming.