bug: 'shallow' does not exist in type 'NavigateOptions'

[njfdev]

Link to the code that reproduces this issue

Code Sandbox Link

To Reproduce

1. Build the application (yarn build)
2. It should throw an error while building

Current vs. Expected behavior

In past versions (14.0.3 and earlier), the shallow option on the router.replace() command worked and successfully built, but now it throws an error while building: Object literal may only specify known properties, and 'shallow' does not exist in type 'NavigateOptions'. It seems to still work fine when running (yarn dev), so it seems specific to the building process.

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
Binaries:
  Node: 20.9.0
  npm: 9.8.1
  Yarn: 1.22.19
  pnpm: 8.10.2
Relevant Packages:
  next: 14.0.5-canary.29
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Routing (next/router, next/navigation, next/link)

Additional context

After trying various canary versions, I found the issue to be introduced in version v14.0.4-canary.22. This likely has to do with #59001.

[eaoliver]

I encountered the same problem on next@14.0.4

[artekr]

same here, pnpm run build failed because of this

Type error: Argument of type '{ shallow: boolean; scroll: false; }' is not assignable to parameter of type 'NavigateOptions'.
--
10:49:15.290 | Object literal may only specify known properties, and 'shallow' does not exist in type 'NavigateOptions'.

[eaoliver]

I rolled back to 14.0.4-canary.17 and the problem went away.

'shallow' is still listed in the router documentation, so it's not clear what is going on.

[aaronmcadam]

This problem still exists in next@14.1.4. Is there anything we can do here beyond fixing the type ourselves? Is there a new way to use shallow routes being designed instead of using the router like the following:

const router = useRouter();
// @ts-expect-error 'shallow' does not exist in type 'NavigateOptions'
router.push(`${pathname}?${orderParam}`, { shallow: true });

[laurencebedford]

getting the exact same issue as well - any work arounds?

[aaronmcadam]

The workaround would be to augment the NavigateOptions type ourselves with the extra shallow prop. Something like the following:

interface NavigateOptions {
  shallow: boolean;
}

[laurencebedford]

The workaround would be to augment the NavigateOptions type ourselves with the extra shallow prop. Something like the following:

interface NavigateOptions {
  shallow: boolean;
}

How do I apply that to this code though router.push(${pathname}?${orderParam}, { shallow: true });

[aaronmcadam]

The workaround would be to augment the NavigateOptions type ourselves with the extra shallow prop. Something like the following:

interface NavigateOptions {
  shallow: boolean;
}

How do I apply that to this code though router.push(${pathname}?${orderParam}, { shallow: true });

@mattpocock demonstrates how to implement module augmentation in this LinkedIn post: https://www.linkedin.com/posts/mapocock_use-zod-to-parse-your-environment-variables-activity-7166753669751775232-ycxV/.

The example extends ProcessEnv, but it's the same idea.

[laurencebedford]

The workaround would be to augment the NavigateOptions type ourselves with the extra shallow prop. Something like the following:

interface NavigateOptions {
  shallow: boolean;
}

How do I apply that to this code though router.push(${pathname}?${orderParam}, { shallow: true });

@mattpocock demonstrates how to implement module augmentation in this LinkedIn post: https://www.linkedin.com/posts/mapocock_use-zod-to-parse-your-environment-variables-activity-7166753669751775232-ycxV/.

The example extends ProcessEnv, but it's the same idea.

This is an interesting approach for now ive solved this by typing it as any to bypass typing:

router.push(`path`, {
        shallow: true,
      } as any);

[aaronmcadam]

The workaround would be to augment the NavigateOptions type ourselves with the extra shallow prop. Something like the following:

interface NavigateOptions {
  shallow: boolean;
}

How do I apply that to this code though router.push(${pathname}?${orderParam}, { shallow: true });

@mattpocock demonstrates how to implement module augmentation in this LinkedIn post: https://www.linkedin.com/posts/mapocock_use-zod-to-parse-your-environment-variables-activity-7166753669751775232-ycxV/. The example extends ProcessEnv, but it's the same idea.

This is an interesting approach for now ive solved this by typing it as any to bypass typing:

router.push(`path`, {
        shallow: true,
      } as any);

I'd recommend using @ts-expect-error like in my example above instead of manually casting the value as any. At least that way, you'll know when this issue is fixed because TypeScript will raise an error if the following line raises no error. If you use any, you'll never know when or if you can remove this workaround.

[JCcastagne]

Absolutely mind-boggling that NextJS14 was considered ready for public use, yet one of the most important parts of the app (Routing) is not 100% working.