Dependency conflict – TypeError: Cannot read property ‘createElement’ of undefined

This error typically occurs when React isn’t properly imported or there are version conflicts between React and other libraries. Here’s how to resolve it:

Primary Solutions

1. Verify React Import

// Correct import (ES modules)
import React from 'react';
import { createElement } from 'react';

// For JSX to work, React must be in scope
function MyComponent() {
  return <div>Hello</div>; // Implicitly uses React.createElement
}

2. Check React Installation

# Verify React is installed
npm list react

# Reinstall if needed
npm install react react-dom

Common Scenarios

3. Multiple React Versions

# Check for duplicate React installations
npm list react --all

# Force single version (for yarn)
yarn add react@latest react-dom@latest --flat

4. Webpack/Rollup Configuration

// webpack.config.js
module.exports = {
  resolve: {
    alias: {
      react: path.resolve(__dirname, './node_modules/react'),
      'react-dom': path.resolve(__dirname, './node_modules/react-dom')
    }
  }
};

Framework-Specific Fixes

5. Next.js Solution

// next.config.js
module.exports = {
  webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      react: path.resolve('./node_modules/react'),
      'react-dom': path.resolve('./node_modules/react-dom')
    };
    return config;
  }
};

6. Create React App Fix

# Recreate react-scripts links
npm install --save --save-exact react-scripts@latest

Advanced Debugging

7. Check Where React is Loaded From

// Add to your entry file
console.log('React path:', require.resolve('react'));
console.log('React version:', require('react').version);

8. Verify Babel Configuration

// .babelrc or babel.config.json
{
  "presets": [
    ["@babel/preset-react", {
      "runtime": "automatic" // Removes need to import React directly
    }]
  ]
}

Common Mistakes

• Forgetting to import React (when not using new JSX transform)
• Having multiple React copies in node_modules
• Incorrect peer dependencies in libraries
• Using incompatible React versions with other libraries
• Broken symlinks in dependency tree

Troubleshooting Checklist

1. [ ] Verify React import in all components
2. [ ] Check for multiple React versions
3. [ ] Validate bundler configuration
4. [ ] Ensure proper Babel configuration
5. [ ] Test with minimal reproducible example
6. [ ] Check third-party library compatibility
7. [ ] Reinstall node_modules if needed

Verification Steps

1. Create a simple test file:

// test.jsx
import React from 'react';
console.log('React createElement exists:', !!React.createElement);

2. Run the test file to verify React is properly resolved.