title: ERROR ReferenceError: React is not defined | Using React Components in Angular
body: <p>So basically I want to render one single React component (a notification component) into my Angular project. I created <code>Notification.tsx</code></p>
  <pre class="lang-js prettyprint-override"><code>import * as React from 'react';
  import { FunctionComponent, useEffect, useRef, useState } from 'react';
  import { IconButton, Badge, Menu, List, ListItem, ListItemIcon, ListItemText, ListItemSecondaryAction, Avatar } from '@material-ui/core';
  import { Notifications, Delete, Event, HourglassEmpty, Alarm } from '@material-ui/icons';
  import { makeStyles } from '@material-ui/core/styles';
  import { grey } from '@material-ui/core/colors';
  
  export interface NotificationProps { }
  
  export const NotificationComponent: FunctionComponent&lt;NotificationProps&gt; = (props: NotificationProps) =&gt; {
      return &lt;div className={&quot;row&quot;}&gt;
          &lt;IconButton disableRipple={true} aria-label=&quot;notification&quot; className=&quot;py-3 my-auto&quot;
              onClick={handleNotificationMenuClick} aria-controls=&quot;notification-drop-down-menu&quot;
              aria-haspopup=&quot;true&quot;&gt;
              &lt;Badge badgeContent={4} max={99} color=&quot;secondary&quot;&gt;
                  &lt;Notifications /&gt;
              &lt;/Badge&gt;
          &lt;/IconButton&gt;
      &lt;/div&gt;
  };
  </code></pre>
  <p>A wrapper component <code>NotificationWrapper.tsx</code></p>
  <pre class="lang-js prettyprint-override"><code>import { AfterViewInit, Component, ElementRef, OnChanges, OnDestroy, SimpleChanges, ViewChild, ViewEncapsulation } from '@angular/core';
  import { NotificationComponent } from './Notification';
  import * as React from 'react';
  import * as ReactDOM from 'react-dom';
  
  const containerElementName = 'notificationComponentTemplate';
  
  @Component({
      selector: 'react-notification-component',
      template: `&lt;span #${containerElementName}&gt;&lt;/span&gt;`,
      encapsulation: ViewEncapsulation.None,
  })
  export class NotificationWrapper implements OnChanges, OnDestroy, AfterViewInit {
      @ViewChild(containerElementName, { static: false }) containerRef: ElementRef;
  
      constructor() { }
  
      ngOnChanges(changes: SimpleChanges): void {
          this.render();
      }
  
      ngAfterViewInit() {
          this.render();
      }
  
      ngOnDestroy() {
          ReactDOM.unmountComponentAtNode(this.containerRef.nativeElement);
      }
  
      private render() {
          ReactDOM.render(&lt;div className={'notification-wrapper'}&gt;
              &lt;NotificationComponent /&gt;
          &lt;/div&gt;, this.containerRef.nativeElement);
      }
  }
  </code></pre>
  <p>Added this wrapper to <code>app.module.ts</code>'s <code>@NgModule</code></p>
  <pre class="lang-js prettyprint-override"><code>import { NotificationWrapper } from &quot;../react-components/notification/NotificationWrapper&quot;;
  
  @NgModule({
    declarations: [
      NotificationWrapper,
    ],
  })
  </code></pre>
  <p>Used the notification wrapper selector as follows:</p>
  <pre class="lang-html prettyprint-override"><code>        &lt;div class=&quot;col-sm-6&quot;&gt;
            &lt;react-notification-component&gt;&lt;/react-notification-component&gt;
          &lt;/div&gt;
  </code></pre>
  <p>Everything works fine when served locally and as I went through other similar questions on this site: I've added <code>&quot;jsx&quot;: &quot;react&quot;</code> to <code>tsconfig.json</code>,</p>
  <pre class="lang-json prettyprint-override"><code>  plugins: [
      new webpack.ProvidePlugin({
        &quot;React&quot;: &quot;react&quot;,
      })
    ]
  </code></pre>
  <p>and</p>
  <pre class="lang-json prettyprint-override"><code>  externals: {
      'react': 'React'
    },
  </code></pre>
  <p>to <code>webpack.config.js</code>. Here's the whole file for reference.</p>
  <pre class="lang-json prettyprint-override"><code>// Work around for https://github.com/angular/angular-cli/issues/7200
  
  const path = require('path');
  const webpack = require('webpack');
  // change the regex to include the packages you want to exclude
  const regex = /firebase\/(app|firestore)/;
  
  module.exports = {
    mode: 'production',
    entry: {
      // This is our Express server for Dynamic universal
      server: './server.ts'
    },
    externals: {
      './dist/server/main': 'require(&quot;./server/main&quot;)',
      'react': 'React'
    },
    target: 'node',
    node: {
      __dirname: false,
      __filename: false,
    },
    resolve: { extensions: ['.ts', '.js'] },
    target: 'node',
    mode: 'none',
    // this makes sure we include node_modules and other 3rd party libraries
    externals: [/node_modules/, function (context, request, callback) {
      // exclude firebase products from being bundled, so they will be loaded using require() at runtime.
      if (regex.test(request)) {
        return callback(null, 'commonjs ' + request);
      }
      callback();
    }],
    optimization: {
      minimize: false
    },
    output: {
      // Puts the output at the root of the dist folder
      path: path.join(__dirname, 'dist'),
      filename: '[name].js'
    },
    module: {
      noParse: /polyfills-.*\.js/,
      rules: [
        { test: /\.ts$/, loader: 'ts-loader' },
        {
          // Mark files inside `@angular/core` as using SystemJS style dynamic imports.
          // Removing this will cause deprecation warnings to appear.
          test: /(\\|\/)@angular(\\|\/)core(\\|\/).+\.js$/,
          parser: { system: true },
        },
      ]
    },
    plugins: [
      new webpack.ProvidePlugin({
        &quot;React&quot;: &quot;react&quot;,
      }),
      new webpack.ContextReplacementPlugin(
        // fixes WARNING Critical dependency: the request of a dependency is an expression
        /(.+)?angular(\\|\/)core(.+)?/,
        path.join(__dirname, 'src'), // location of your src
        {} // a map of your routes
      ),
      new webpack.ContextReplacementPlugin(
        // fixes WARNING Critical dependency: the request of a dependency is an expression
        /(.+)?express(\\|\/)(.+)?/,
        path.join(__dirname, 'src'),
        {}
      )
    ]
  };
  </code></pre>
  <p>My problem is, when I build my app, the notification component is not rendered and I get this error in console <code>ERROR ReferenceError: React is not defined</code>. Is there anything that I missed? Thanks in advance.</p>