In-depth Analysis and Solutions for 'Uncaught ReferenceError: React is not defined'

Error Phenomenon and Background Analysis

During React and Rails integration development, developers frequently encounter the classic Uncaught ReferenceError: React is not defined error. As described in the problem, although the React object can be accessed normally in the browser console, reference errors occur during actual code execution. This contradictory phenomenon often indicates issues with module loading timing or scope.

Core Issue: Webpack External Dependency Configuration

According to the best answer analysis, the main root of this error lies in the externals option in Webpack configuration. When the configuration includes:

externals: {
    'react': 'React'
}

This configuration instructs Webpack not to resolve require('react') by loading an npm module, but instead expects a global variable named React to exist in the global scope (i.e., the window object). If the React framework is not correctly loaded into the global environment before code execution, reference errors will occur.

Detailed Solutions

Solution 1: Remove External Dependency Configuration

The most direct solution is to remove the externals related settings in the Webpack configuration, so React will be bundled into the final bundle file:

// Modified webpack.config.js
module.exports = {
    externals: {
        'react': 'React',
        'react-dom': 'ReactDOM'
    },
    // Other configurations...
};

// Modified webpack.config.js
module.exports = {
    // Remove externals configuration
    // Keep other configurations unchanged
};

Solution 2: Ensure External React is Correctly Loaded

If external dependency configuration needs to be maintained due to performance or other reasons, it must be ensured that React has been loaded before business code execution. Refer to the CDN loading method mentioned in the reference article:

<!-- Ensure React loads before business code in HTML file -->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="./app.js"></script>

Other Related Error Scenarios

Babel Runtime Configuration Issues

In React 17 and higher versions, if using Babel for transpilation, runtime mode configuration may be required. As described in Answer 1, add to .babelrc:

{
    "presets": [
        "@babel/preset-env",
        ["@babel/preset-react", {"runtime": "automatic"}]
    ]
}

Module Import Order Errors

Answer 2 points out common import order issues. When using ES6 module syntax, it must be ensured that React is imported before ReactDOM:

// Incorrect import method
import ReactDOM from 'react-dom';

// Correct import method
import React from 'react';
import ReactDOM from 'react-dom';

Webpack ProvidePlugin Solution

Answer 4 provides another solution using Webpack's ProvidePlugin to automatically provide the React variable:

const webpack = require('webpack');

module.exports = {
    plugins: [
        new webpack.ProvidePlugin({
            "React": "react",
        }),
    ],
};

Problem Troubleshooting and Debugging Suggestions

When encountering React undefined errors, it is recommended to troubleshoot according to the following steps:

1. Check the browser developer tools console to confirm the specific location where the error occurs
2. Verify whether React is available in the global scope (enter window.React in the console)
3. Check script loading order to ensure React library loads before business code
4. Review configuration of Webpack or other build tools
5. Confirm module import statements are spelled correctly and in proper order

Summary and Best Practices

The core of the Uncaught ReferenceError: React is not defined error lies in module loading timing and scope management. Developers need to deeply understand the configuration principles of build tools, especially the handling mechanism of external dependencies. In actual projects, it is recommended to choose appropriate technical solutions based on specific requirements: for small projects, React can be bundled into the bundle; for large projects, consider using CDN loading for better caching effects. Regardless of the chosen solution, ensure all dependencies are correctly loaded and initialized when code executes.