If a .TSX generates a reference to an object on compile (eg React.createElement) that is not otherwise referenced in source, it will not get included on production build

[The-MAZZTer]

🐞 bug report

Affected Package

Angular compilation process

Is this a regression?

Unknown

Description

I recently inherited a project which uses Angular with embedded React components. import * as React from "react"; appears in a bunch of .TSX files included with the project, and embedded XML tags are used to indicate React elements, which I understand are compiled down to React.createElement calls.

The React object itself is never referenced in any source code directly,

When I run the project in development mode it runs fine. When I build for production, the React.createElement calls remain as React.createElement instead of being compiled to the proper webpack import name.

If I add ANY explicit reference to React in any file, for example console.log(React.version);, the production build starts working again.

I suspect what is happening is a pass to strip out unused code is happening before .tsx files are processed by TypeScript. And then after the code is compiled down to JS webpack then compiles everything together but React is already gone so the React references are left intact.

If so the best fix I can think of is to split up the TypeScript compilation process to first convert .TSX to temporary .TS files (if possible), run the stripping process on those and not the original .TSX, then complete the build process as normal with the .TS files.

Simpler solutions might include hard coding React to never be stripped out if there are .tsx files present in the project.

🔬 Minimal Reproduction

Unfortunately, I don't have the needed skill set currently to create a minimal test case from scratch (no experience in React) and I am not authorized to share code from my project publicly. Sorry.

🔥 Exception or Error

ERROR ReferenceError React is not defined

This occurs at the point in a .TSX where an inline XML element is located.

🌍 Your Environment

Angular Version:

Angular CLI: 8.3.3
Node: 12.3.1
OS: win32 x64
Angular: 8.2.5
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router

Package                                    Version
--------------------------------------------------------------------
@angular-devkit/architect                  0.803.3
@angular-devkit/build-angular              0.803.3
@angular-devkit/build-optimizer            0.803.3
@angular-devkit/build-webpack              0.803.3
@angular-devkit/core                       8.3.3
@angular-devkit/schematics                 8.3.3
@angular/cdk                               8.1.4
@angular/cli                               8.3.3
@angular/http                              7.2.15
@angular/material                          8.1.4
@ngtools/webpack                           8.3.3
@nguniversal/module-map-ngfactory-loader   7.1.1
@schematics/angular                        8.3.3
@schematics/update                         0.803.3
rxjs                                       6.5.3
typescript                                 3.5.3
webpack                                    4.39.2

Anything else relevant?
This may be a bug in webpack; I am unsure about which component this bug lies in.

I did not notice any change when messing with build options; only when adding an explicit reference to React to the code.

[alxhub]

Hello @The-MAZZTer,

I'm going to transfer this issue to the angular-cli repo. However, without a minimal reproduction there might not be much we can do to help you - we don't directly support/test bundling of React within Angular apps. That said, there's no reason it shouldn't work...

[clydin]

This appears to have the same underlying issue as #13297

[alan-agius4]

Closing as duplicate of #13297

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}