Differences when running yarn command vs nx command for standalone package (Too many rerenders)

Crizzooo commented 9 months ago

Current Behavior

The steps I took on my own codebase:

Set up an integrated NX monorepo
Set up a next app using the default nx plugins
Initiate a shopify app with `yarn create @shopify/app" 4.. Move the folder to the apps workspace, set it as a workspace in yarn
Run yarn workspace shopifyApp run dev, it works
Run nx dev shopifyApp, it fails

See steps to reproduce for how to repro on example app, or see the attached repo. See verbose log for failure logs.

Expected Behavior

yarn workspace version of the same NX command should both work as expected.

GitHub Repo

https://github.com/Crizzooo/nx-examples-shopify-issue

Steps to Reproduce

Clone nx-examples repo
Run yarn create @shopify/app, name it example-app, select Remix and typescript
Move example-app into apps, add it as a workspace to the project root package.json
Verify yarn workspace example-app run dev works as expected
Run nx dev example-app, see failure logs.

Nx Report

>  NX   Report complete - copy this into the issue template

   Node   : 20.11.0
   OS     : linux-x64
   yarn   : 1.22.17

   nx (global)        : 17.2.0
   nx                 : 17.2.0-beta.15
   @nx/js             : 17.2.0-beta.15
   @nx/jest           : 17.2.0-beta.15
   @nx/linter         : 17.2.0-beta.15
   @nx/eslint         : 17.2.0-beta.15
   @nx/workspace      : 17.2.0-beta.15
   @nx/angular        : 17.2.0-beta.15
   @nx/cypress        : 17.2.0-beta.15
   @nx/devkit         : 17.2.0-beta.15
   @nx/eslint-plugin  : 17.2.0-beta.15
   @nx/react          : 17.2.0-beta.15
   @nrwl/tao          : 17.2.0-beta.15
   @nx/web            : 17.2.0-beta.15
   @nx/webpack        : 17.2.0-beta.15
   typescript         : 5.2.2
   ---------------------------------------
   Community plugins:
   @ngrx/component-store : 17.0.1
   @ngrx/effects         : 17.0.1
   @ngrx/entity          : 17.0.1
   @ngrx/router-store    : 17.0.1
   @ngrx/store           : 17.0.1
   @ngrx/store-devtools  : 17.0.1

Failure Logs

nx dev example-app

> nx run example-app:dev

yarn run v1.22.21
$ prisma generate && prisma migrate deploy
Prisma schema loaded from prisma/schema.prisma
✔ Generated Prisma Client (4.16.2 | library) to ./../../node_modules/@prisma/client in 49ms
You can now start using Prisma Client in your code. Reference: https://pris.ly/d/client

import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()

Prisma schema loaded from prisma/schema.prisma
Datasource "db": SQLite database "dev.sqlite" at "file:dev.sqlite"
1 migration found in prisma/migrations
No pending migrations to apply.
$ shopify app dev

Before proceeding, your project needs to be associated with an app.
  ERROR  Too many re-renders. React limits the number of renders to prevent an
        infinite loop.
 /home/crizzo/dev/nx-examples-shopify/node_modules/react-reconciler/cjs/react-r
 econciler.development.js:7490:15
 7487:       localIdCounter = 0;
 7488:
 7489:       if (numberOfReRenders >= RE_RENDER_LIMIT) {
 7490         throw new Error('Too many re-renders. React limits the number of 
 :   renders to prevent ' + 'an infinite loop.');
 7491:       }
 7492:
 7493:       numberOfReRenders += 1;
 -renderWithHo (/home/crizzo/dev/nx-examples-shopify/node_modules/react-reconci
  ks          ler/cjs/react-reconciler.development.js:7490:15)
 -updateForward (/home/crizzo/dev/nx-examples-shopify/node_modules/react-reconc
  Ref          iler/cjs/react-reconciler.development.js:10399:20)
 -beginWor (/home/crizzo/dev/nx-examples-shopify/node_modules/react-reconciler/
          cjs/react-reconciler.development.js:12809:16)
 -beginWork$ (/home/crizzo/dev/nx-examples-shopify/node_modules/react-reconcile
            r/cjs/react-reconciler.development.js:19569:14)
 -performUnitOfW (/home/crizzo/dev/nx-examples-shopify/node_modules/react-recon
  rk            ciler/cjs/react-reconciler.development.js:18703:12)
 -workLoopSy (/home/crizzo/dev/nx-examples-shopify/node_modules/react-reconcile
  c         r/cjs/react-reconciler.development.js:18609:5)
 -renderRootSy (/home/crizzo/dev/nx-examples-shopify/node_modules/react-reconci
  c           ler/cjs/react-reconciler.development.js:18577:7)
 -performSyncWorkO (/home/crizzo/dev/nx-examples-shopify/node_modules/react-rec
  Root            onciler/cjs/react-reconciler.development.js:18193:20)
 -flushSyncCallb (/home/crizzo/dev/nx-examples-shopify/node_modules/react-recon
  cks           ciler/cjs/react-reconciler.development.js:2936:22)
 -flushSyncCallbacksOnlyI (/home/crizzo/dev/nx-examples-shopify/node_modules/re
  LegacyMode             act-reconciler/cjs/react-reconciler.development.js:291
                         5:5)

Package Manager Version

No response

Operating System

[ ] macOS
[ ] Linux
[ ] Windows
[X] Other (Please specify)

Additional Information

WSL 2

Crizzooo commented 9 months ago

🤒

I must have initially installed nx in npm, so the nx commands were not respecting yarn workspaces.

After deleting and reinstalling to yarn, both nx and yarn versions of above commands work as expected.

Sorry NX team!

github-actions[bot] commented 8 months ago

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.

nrwl / nx