React Compiler / React 19

Question

React Compiler / React 19

tordans opened this issue 6 months ago · 13 comments

I was experimenting with getting our app FixMyBerlin/atlas-app#111 build with the preview of the React Compiler.

When I run npm run build I get a few errors that mention nuqs:

> atlas-app@0.2.0 build
> blitz build

Loaded env from /Users/fmc/Development/atlas-app/.env.production.local
Loaded env from /Users/fmc/Development/atlas-app/.env
✔ Next.js was successfully patched with a React Suspense fix
✔ Routes manifest was successfully generated
  ▲ Next.js 14.3.0-canary.80
  - Environments: .env.production.local, .env
  - Experiments (use with caution):
    · typedRoutes
    · reactCompiler
    · instrumentationHook

   Creating an optimized production build ...
Failed to compile.

./node_modules/nuqs/dist/index.js
Attempted import error: 'useRouter' is not exported from 'next/navigation.js' (imported as 'useRouter').

Import trace for requested module:
./node_modules/nuqs/dist/index.js
./src/app/regionen/[regionSlug]/_hooks/useQueryState/useMapParam.ts
./src/app/regionen/[regionSlug]/_hooks/useQueryState/useCategoriesConfig/migrations/0001_from_middleware.ts
./src/app/regionen/[regionSlug]/_hooks/useQueryState/useCategoriesConfig/migrations/index.ts
./src/app/regionen/[regionSlug]/_hooks/useQueryState/useCategoriesConfig/migrateUrl.ts

./node_modules/nuqs/dist/index.js
Attempted import error: 'useSearchParams' is not exported from 'next/navigation.js' (imported as 'useSearchParams').

Import trace for requested module:
./node_modules/nuqs/dist/index.js
./src/app/regionen/[regionSlug]/_hooks/useQueryState/useMapParam.ts
./src/app/regionen/[regionSlug]/_hooks/useQueryState/useCategoriesConfig/migrations/0001_from_middleware.ts
./src/app/regionen/[regionSlug]/_hooks/useQueryState/useCategoriesConfig/migrations/index.ts
./src/app/regionen/[regionSlug]/_hooks/useQueryState/useCategoriesConfig/migrateUrl.ts

./node_modules/nuqs/dist/index.js
Attempted import error: 'useRouter' is not exported from 'next/navigation.js' (imported as 'useRouter').

Import trace for requested module:
./node_modules/nuqs/dist/index.js
./src/app/regionen/[regionSlug]/_hooks/useQueryState/useMapParam.ts
./src/app/regionen/[regionSlug]/_hooks/useQueryState/useCategoriesConfig/migrations/0001_from_middleware.ts
./src/app/regionen/[regionSlug]/_hooks/useQueryState/useCategoriesConfig/migrations/index.ts
./src/app/regionen/[regionSlug]/_hooks/useQueryState/useCategoriesConfig/migrateUrl.ts

./node_modules/nuqs/dist/index.js
Attempted import error: 'useSearchParams' is not exported from 'next/navigation.js' (imported as 'useSearchParams').

Import trace for requested module:
./node_modules/nuqs/dist/index.js
./src/app/regionen/[regionSlug]/_hooks/useQueryState/useMapParam.ts
./src/app/regionen/[regionSlug]/_hooks/useQueryState/useCategoriesConfig/migrations/0001_from_middleware.ts
./src/app/regionen/[regionSlug]/_hooks/useQueryState/useCategoriesConfig/migrations/index.ts
./src/app/regionen/[regionSlug]/_hooks/useQueryState/useCategoriesConfig/migrateUrl.ts


> Build failed because of webpack errors

Answer 1 · 2024-05-24T12:03:31.000Z

Thanks for testing the bleeding edge!

I wonder if this is due to the .js extension in the import of next/navigation.js.

If you dig into the nuqs files in your node_modules and remove the extension, does it compile successfully?

Answer 2 · 2024-05-24T12:27:50.000Z

Thanks for testing the bleeding edge!

I have high hopes that I will not need to learn how to properly memoize components, now … :-D

I wonder if this is due to the .js extension in the import of next/navigation.js.
If you dig into the nuqs files in your node_modules and remove the extension, does it compile successfully?

This is what helped…
It still does not build, bot now it fails with headlessUI :-).

Change the import to import { useRouter, useSearchParams } from 'next/dist/client/components/navigation.js';
rm -rf .next/ – without that, the build uses a version of the page from there apparently…
npm run build

The other files node_modules/next/navigation.js only contains module.exports = require('./dist/client/components/navigation').

Answer 3 · 2024-05-29T07:45:07.000Z

if any one is still working on this

Answer 4 · 2024-05-29T14:02:22.000Z

An update:

The headless UI issue was fixed just now
The RC packages had updates
I updated all this and tried to run the app…
(The components/navigation.js workaround is still in place in this test; but I did not check this .next folder, just the file in node_modules)

a. npm run build shows new errors

   Creating an optimized production build ...
Failed to compile.

./node_modules/next/dist/esm/shared/lib/app-router-context.shared-runtime.js
Module not found: Can't resolve 'private-next-rsc-mod-ref-proxy'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/next/dist/esm/client/components/navigation.js
./node_modules/nuqs/dist/index.js
./src/app/regionen/[regionSlug]/_hooks/useQueryState/useMapParam.ts
./src/app/regionen/[regionSlug]/_hooks/useQueryState/useCategoriesConfig/migrations/0001_from_middleware.ts
./src/app/regionen/[regionSlug]/_hooks/useQueryState/useCategoriesConfig/migrations/index.ts
./src/app/regionen/[regionSlug]/_hooks/useQueryState/useCategoriesConfig/migrateUrl.ts
./src/middleware.ts

./node_modules/next/dist/esm/shared/lib/hooks-client-context.shared-runtime.js
Module not found: Can't resolve 'private-next-rsc-mod-ref-proxy'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/next/dist/esm/client/components/navigation.js
./node_modules/nuqs/dist/index.js
./src/app/regionen/[regionSlug]/_hooks/useQueryState/useMapParam.ts
./src/app/regionen/[regionSlug]/_hooks/useQueryState/useCategoriesConfig/migrations/0001_from_middleware.ts
./src/app/regionen/[regionSlug]/_hooks/useQueryState/useCategoriesConfig/migrations/index.ts
./src/app/regionen/[regionSlug]/_hooks/useQueryState/useCategoriesConfig/migrateUrl.ts
./src/middleware.ts

./node_modules/next/dist/esm/shared/lib/server-inserted-html.shared-runtime.js
Module not found: Can't resolve 'private-next-rsc-mod-ref-proxy'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/next/dist/esm/client/components/navigation.js
./node_modules/nuqs/dist/index.js
./src/app/regionen/[regionSlug]/_hooks/useQueryState/useMapParam.ts
./src/app/regionen/[regionSlug]/_hooks/useQueryState/useCategoriesConfig/migrations/0001_from_middleware.ts
./src/app/regionen/[regionSlug]/_hooks/useQueryState/useCategoriesConfig/migrations/index.ts
./src/app/regionen/[regionSlug]/_hooks/useQueryState/useCategoriesConfig/migrateUrl.ts
./src/middleware.ts

./src/app/regionen/[regionSlug]/_components/regionUtils/useStaticRegion.ts
Module not found: Can't resolve 'private-next-rsc-mod-ref-proxy'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./src/app/regionen/[regionSlug]/_hooks/useQueryState/useMapParam.ts
./src/app/regionen/[regionSlug]/_hooks/useQueryState/useCategoriesConfig/migrations/0001_from_middleware.ts
./src/app/regionen/[regionSlug]/_hooks/useQueryState/useCategoriesConfig/migrations/index.ts
./src/app/regionen/[regionSlug]/_hooks/useQueryState/useCategoriesConfig/migrateUrl.ts
./src/middleware.ts


> Build failed because of webpack errors

Running the app shows this error in the fronented:

Build Error
Next.js (14.3.0-canary.87)
Failed to compile

./node_modules/next/dist/esm/shared/lib/app-router-context.shared-runtime.js
Module not found: Can't resolve 'private-next-rsc-mod-ref-proxy'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/next/dist/esm/client/components/navigation.js
./node_modules/nuqs/dist/index.js
./src/app/regionen/[regionSlug]/_hooks/useQueryState/useMapParam.ts
./src/app/regionen/[regionSlug]/_hooks/useQueryState/useCategoriesConfig/migrations/0001_from_middleware.ts
./src/app/regionen/[regionSlug]/_hooks/useQueryState/useCategoriesConfig/migrations/index.ts
./src/app/regionen/[regionSlug]/_hooks/useQueryState/useCategoriesConfig/migrateUrl.ts
./src/middleware.ts

Answer 5 · 2024-06-19T11:06:29.000Z

An update:

I tried again today with the latest packages (npm install next@canary babel-plugin-react-compiler@latest react@rc react-dom@rc types-react@rc types-react-dom@rc nuqs@latest @headlessui/react@insiders).

Part 1

The build still fails with the error from before:

npm run build

   Creating an optimized production build ...
Failed to compile.

./node_modules/nuqs/dist/index.js
Attempted import error: 'useRouter' is not exported from 'next/navigation.js' (imported as 'useRouter').

Import trace for requested module:
./node_modules/nuqs/dist/index.js
./src/app/regionen/[regionSlug]/_hooks/useQueryState/useMapParam.ts

npm run dev

 ○ Compiling /src/middleware ...
 ⨯ ./node_modules/nuqs/dist/index.js
Attempted import error: 'useRouter' is not exported from 'next/navigation.js' (imported as 'useRouter').

Import trace for requested module:
./node_modules/nuqs/dist/index.js
./src/app/regionen/[regionSlug]/_hooks/useQueryState/useMapParam.ts

Part 2

I reapplied the hack from #566 (comment) and now the build finishes with the following warning. Same for npm run dev.

I can run the app now, and nuqs updates the URL as expected.

   Creating an optimized production build ...
[BABEL] Note: The code generator has deoptimised the styling of /Users/fmc/Development/atlas-app/node_modules/maplibre-gl/dist/maplibre-gl.js as it exceeds the max of 500KB.
 ⚠ Compiled with warnings

./node_modules/next/dist/esm/client/components/navigation.js
Attempted import error: 'useContext' is not exported from 'react' (imported as 'useContext').

Import trace for requested module:
./node_modules/next/dist/esm/client/components/navigation.js
./node_modules/nuqs/dist/index.js
./src/app/regionen/[regionSlug]/_hooks/useQueryState/useMapParam.ts

Answer 6 · 2024-06-19T11:48:52.000Z

Thanks for the feedback!

./node_modules/next/dist/esm/client/components/navigation.js
Attempted import error: 'useContext' is not exported from 'react' (imported as 'useContext').

Import trace for requested module:
./node_modules/next/dist/esm/client/components/navigation.js
./node_modules/nuqs/dist/index.js
./src/app/regionen/[regionSlug]/_hooks/useQueryState/useMapParam.ts

This part is interesting, it looks like there are client imports leaking on the server (where Context isn't available). If useMapParam.ts is for server-side code, are you using an import from nuqs/server?

Answer 7 · 2024-06-19T15:46:40.000Z

This part is interesting, it looks like there are client imports leaking on the server (where Context isn't available). If useMapParam.ts is for server-side code, are you using an import from nuqs/server?

No, all imports are from nuqs. We are not using any of the newer features, yet.

Answer 8 · 2024-06-27T21:07:33.000Z

I added a test case that uses the React Compiler on the v2 branch, and which passed with the latest Next.js canary (15.0.0-canary.46).

Based on what @tordans and @tylerlaws0n reported, it looks like the behaviour could be app-specific. If y'all could get a minimal page to fail with your respective setups, I could try and add that to the e2e test bench, and find the root cause(s).

Answer 9 · 2024-06-27T21:19:18.000Z

@franky47 I noted this in closing my PR, but to update this thread as well: I built the v2 release locally and the errors I were seeing similar to this thread and the NextRouter not being found seem to be resolved.

I'll be sure to follow up if I see similar issues after testing v2 more. :)

Answer 10 · 2024-06-27T21:34:11.000Z

I've published a snapshot release of the v2 branch at nuqs@2.0.0-snapshot.2024-06-27.47926d24, if you want to give it a try.

Answer 11 · 2024-06-27T22:51:01.000Z

As far as I can tell so far this is working for me! I have come across new issues that are mentioned here: vercel/next.js#66766, so I can't confirm that my build step will work fully until that is resolved, but for now this changeset for nuqs v2 seems great!

Answer 12 · 2024-07-01T10:37:30.000Z

I updated our app to nuqs 2 and the latest packages and it does work now.

I still had the issue that I wrote about above, but it turns out that was because something changed and we now cannot import a const into a server code (middleware) from the same file that is also using useQueryState. Once I moved the const to a separate file, the error went away. (This is the commit.)

I am now seeing other issues with React 19 but those have nothing to do with nuqs.

I think we can close this now. Thanks for the help!

Answer 13 · 2024-07-01T10:48:45.000Z

Wow that const thing is wild, you might want to escalate the issue in the Next.js repo.

Thanks for the follow-up! The V2 branch will be merged and released once Next.js 15 is out.