Nx: Cannot build React Apps after migrations from Nx 8.4.13 to 8.7.0

[kazamov]

_Please make sure you have read the submission guidelines before posting an issue_

Prerequisites

• [+ ] I am running the latest version
• [+ ] I checked the documentation and found no answer
• [+ ] I checked to make sure that this issue has not already been filed
• [ ] I'm reporting the issue to the correct repository (not related to Angular, AngularCLI or any dependency)

Expected Behavior

Build of React Application should be succeed as it was before update.

Current Behavior

Build of React Application is failed with an error.

Steps to Reproduce

1. Create workspace with "npx [email protected] repro-workspace"
2. Generate React App
3. Migrate to latest Nx using "npx ng update @nrwl/workspace"
4. Try to build React App

Failure Logs

ERROR in ./main.tsx 4:16
Module parse failed: Unexpected token (4:16)
File was processed with these loaders:

• ../../../node_modules/babel-loader/lib/index.js
  You may need an additional loader to handle the result of these loaders.
  | import ReactDOM from 'react-dom';
  | import { App } from './app/App';

ReactDOM.render(, document.getElementById('root'));

[dustin-page]

I just upgraded from 8.2.0 to 8.7.0 and I am seeing the same error in my React project.

[kazamov]

Actually the same issue for 8.6 version. But if create workspace from scratch and add React app - everything is fine.

[FrozenPandaz]

Could someone please provide a repo with the issue to aid our investigation into this issue.

[kazamov]

Hi. I have found how to reproduce from scratch.

1. Create a new workspace with Nx 7.7.2: "npx [email protected] react-nx-bug" with React app.
2. Run update command. First it will update to Nx 8.0.0. Run update command again, and workspace will be updated to latest Nx 8.7.0.
3. Try to build your React app.

You will see an error:
ERROR in ./main.tsx 4:16
Module parse failed: Unexpected token (4:16)
File was processed with these loaders:

• ../../../node_modules/babel-loader/lib/index.js
  You may need an additional loader to handle the result of these loaders.
  | import * as ReactDOM from "react-dom";
  | import { App } from "./app/app";

ReactDOM.render(, document.querySelector("react-nx-bug-root"));

[kazamov]

Hi @FrozenPandaz and @vsavkin , can you look at this issue please. Maybe you need some additional info. It is still reproduced for me when I try to update to Nx 8.8.0

[kazamov]

Hi @vsavkin. I have found a solution for current issue. After update of Nx packages webpackConfig property should be added to each react application inside angular.json file in the "options" section. The value should be a path @nrwl/react/plugins/webpack.

Thus during migration webpackConfig is not added to react app settings.

[jaysoo]

@kazamov it seems we didn't add webpackConfig option during the upgrade. I'll add it to the next version. For now adding the "webpackConfig": "@nrwl/react/plugins/webpack" to the builder options is the work around.

[jaysoo]

PR for adding migration for 8.12.0 to handle React projects with missing webpackConfig: https://github.com/nrwl/nx/pull/2352

Note, if your workspace is missing @babel/preset-react then make sure you install it. This dependency is installed automatically when you create a new React app.