search

47ng / nuqs

Type-safe search params state manager for Next.js - Like React.useState, but stored in the URL query string.
https://nuqs.47ng.com
MIT License
3.41k stars 68 forks source link

React Compiler / React 19 #566

Closed tordans closed 2 months ago

tordans commented 4 months ago

I was experimenting with getting our app https://github.com/FixMyBerlin/atlas-app/pull/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
franky47 commented 4 months ago

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 commented 4 months ago

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

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

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

saqib0335 commented 4 months ago

if any one is still working on this

tordans commented 4 months ago

An update:

  1. The headless UI issue was fixed just now
  2. The RC packages had updates
  3. 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 commented 3 months ago

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 https://github.com/47ng/nuqs/issues/566#issuecomment-2129416239 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 commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

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

tylerlaws0n commented 3 months ago

@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 commented 3 months ago

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.

tylerlaws0n commented 3 months ago

As far as I can tell so far this is working for me! I have come across new issues that are mentioned here: https://github.com/vercel/next.js/discussions/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 commented 2 months ago

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 commented 2 months ago

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.