Error when building next.js app with tRPC

vendramini commented 1 year ago

Current Behavior

I have a nx repo with 4 projects within:

apps/web (NextJS).
apps/native (Expo).
libs/ui (shared components between web and native - I'm using react-native-web).
libs/business specifics algorithms related to my business (also shared by native and web).

I would like to use tRPC (trpc.io) with NextJS to handle my api.

If I create an isolated NextJS project and add tRPC to it, everything works as expected. If I try to add tRPC on my nx repository, the NextJS compilation fails with this:

- info Compiled successfully
- info Collecting page data
  [    ] - info Generating static pages (0/5)TypeError: Cannot read properties of null (reading 'useMemo')
at exports.useMemo (/home/andrevendramini/www/testing-project/app/node_modules/react/cjs/react.production.min.js:25:208)
at Object.useDehydratedState (file:///home/andrevendramini/www/testing-project/app/node_modules/@trpc/react-query/dist/createHooksInternal-a6562110.mjs:531:29)
at WithTRPC (/home/andrevendramini/www/testing-project/app/dist/apps/web/.next/server/chunks/435.js:69:40)
at Ge (/home/andrevendramini/www/testing-project/app/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:114:273)
at Z (/home/andrevendramini/www/testing-project/app/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:120:91)
at Ge (/home/andrevendramini/www/testing-project/app/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:115:9)
at Z (/home/andrevendramini/www/testing-project/app/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:120:91)
at He (/home/andrevendramini/www/testing-project/app/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:123:155)
at Je (/home/andrevendramini/www/testing-project/app/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:122:100)
at Z (/home/andrevendramini/www/testing-project/app/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:120:222)

Indeed, in tRPC's github page, there is an issue about it: https://github.com/trpc/trpc/issues/4316 however, it's related to NextJS 13.4.0 - and it has already been solved.

It's been really hard to figure out what is happening, because I have no clue. I ended up here: https://react.dev/warnings/invalid-hook-call-warning I do have only one version of react running, and my yarn why react is:

└─ @app/source@workspace:.
   └─ react@npm:18.2.0 (via npm:18.2.0)

Expected Behavior

Compile NextJS with tRPC normally.

GitHub Repo

No response

Steps to Reproduce

Create @nx/expo app.
Create @nx/next app.
Setup NextJS app with tRPC.
Can't compile.

Nx Report

>  NX   Report complete - copy this into the issue template

   Node   : 19.8.1
   OS     : linux x64
   yarn   : 3.5.1
   Hasher : Native

   nx (global)        : 16.2.1
   nx                 : 16.2.2
   @nx/js             : 16.2.2
   @nx/jest           : 16.2.2
   @nx/linter         : 16.2.2
   @nx/workspace      : 16.2.2
   @nx/cypress        : 16.2.2
   @nx/detox          : 16.2.2
   @nx/devkit         : 16.2.2
   @nx/eslint-plugin  : 16.2.2
   @nx/expo           : 16.3.2
   @nx/next           : 16.2.2
   @nx/react          : 16.2.2
   @nx/react-native   : 16.3.2
   @nrwl/tao          : 16.2.2
   @nx/web            : 16.2.2
   @nx/webpack        : 16.3.2
   nx-cloud           : 16.0.5
   typescript         : 5.0.4
   ---------------------------------------
   The following packages should match the installed version of nx
     - @nx/expo@16.3.2
     - @nrwl/expo@16.3.2
     - @nx/react-native@16.3.2
     - @nrwl/react-native@16.3.2
     - @nx/webpack@16.3.2
     - @nrwl/webpack@16.3.2

   To fix this, run `nx migrate nx@16.3.2`

Failure Logs

No response

Operating System

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

Additional Information

I will create a reproduce-able repo tomorrow and update here with the link.

BTW: it's not possible to update nx. Both yarn nx migrate and nx migrate gives errors (I'll investigate this one later):

yarn nx migrate
/bin/sh: 1: /tmp/tmp-25706-gaLqhrhJaO1k/node_modules/.bin/nx: not found
Command failed: /tmp/tmp-25706-gaLqhrhJaO1k/node_modules/.bin/nx _migrate

nx migrate
/bin/sh: 1: /tmp/tmp-25781-T8h5ReWoZF6M/node_modules/.bin/nx: not found
Command failed: /tmp/tmp-25781-T8h5ReWoZF6M/node_modules/.bin/nx _migrate

vendramini commented 1 year ago

While I was creating the reproduceable repo I was able to compile it. I don't know why, I have no clue. I just created a new nx workspace, added a Expo project, added a NextJS project, added tRPC, and I was slowly adding all modules and components my previous project have. For each change I made, I compiled (with tRPC) to check if it was working. Now I have my full project compiling.

I'll close this issue but my original project still not compiling.

github-actions[bot] commented 1 year 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