How to fix Minified React error #123; visit https://react.dev/errors/123 for the full message in React

In development, React provides detailed error messages instead of minified codes. This will show you exactly what initialization step failed.

# If using Create React App
npm start  # Uses development build by default

# If using custom setup, ensure NODE_ENV is not set to production
NODE_ENV=development npm start

The development build will reveal the actual problem causing error #123.

Check that React and ReactDOM are properly installed and match compatible versions.

npm list react react-dom

# Should show something like:
# [email protected]
# [email protected]

# If versions don't match or are missing, reinstall
rm package-lock.json node_modules
npm install

Ensure both react and react-dom are present in package.json dependencies.

Delete the build output directory and rebuild from scratch to ensure the production build is created correctly.

# For Create React App
npm run build

# For custom setup (example)
rm -rf dist/
npm run build

# For Webpack
rm -rf dist/
webpack --mode production

A clean rebuild often resolves issues caused by incomplete or corrupted build artifacts.

If using a custom webpack or build configuration, verify that React's initialization code is not being stripped or mangled.

// webpack.config.js - example
module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist',
  },
  // Ensure no aggressive tree-shaking or mangling of React internals
  optimization: {
    usedExports: true,
    // Avoid over-aggressive minification
    minimize: true,
  },
};

Refer to your bundler's documentation for proper React handling.

Update to the latest stable version of React and ReactDOM to ensure all fixes and initialization code are included.

npm update react react-dom

# Or specify a specific version
npm install react@latest react-dom@latest

If you're on an old version, update to a newer stable release. Check [React's release notes](https://react.dev) for any known initialization issues.

Ensure your application entry point (typically src/index.js or src/main.js) properly imports and initializes React and ReactDOM.

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Missing or incorrect initialization will prevent React's internal systems from setting up properly.