feat(react): remove unnecessary dependencies from @nrwl/react #13525

jaysoo · 2022-11-30T23:46:12Z

This PR removes packages such as @nrwl/webpack and @nrwl/cypress as dependencies from @nrwl/react. The goal is to avoid installing things that are not needed. For example, if vite is used then webpack should not be installed. Same thing for vitest replacing jest.

Technical details

To make sure we can still use other generators inside any generator (such as webpackInitGenerator from @nrwl/webpack), a new utility function is added to @nrwl/devkit: ensurePackage.

This function takes a package and an expected version, and checks to make sure it is already installed in the workspace.

export async function ensurePackage(
  tree: Tree,
  pkg: string,
  requiredVersion: string,
  options: {
    cwd?: string;
    dev?: boolean;
    packageJsonPath?: string;
    packageManager?: 'npm' | 'yarn' | 'pnpm';
    throwOnMissing?: boolean;
  } = {}
): Promise<void> {
  //...
}

If the package is not found, then one of two things happens:

If user passed --dryRun, then throwOnMissing is set to true and an error is thrown with a message like Required package <pkg>@<version> is missing. Run npm install -D <pkg>@<version>, and then try again.
If user did not pass --dryRun then the missing package is installed before continuing with the rest of the invoking generator. This will be the common case, for example when running create-nx-workspace.

Results / Comparisons

A normal React+Vite workspace using --preset=react-standalone will result in 365MB of node_modules prior to this change. After this change we end up with 259MB of node_modules, or a 106MB reduction in size.

A plain vite project created via npm create vite (select React and TypeScript), then adding the following packages:

npm i prettier \
react-test-renderer \
vitest \
@vitest/ui \
@vitejs/plugin-react \
@types/node \
@testing-library/react \
vite-tsconfig-paths

In that plain vite setup, node_modules is 151MB in size. There are still some improvements we can make (such as removing rxjs), but that is out of scope for this PR.

If you add the eslint plugins, then the vite project goes to 208MB in size:

npm i eslint \
eslint-config-prettier \
eslint-plugin-import \
eslint-plugin-jsx-a11y \
eslint-plugin-react \
eslint-plugin-react-hooks \
eslint-config-prettier \
eslint-plugin-import \
eslint-plugin-jsx-a11y \
eslint-plugin-react \
eslint-plugin-react-hooks \
vite-plugin-eslint \
@typescript-eslint/eslint-plugin \
@typescript-eslint/parser

Note: There seems to be duplicated packages at different versions such as aria-query between eslint plugins and testing library.

If you bring in the nx-specific packages, that's another 39MB for a total 247MB (or a 12 MB difference from our react-standalone preset):

 6.0M	node_modules/nrwl
 4.2M	node_modules/nx
 12M	node_modules/@parcel
 17M	node_modules/rxjs

Other notes

@nrwl/react now relies fully on vite/webpack/jest/cypress init generators to install the necessary packages.
Added uiFramework option to webpack init generator, same option already supported in cypress and storybook.
The AsyncIterable helpers from @nrwl/js have been moved to @nrwl/devkit so we can remove the JS dependency from @nrwl/react.

nx-cloud-staging · 2022-11-30T23:46:14Z

Nx Cloud Report

CI is running for commit 7555360.

📂 Click to track the progress, see the status, the terminal output, and the build insights.

Sent with 💌 from NxCloud.

vercel · 2022-11-30T23:46:16Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
nx-dev	✅ Ready (Inspect)	Visit Preview	Dec 1, 2022 at 9:18PM (UTC)

packages/devkit/src/utils/package-json.ts

docs/generated/devkit/index.md

lerna.json

packages/devkit/index.ts

packages/esbuild/src/executors/esbuild/esbuild.impl.ts

- If Vite is used, then Webpack and Jest are not needed - If e2e is not used, then Cypress is not needed - Trims down on the amount of packages that are downloaded

nx-cloud · 2022-12-01T21:39:07Z

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 53813a2. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

✅ Successfully ran 12 targets

Sent with 💌 from NxCloud.

FrozenPandaz · 2022-12-01T21:56:57Z

docs/generated/packages/webpack.json

@@ -18,6 +18,12 @@
        "description": "Init Webpack Plugin.",
        "type": "object",
        "properties": {
+          "uiFramework": {
+            "type": "string",
+            "description": "UI Framework to use for Vite.",


This is wrong. Please fix this in a follow up PR.

FrozenPandaz · 2022-12-01T21:58:51Z

packages/linter/src/migrations/update-13-3-0/eslint-8-updates.ts

 import { tsquery } from '@phenomnomnominal/tsquery';

 export default async function eslint8Updates(tree: Tree) {
  try {
+    const { addPropertyToJestConfig } = await import('@nrwl/jest');


Should this have ensurePackage?

FrozenPandaz · 2022-12-01T21:59:09Z

packages/nest/src/generators/convert-tslint-to-eslint/convert-tslint-to-eslint.spec.ts


 /**
 * Don't run actual child_process implementation of installPackagesTask()
 */
-jest.mock('child_process');
+// jest.mock('child_process');


FrozenPandaz · 2022-12-01T22:01:35Z

packages/react/src/generators/init/init.ts

@@ -66,22 +67,54 @@ function updateDependencies(host: Tree, schema: InitSchema) {
  });
 }

+function initRootBabelConfig(tree: Tree, schema: InitSchema) {


What happened here? @mandarini just made a shared one in @nrwl/js

I don't see it in master, can be addresses later.

FrozenPandaz · 2022-12-01T22:04:19Z

packages/webpack/src/generators/init/init.ts

+      {
+        '@pmmmwh/react-refresh-webpack-plugin':
+          reactRefreshWebpackPluginVersion,
+        '@phenomnomnominal/tsquery': tsQueryVersion,


Why is this related to webpack?

FrozenPandaz · 2022-12-01T22:04:34Z

packages/webpack/src/utils/versions.ts

+
+// React apps
+export const reactRefreshWebpackPluginVersion = '^0.5.7';
+export const tsQueryVersion = '4.1.1';


Why is this related to webpack?

virtuoushub · 2022-12-07T07:38:05Z

I am seeing some odd behavior in 15.3.0 and I am pretty sure it is related to these changes.

after upgrading, I needed to add the following modules in order to get npx nx affected --target=test --parallel=3 --ci --code-coverage and npx nx affected --target=build --parallel=3 to work like in 15.2.4:

@babel/preset-react
@pmmmwh/react-refresh-webpack-plugin
@svgr/webpack
url-loader
( maybe react-refresh ? )

I will file a bug report later; just wanted to give a quick heads up in case it helps.

ViktorPontinen · 2022-12-07T16:07:40Z

I am seeing some odd behavior in 15.3.0 and I am pretty sure it is related to these changes.

after upgrading, I needed to add the following modules in order to get npx nx affected --target=test --parallel=3 --ci --code-coverage and npx nx affected --target=build --parallel=3 to work like in 15.2.4:

@babel/preset-react

@pmmmwh/react-refresh-webpack-plugin

@svgr/webpack

url-loader

( maybe react-refresh ? )

I will file a bug report later; just wanted to give a quick heads up in case it helps.

Also noticed issues and had to add react-refresh as a separate dependency.
Not sure how common our setup is tho so might not affect many.
We run react-scripts (CRA(v5)) via craco (v7) using nx:run-commands with cwd inside each application.

enchorb · 2022-12-08T00:44:05Z

Same issue here had to yarn add -D react-refresh & yarn add -D @pmmmwh/react-refresh-webpack-plugin. @FrozenPandaz will this be needed going forward, or a regression that will be reverted in a later version?

github-actions · 2023-03-16T18:05:15Z

This pull request has already been merged/closed. If you experience issues related to these changes, please open a new issue referencing this pull request.

vercel bot deployed to Preview November 30, 2022 23:49 View deployment

jaysoo force-pushed the feat/cleanup-react-deps branch from c92f1db to ca12017 Compare November 30, 2022 23:49

vercel bot deployed to Preview November 30, 2022 23:52 View deployment

jaysoo force-pushed the feat/cleanup-react-deps branch from ca12017 to 7a2a9b7 Compare December 1, 2022 01:52

vercel bot deployed to Preview December 1, 2022 01:56 View deployment

jaysoo force-pushed the feat/cleanup-react-deps branch from 7a2a9b7 to 8c18195 Compare December 1, 2022 02:06

vercel bot deployed to Preview December 1, 2022 02:10 View deployment

jaysoo requested a review from vsavkin December 1, 2022 02:33

jaysoo force-pushed the feat/cleanup-react-deps branch from 8c18195 to b59f9c1 Compare December 1, 2022 04:46

vercel bot deployed to Preview December 1, 2022 04:50 View deployment

jaysoo force-pushed the feat/cleanup-react-deps branch from b59f9c1 to caf1afa Compare December 1, 2022 13:37

vercel bot deployed to Preview December 1, 2022 13:40 View deployment

jaysoo force-pushed the feat/cleanup-react-deps branch from caf1afa to 6943ee0 Compare December 1, 2022 13:50

vercel bot deployed to Preview December 1, 2022 13:52 View deployment

jaysoo force-pushed the feat/cleanup-react-deps branch from 6943ee0 to 40fec3e Compare December 1, 2022 13:59

vercel bot deployed to Preview December 1, 2022 14:03 View deployment

jaysoo force-pushed the feat/cleanup-react-deps branch from 40fec3e to 6d9c86d Compare December 1, 2022 14:13

vercel bot deployed to Preview December 1, 2022 14:22 View deployment

vsavkin approved these changes Dec 1, 2022

View reviewed changes

packages/devkit/src/utils/package-json.ts Outdated Show resolved Hide resolved

packages/devkit/src/utils/package-json.ts Outdated Show resolved Hide resolved

packages/devkit/src/utils/package-json.ts Outdated Show resolved Hide resolved

jaysoo force-pushed the feat/cleanup-react-deps branch from 6d9c86d to 9f51314 Compare December 1, 2022 14:46

vercel bot deployed to Preview December 1, 2022 14:51 View deployment

jaysoo force-pushed the feat/cleanup-react-deps branch from 9f51314 to 0fc9031 Compare December 1, 2022 15:15

vercel bot deployed to Preview December 1, 2022 15:18 View deployment

jaysoo marked this pull request as ready for review December 1, 2022 15:54

jaysoo force-pushed the feat/cleanup-react-deps branch from 0fc9031 to 80913b7 Compare December 1, 2022 15:55

vercel bot deployed to Preview December 1, 2022 15:58 View deployment

jaysoo force-pushed the feat/cleanup-react-deps branch from 80913b7 to 258dc7b Compare December 1, 2022 16:37

vercel bot deployed to Preview December 1, 2022 16:46 View deployment

vercel bot deployed to Preview December 1, 2022 19:39 View deployment

jaysoo force-pushed the feat/cleanup-react-deps branch from 1b186cf to 2fb2466 Compare December 1, 2022 19:43

vercel bot deployed to Preview December 1, 2022 19:46 View deployment

FrozenPandaz requested changes Dec 1, 2022

View reviewed changes

docs/generated/devkit/index.md Outdated Show resolved Hide resolved

FrozenPandaz requested changes Dec 1, 2022

View reviewed changes

lerna.json Outdated Show resolved Hide resolved

packages/devkit/index.ts Outdated Show resolved Hide resolved

packages/esbuild/src/executors/esbuild/esbuild.impl.ts Outdated Show resolved Hide resolved

jaysoo force-pushed the feat/cleanup-react-deps branch from 2fb2466 to 7555360 Compare December 1, 2022 20:50

vercel bot deployed to Preview December 1, 2022 20:53 View deployment

jaysoo force-pushed the feat/cleanup-react-deps branch from 7555360 to 3dc0c58 Compare December 1, 2022 20:56

FrozenPandaz assigned jaysoo Dec 1, 2022

vercel bot deployed to Preview December 1, 2022 20:58 View deployment

jaysoo force-pushed the feat/cleanup-react-deps branch from 3dc0c58 to 919ff13 Compare December 1, 2022 21:08

vercel bot deployed to Preview December 1, 2022 21:11 View deployment

feat(react): remove unnecessary dependencies from @nrwl/react

53813a2

- If Vite is used, then Webpack and Jest are not needed - If e2e is not used, then Cypress is not needed - Trims down on the amount of packages that are downloaded

jaysoo force-pushed the feat/cleanup-react-deps branch from 919ff13 to 53813a2 Compare December 1, 2022 21:14

vercel bot deployed to Preview December 1, 2022 21:18 View deployment

jaysoo requested a review from FrozenPandaz December 1, 2022 21:32

jaysoo enabled auto-merge (squash) December 1, 2022 21:49

vsavkin disabled auto-merge December 1, 2022 21:51

vsavkin enabled auto-merge (rebase) December 1, 2022 21:51

vsavkin disabled auto-merge December 1, 2022 21:54

FrozenPandaz approved these changes Dec 1, 2022

View reviewed changes

FrozenPandaz merged commit cded83b into nrwl:master Dec 1, 2022

mandarini mentioned this pull request Dec 2, 2022

cleanup(misc): remove storybook dependency from other packages #13571

Merged

enchorb mentioned this pull request Dec 12, 2022

React App Fails To Build 15.3.0 #13764

Closed

github-actions bot locked as resolved and limited conversation to collaborators Mar 16, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(react): remove unnecessary dependencies from @nrwl/react #13525

feat(react): remove unnecessary dependencies from @nrwl/react #13525

jaysoo commented Nov 30, 2022 •

edited

Loading

nx-cloud-staging bot commented Nov 30, 2022 •

edited

Loading

vercel bot commented Nov 30, 2022 •

edited

Loading

nx-cloud bot commented Dec 1, 2022 •

edited

Loading

FrozenPandaz Dec 1, 2022

FrozenPandaz Dec 1, 2022

FrozenPandaz Dec 1, 2022

FrozenPandaz Dec 1, 2022

jaysoo Dec 1, 2022

FrozenPandaz Dec 1, 2022

FrozenPandaz Dec 1, 2022

virtuoushub commented Dec 7, 2022 •

edited

Loading

ViktorPontinen commented Dec 7, 2022

enchorb commented Dec 8, 2022 •

edited

Loading

github-actions bot commented Mar 16, 2023

feat(react): remove unnecessary dependencies from @nrwl/react #13525

feat(react): remove unnecessary dependencies from @nrwl/react #13525

Conversation

jaysoo commented Nov 30, 2022 • edited Loading

Technical details

Results / Comparisons

Other notes

nx-cloud-staging bot commented Nov 30, 2022 • edited Loading

Nx Cloud Report

vercel bot commented Nov 30, 2022 • edited Loading

nx-cloud bot commented Dec 1, 2022 • edited Loading

☁️ Nx Cloud Report

FrozenPandaz Dec 1, 2022

Choose a reason for hiding this comment

FrozenPandaz Dec 1, 2022

Choose a reason for hiding this comment

FrozenPandaz Dec 1, 2022

Choose a reason for hiding this comment

FrozenPandaz Dec 1, 2022

Choose a reason for hiding this comment

jaysoo Dec 1, 2022

Choose a reason for hiding this comment

FrozenPandaz Dec 1, 2022

Choose a reason for hiding this comment

FrozenPandaz Dec 1, 2022

Choose a reason for hiding this comment

virtuoushub commented Dec 7, 2022 • edited Loading

ViktorPontinen commented Dec 7, 2022

enchorb commented Dec 8, 2022 • edited Loading

github-actions bot commented Mar 16, 2023

jaysoo commented Nov 30, 2022 •

edited

Loading

nx-cloud-staging bot commented Nov 30, 2022 •

edited

Loading

vercel bot commented Nov 30, 2022 •

edited

Loading

nx-cloud bot commented Dec 1, 2022 •

edited

Loading

virtuoushub commented Dec 7, 2022 •

edited

Loading

enchorb commented Dec 8, 2022 •

edited

Loading