React Compiler / React 19
Opened this issue · 11 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
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?
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')
.
if any one is still working on this
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…
(Thecomponents/navigation.js
workaround is still in place in this test; but I did not check this.next
folder, just the file innode_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
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
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
?
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 fromnuqs/server
?
No, all imports are from nuqs
. We are not using any of the newer features, yet.
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).
@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. :)
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.
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!