SyntaxError: Named export 'useParams' not found

[AlejandroYanes]

Hi, am trying to setup the speed-insights module on the pages directory but I get this error

Server Error
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;

Stack:

• turbo v1.11.1
• React v18.2.0
• TypeScript v4.9.4

[mayankmmmx]

Also facing this same issue.

[praveentcom]

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]'
}

[azhong-git]

+1

[AlejandroYanes]

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

[arenclissold]

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'

[aaalloc]

This problem hasn't still been fixed ...

[SaranshChaudhary]

+1

[tobiaslins]

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!

[aaalloc]

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 !

[huozhi]

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 🙏

[AlejandroYanes]

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

[AlejandroYanes]

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 🙏

This wasn't an import I did, it's one from one of the internal packages of the <SpeddInsights />, this file

[feugy]

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

[SaranshChaudhary]

@feugy - We are using 13.2.1

[Ilya-Valasiuk]

@SaranshChaudhary Please take a look at configuration. For NextJS version that older 13.3 you should use this config

[praveentcom]

No luck yet. The project is on turbo-repo and have bumped it to [email protected]. 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

[snairsumith]

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