React Compiler / React 19 #566

tordans · 2024-05-24T12:01:01Z

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:

> [email protected] 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

The text was updated successfully, but these errors were encountered:

franky47 · 2024-05-24T12:03:31Z

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?

tordans · 2024-05-24T12:27:50Z

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').

saqib0335 · 2024-05-29T07:45:07Z

if any one is still working on this

tordans · 2024-05-29T14:02:22Z

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

tordans · 2024-06-19T11:06:29Z

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

franky47 · 2024-06-19T11:48:52Z

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?

tordans · 2024-06-19T15:46:40Z

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.

franky47 · 2024-06-27T21:07:33Z

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).

tylersayshi · 2024-06-27T21:19:18Z

@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. :)

franky47 · 2024-06-27T21:34:11Z

I've published a snapshot release of the v2 branch at [email protected], if you want to give it a try.

tylersayshi · 2024-06-27T22:51:01Z

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!

tordans · 2024-07-01T10:37:30Z

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!

franky47 · 2024-07-01T10:48:45Z

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.

tordans added the bug Something isn't working label May 24, 2024

tordans mentioned this issue May 24, 2024

React Compiler / React 19 FixMyBerlin/atlas-app#111

Draft

4 tasks

This was referenced Jun 27, 2024

fix: next/router causes issue with react compiler #581

Closed

chore: Setup eslint for packages/nuqs #582

Closed

tordans closed this as completed Jul 1, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React Compiler / React 19 #566

React Compiler / React 19 #566

tordans commented May 24, 2024

franky47 commented May 24, 2024

tordans commented May 24, 2024 •

edited

Loading

saqib0335 commented May 29, 2024

tordans commented May 29, 2024

tordans commented Jun 19, 2024

franky47 commented Jun 19, 2024 •

edited

Loading

tordans commented Jun 19, 2024

franky47 commented Jun 27, 2024 •

edited

Loading

tylersayshi commented Jun 27, 2024

franky47 commented Jun 27, 2024 •

edited

Loading

tylersayshi commented Jun 27, 2024

tordans commented Jul 1, 2024 •

edited

Loading

franky47 commented Jul 1, 2024

React Compiler / React 19 #566

React Compiler / React 19 #566

Comments

tordans commented May 24, 2024

franky47 commented May 24, 2024

tordans commented May 24, 2024 • edited Loading

saqib0335 commented May 29, 2024

tordans commented May 29, 2024

tordans commented Jun 19, 2024

Part 1

Part 2

franky47 commented Jun 19, 2024 • edited Loading

tordans commented Jun 19, 2024

franky47 commented Jun 27, 2024 • edited Loading

tylersayshi commented Jun 27, 2024

franky47 commented Jun 27, 2024 • edited Loading

tylersayshi commented Jun 27, 2024

tordans commented Jul 1, 2024 • edited Loading

franky47 commented Jul 1, 2024

tordans commented May 24, 2024 •

edited

Loading

franky47 commented Jun 19, 2024 •

edited

Loading

franky47 commented Jun 27, 2024 •

edited

Loading

franky47 commented Jun 27, 2024 •

edited

Loading

tordans commented Jul 1, 2024 •

edited

Loading