Open AlejandroYanes opened 9 months ago
Also facing this same issue.
Facing the issue as well during runtime.
import { useParams, usePathname, useSearchParams } from "next/navigation.js";
^^^^^^^^^
SyntaxError: Named export 'useParams' not found. The requested module 'next/navigation.js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:
import pkg from 'next/navigation.js';
const { useParams, usePathname, useSearchParams } = pkg;
at ModuleJob._instantiate (node:internal/modules/esm/module_job:128:21)
at async ModuleJob.run (node:internal/modules/esm/module_job:194:5)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:385:24)
at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15) {
page: '/sso/[...slug]'
}
+1
I think it has to do with this file. I tried doing the import the same way on one of my components and it works fine but if I add the <SpeedInsights />
component to the _app.tsx
then my own component's import also fails
I have a similar issue when adding <SpeedInsights />
to _app.tsx
but only for specific pages, also getting some hydration errors on other pages.
Error: Cannot find module 'next/dist/server/future/route-modules/pages/vendored/contexts/app-router-context'
This problem hasn't still been fixed ...
+1
Hey all!
I just tried to reproduce with Next.js 14.0.4 & pages router and with & without turbo and couldn't reproduce this.
Can someone please create us a minimal reproduction repository to further dig into this?
Thanks!
Hey all!
I just tried to reproduce with Next.js 14.0.4 & pages router and with & without turbo and couldn't reproduce this.
Can someone please create us a minimal reproduction repository to further dig into this?
Thanks!
I was on a version below 14 for my case and updating to last version (14.0.4) fixed the issue !
This is not a valid import as next/navigation
doesn't have default export so pkg will end up as undefined
.
import pkg from 'next/navigation.js';
const { useParams, usePathname, useSearchParams } = pkg;
We landed some bundling improvements about handling Next.js APIs fully specified imports with extensio, such as next/navigation.js
. Could you also try upgrading to canary to see if it works for you?
If it still error, could someone provide a minimal reproduction that it failed on deployment? I'll help take a look. Thanks 🙏
I switched my app to the app
directory and it's working fine now. I will leave this issue open for other people using a version bellow 14
This is not a valid import as
next/navigation
doesn't have default export so pkg will end up asundefined
.import pkg from 'next/navigation.js'; const { useParams, usePathname, useSearchParams } = pkg;
We landed some bundling improvements about handling Next.js APIs fully specified imports with extensio, such as
next/navigation.js
. Could you also try upgrading to canary to see if it works for you?If it still error, could someone provide a minimal reproduction that it failed on deployment? I'll help take a look. Thanks 🙏
This wasn't an import I did, it's one from one of the internal packages of the <SpeddInsights />
, this file
@mayankmmmx, @SaranshChaudhary, @arenclissold, @azhong-git, @praveentcom, would you mind sharing the exact Next.js version you're using? This bug should be gone with version 13.3 and others already confirmed that versions 14 and upward are working.
@feugy - We are using 13.2.1
@SaranshChaudhary Please take a look at configuration. For NextJS version that older 13.3 you should use this config
No luck yet. The project is on turbo-repo and have bumped it to next@14.0.4
. It's still throwing the same useParams
import error.
Note that there are certain dependencies which are still running 13.1.x and ^13.3+, and I am not sure if these are creating a cascading effect.
Nevertheless, it works when using speed-insights/react
import with route
attribute.
@feugy @Ilya-Valasiuk
Check out the document carefully. Create a separate component for versions of Next.js older than 13.3. URL for reference : https://vercel.com/docs/speed-insights/quickstart#add-the-speedinsights-component-to-your-app
Hi, am trying to setup the speed-insights module on the
pages
directory but I get this errorStack: