Fix React createContext is Not a Function Error (2026)

React’s createContext is not a function error means the JavaScript runtime can’t find the createContext function where it expects to. This usually happens because React itself hasn’t been loaded or initialized correctly in your project.

Common Causes and Fixes

1. Incorrect React Import:

• Diagnosis: Check your import statements in files where you’re using createContext.
• Fix: Ensure you’re importing createContext directly from the react package.

  import React, { createContext } from 'react';
  

  • Why it works: This explicitly tells JavaScript to look for createContext within the react module. A common mistake is importing it from a sub-module or a different package.

2. Corrupted node_modules or Incomplete Installation:

• Diagnosis: Run npm list react or yarn list react in your project’s root directory. If React is not listed or shows an inconsistent version, your dependencies are likely broken.
• Fix: Delete your node_modules folder and reinstall dependencies.

  rm -rf node_modules
  npm install
  # or
  yarn install
  

  • Why it works: This fetches a fresh, complete copy of all project dependencies, ensuring React and its components are installed correctly.

3. Multiple React Versions in the Project:

• Diagnosis: Run npm ls react (or yarn list react) and look for multiple versions of React listed. This can happen if you have different dependencies that require different React versions.
• Fix: Use npm dedupe or yarn dedupe to try and resolve version conflicts. If that doesn’t work, you might need to explicitly peer-depend on a single React version in your package.json or adjust your dependencies.

  npm dedupe
  # or
  yarn dedupe
  

  • Why it works: Deduplication attempts to force all parts of your application to use a single, consistent version of React, preventing issues where different parts of the code are trying to access createContext from different React instances.

4. Incorrect react-dom Import (in older React versions or specific setups):

• Diagnosis: While createContext is primarily a react concern, in some older setups or specific build configurations, issues with react-dom can indirectly cause problems. Check your react-dom import.
• Fix: Ensure react-dom is also correctly installed and imported if your setup relies on it for rendering.

  import ReactDOM from 'react-dom'; // Example, context is from 'react'
  import React, { createContext } from 'react';
  

  • Why it works: Although createContext itself isn’t in react-dom, a broken react-dom installation can sometimes lead to a generally unstable React environment where core functions appear missing.

5. Incorrect Module Resolution in Bundlers (Webpack, Rollup, Vite):

• Diagnosis: Examine your bundler’s configuration file (e.g., webpack.config.js, vite.config.js). Look for any custom resolve.alias or moduleResolution settings that might be misdirecting the import of react.
• Fix: Reset or correctly configure your bundler’s module resolution. For example, ensure react is not aliased to something else.

  // Example in webpack.config.js
  module.exports = {
    // ...
    resolve: {
      alias: {
        'react': path.resolve('./node_modules/react') // Ensure this points correctly or remove if unnecessary
      },
      // ...
    },
    // ...
  };
  

  • Why it works: Bundlers handle how modules are found. If the configuration incorrectly tells the bundler to look for react in the wrong place, createContext won’t be found.

6. TypeScript Configuration Issues:

• Diagnosis: If you’re using TypeScript, check your tsconfig.json. Ensure moduleResolution is set to "node" or "bundler", and that your paths configuration (if any) isn’t interfering with React’s location.
• Fix: Adjust your tsconfig.json to correctly resolve modules.

  {
    "compilerOptions": {
      "moduleResolution": "node", // or "bundler"
      // ... other options
    },
    // ...
  }
  

  • Why it works: TypeScript’s type checking and module resolution need to align with how your JavaScript bundler works. Incorrect settings can lead to the compiler not understanding where to find React’s functions.

7. Running Code Before React is Initialized (Less Common in Modern Apps):

• Diagnosis: In very old or custom setups, you might be trying to use createContext in a script that runs before your main React application bundle has loaded and initialized.
• Fix: Ensure your index.html correctly loads your bundled JavaScript file, and that your React app is mounted to a DOM element after the script has executed.

  <!-- index.html -->
  <body>
    <div id="root"></div>
    <script src="/path/to/your/bundle.js"></script>
  </body>
  

  // main.js (or equivalent entry point)
  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import App from './App';
  
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(<App />); // App uses createContext
  

  • Why it works: This guarantees that the React library is fully available in the JavaScript environment before any code attempts to call its functions.

The next error you’ll likely encounter after fixing this is a TypeError: Cannot read properties of undefined (reading 'Provider') if your context provider isn’t correctly set up, or a component failing to render due to missing data from the context.