How to use navigation when both pages and app router being used?

[sqveeze]

Hello,

I'm using next-intl with tolgee, and i followed all the steps in the docs and also checked out the example project here:
https://github.com/amannn/next-intl/tree/main/examples/example-app-router-migration

Everything works except on page router i cannot use the navigation which is exported from the navigation.ts. As soon as i import for example Link or usePathname i receive this error:

Runtime Error

Cannot find module '/Users/.../frontend/node_modules/next/navigation' imported from /Users/.../frontend/node_modules/next-intl/dist/esm/production/navigation/react-client/createNavigation.js
Did you mean to import "next/navigation.js"?

I double checked everything, and while all other function works, this one is not, but only on page router. Importing it in an app router page works fine. Can anyone tell me how to use localized navigation on page router?

[amannn]

Hey, I've just tried to reproduce this in d275cd3, but it seems to be working for me.

Can you double check if you have differences in your app compared to the example?

This might be related: vercel/next.js#77200.

Also, can you check if you have "type": "module" set in your package.json? Maybe that could lead to the error.

[sqveeze]

Hey @amannn, just removed type module from package.json since my next.config file was already .mjs. While this still works for payloadcms, sadly the intl navigation problem still occurs, anything else i should look for? I think my repo and the example repo is kinda similar now. Both app router and pages router contains [locale], both of them adds the NextIntlProviderClient, everything is set up the same including routing, request and navigation ts files. Also the middleware.ts.

[amannn]

Hmm, interesting! There surely must be some difference between the two examples.

Maybe you can reduce it further down to something minimal where the bug can still be reproduced? Or you could consider starting the other way round, taking the migration example and adding your app code step by step until you can see the error? I'd guess if you can pinpoint it to a particular piece of code, then there should be a solution.

[sqveeze]

@amannn So i did what you told me, and this is what i achieved so far:

• Made my project empty, i'm returning only a blank page as the / path and using only the usePathname() hook on the page. Removed every Provider like react query provider etc... (still the same error)
• Removed a lot of dependencies from the package json ( still the same error)

However i just added my dependencies to the example project which is linked above, and the example project breaks as well.

This is the current package.json:

{
  "name": "example-app-router-migration",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "lint": "eslint src && prettier src --check",
    "test": "echo 'No tests yet'",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@dnd-kit/core": "6.1.0",
    "@dnd-kit/modifiers": "7.0.0",
    "@dnd-kit/sortable": "8.0.0",
    "@emotion/cache": "11.11.0",
    "@emotion/react": "11.11.4",
    "@emotion/serialize": "1.1.4",
    "@emotion/server": "11.11.0",
    "@emotion/styled": "11.11.5",
    "@emotion/utils": "1.2.1",
    "@hookform/resolvers": "2.9.11",
    "@mantine/carousel": "8.0.1",
    "@mantine/core": "8.0.1",
    "@mantine/dates": "8.0.1",
    "@mantine/dropzone": "8.0.1",
    "@mantine/emotion": "8.0.1",
    "@mantine/hooks": "8.0.1",
    "@mantine/modals": "8.0.1",
    "@mantine/notifications": "8.0.1",
    "@mantine/nprogress": "8.0.1",
    "@mantine/tiptap": "8.0.1",
    "@payloadcms/db-postgres": "3.27.0",
    "@payloadcms/next": "3.27.0",
    "@payloadcms/richtext-lexical": "3.27.0",
    "@payloadcms/storage-s3": "3.27.0",
    "@payloadcms/translations": "3.27.0",
    "@stripe/react-stripe-js": "1.16.5",
    "@stripe/stripe-js": "1.52.1",
    "@tanstack/react-query": "5.14.2",
    "@tanstack/react-query-devtools": "5.14.2",
    "@tiptap/extension-link": "2.11.5",
    "@tiptap/extension-placeholder": "2.11.5",
    "@tiptap/pm": "2.11.5",
    "@tiptap/react": "2.11.5",
    "@tiptap/starter-kit": "2.11.5",
    "@tolgee/format-icu": "6.2.2",
    "@tolgee/react": "6.2.2",
    "axios": "1.9.0",
    "bootstrap": "5.2.3",
    "cookie": "1.0.2",
    "cookies-next": "5.1.0",
    "cookies-next-legacy": "npm:[email protected]",
    "cross-env": "7.0.3",
    "dayjs": "1.11.11",
    "embla-carousel": "8.5.2",
    "embla-carousel-react": "8.5.2",
    "graphql": "16.10.0",
    "http-proxy": "1.18.1",
    "lodash": "4.17.21",
    "luxon": "3.3.0",
    "nanoid": "5.1.5",
    "next": "15.5.2",
    "next-intl": "4.3.5",
    "next-sitemap": "3.1.55",
    "next-usequerystate": "1.7.2",
    "nuqs": "1.20.0",
    "payload": "3.27.0",
    "random-words": "1.3.0",
    "react": "19.1.0",
    "react-dom": "19.1.0",
    "react-google-recaptcha-v3": "1.10.0",
    "react-hook-form": "7.43.9",
    "react-use": "17.4.0",
    "sanitize-html": "2.14.0",
    "sass": "1.62.1",
    "sharp": "0.34.3",
    "slugify": "1.6.6",
    "yup": "0.32.11",
    "zod": "3.22.4",
    "zustand": "4.4.1"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3.1.0",

    "@testing-library/jest-dom": "5.16.5",
    "@testing-library/react": "13.4.0",
    "@types/apple-mapkit-js-browser": "5.78.1",
    "@types/apple-signin-api": "1.5.3",
    "@types/facebook-js-sdk": "3.3.12",
    "@types/google.accounts": "0.0.17",
    "@types/http-proxy": "1.17.16",
    "@types/lodash": "4.14.191",
    "@types/luxon": "3.2.0",
    "@types/node": "22.13.10",
    "@types/react": "19.1.0",
    "@types/react-dom": "19.1.0",
    "@types/sanitize-html": "2.13.0",
    "dotenv-cli": "10.0.0",
    "eslint": "8.46.0",
    "eslint-config-next": "13.4.13",
    "eslint-config-prettier": "8.10.0",
    "eslint-plugin-prettier": "4.2.1",
    "eslint-plugin-simple-import-sort": "10.0.0",
    "jest": "29.4.3",
    "jest-date-mock": "1.0.8",
    "jest-environment-jsdom": "29.3.1",
    "postcss": "8.4.39",
    "postcss-preset-mantine": "1.15.0",
    "postcss-simple-vars": "7.0.1",
    "prettier": "2.8.8",
    "ts-node": "10.9.2",
    "typescript": "5.5.3"
  },
  "prettier": {
    "singleQuote": true,
    "bracketSpacing": false,
    "trailingComma": "none"
  },
  "engines": {
    "node": ">=20.0.0"
  }
}

The error:

## Error Type
Runtime TypeError

## Error Message
null is not an object (evaluating 'dispatcher.useContext')

Next.js version: 15.5.2 (Webpack)

App router still works fine. I continue the investigation, but in the meantime, if you have any guess what could cause this, please tell me.

[amannn]

Hmm, I wonder if there are mismatching React versions somehow.

See e.g.: https://www.reddit.com/r/reactjs/comments/vl7ww2/typeerror_cannot_read_properties_of_null_reading/