Angular项目集成React通知组件构建后出现ERROR ReferenceError: React is not defined问题求助

Looks like you've got a solid setup for embedding a React notification component in Angular, but that post-build React is not defined error is a classic configuration mismatch. Let's break down what's going wrong and how to fix it:

Root Cause #

The error happens because your production build isn't properly making the React variable available at runtime. Your local dev environment likely handles this via webpack-dev-server's implicit module injection, but the production build strips that out. Additionally, your webpack config has conflicting externals definitions that are overriding your React global mapping.

Solution 1: Fix Conflicting Webpack externals Config #

You have two separate externals blocks in your webpack.config.js—the object form and the array form. Webpack will use the last one defined, which means your 'react': 'React' mapping is being ignored. Let's merge them properly:

const path = require('path');
const webpack = require('webpack');
const regex = /firebase\/(app|firestore)/;

module.exports = {
  mode: 'production',
  entry: { server: './server.ts' },
  target: 'node',
  node: { __dirname: false, __filename: false },
  resolve: { extensions: ['.ts', '.js'] },
  externals: [
    // Keep React/ReactDOM mapped to global variables
    {
      './dist/server/main': 'require("./server/main")',
      'react': 'React',
      'react-dom': 'ReactDOM' // Add ReactDOM mapping too
    },
    // Handle other external dependencies selectively
    function (context, request, callback) {
      // Skip React/ReactDOM so they aren't marked as external
      if (/^react($|\/)/.test(request) || /^react-dom($|\/)/.test(request)) {
        return callback();
      }
      // Exclude Firebase products as before
      if (regex.test(request)) {
        return callback(null, 'commonjs ' + request);
      }
      // Mark other node_modules dependencies as external
      if (/node_modules/.test(request)) {
        return callback(null, 'commonjs ' + request);
      }
      callback();
    }
  ],
  optimization: { minimize: false },
  output: { path: path.join(__dirname, 'dist'), filename: '[name].js' },
  module: {
    noParse: /polyfills-.*\.js/,
    rules: [
      { test: /\.ts$/, loader: 'ts-loader' },
      {
        test: /(\\|\/)@angular(\\|\/)core(\\|\/).+\.js$/,
        parser: { system: true },
      },
    ]
  },
  plugins: [
    // Globally inject React and ReactDOM into all modules
    new webpack.ProvidePlugin({
      React: 'react',
      ReactDOM: 'react-dom'
    }),
    new webpack.ContextReplacementPlugin(
      /(.+)?angular(\\|\/)core(.+)?/,
      path.join(__dirname, 'src'),
      {}
    ),
    new webpack.ContextReplacementPlugin(
      /(.+)?express(\\|\/)(.+)?/,
      path.join(__dirname, 'src'),
      {}
    )
  ]
};

Solution 2: Ensure Global React is Loaded in the Browser #

If you're using Angular Universal (server-side rendering), your server config is fixed, but you need to make sure the client browser has access to React. Add these scripts to your src/index.html <head>:

<!-- Use CDN for React/ReactDOM production builds -->
<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

If you prefer local files, copy node_modules/react/umd/react.production.min.js and node_modules/react-dom/umd/react-dom.production.min.js to src/assets, then use:

<script src="%BASE_URL%/assets/react.production.min.js"></script>
<script src="%BASE_URL%/assets/react-dom.production.min.js"></script>

Solution 3: Sync Client-Side Webpack Config (For Angular Universal) #

Your server webpack config is now fixed, but you need to apply the same changes to your client-side webpack config (usually webpack.config.browser.js). Add these sections:

plugins: [
  new webpack.ProvidePlugin({
    React: 'react',
    ReactDOM: 'react-dom'
  })
],
externals: {
  'react': 'React',
  'react-dom': 'ReactDOM'
}

To hook this into Angular's build process, update your angular.json to reference the client config:

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "extraWebpackConfig": "./webpack.config.browser.js",
    // ... rest of your build options
  }
}

Solution 4: Tweak TypeScript Config for React Compatibility #

Double-check your tsconfig.json to ensure TypeScript can resolve React correctly:

{
  "compilerOptions": {
    "jsx": "react",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "node",
    // ... other existing options
  }
}

Verification Steps #

1. Delete old build artifacts: rm -rf dist/
2. Rebuild your project: ng build --prod (or ng run your-project:server:production for Universal)
3. Launch your production server and check the browser console—no more React is not defined errors!

内容的提问来源于stack exchange，提问作者Keshavram Kuduwa