my push method from next/router not working properly as expected after wrapping my app with ConnectedRouter

[Prof-isaac]

my app.js

push not working properly router.push({ pathname: home/${productName}/${id}/view, query: { previousLabel } })

Error from project

Unhandled Runtime Error TypeError: url.startsWith is not a function

Source next-server\lib\router\router.ts (97:6) @ isLocalURL

95 | */ 96 | export function isLocalURL(url: string): boolean {

97 | if (url.startsWith('/')) return true | ^ 98 | try { 99 | // absolute urls can be local if they are on the same origin 100 | const locationOrigin = getLocationOrigin()

[danielr18]

Hi @Prof-isaac, I've tried recreating this on the latest version of the library and Next.js 10 and couldn't recreate. Can you create a small reproduction in codesandbox or in one of the library test cases?

[Prof-isaac]

@danielr18 am using "next": "^9.5.5", "connected-next-router": "^3.1.0", what i mean is that this no longer works after wrapping my app with connected next router router.push({ pathname: home/${productName}/${id}/view, query: { previousLabel } })

but this works router.push({ home/${productName}/${id}/view, })

showing there is a poblem when i add pathname and query

[danielr18]

See https://github.com/danielr18/connected-next-router/pull/54.

V3 is not compatible with Next.js 9.5, I would recommend updating to Next.js 10 and v4 of this library.

[Prof-isaac]

@danielr18 just upgrade to v10 and v4 and i get this error

next-dev.js:89 Error was not caught Error: No router instance found. You should only use "next/router" inside the client side of your app.

I don't think both are backward compatible because if i go back to next 9.5 and connected-next-router v3 all works as before

[danielr18]

@Prof-isaac Can you share the full stack trace of the error?

[Prof-isaac]

@danielr18 thanks for your quick response i really appreciate.

next-dev.js:89 Error was not caught Error: No router instance found. You should only use "next/router" inside the client side of your app.

at getRouter (router.ts:113)
at Object.get (router.ts:75)
at middleware.js:20
at Object.dispatch (index.js:11)
at Object.dispatch (<anonymous>:1:28545)
at Module.<anonymous> (_app.js:43)
at Module../src/pages/_app.js (_app.js:91)
at __webpack_require__ (bootstrap:872)
at fn (bootstrap:150)
at next-client-pages-loader.js:5
at route-loader.ts:274

[danielr18]

Are you dispatching a navigation action server side?

[Prof-isaac]

@danielr18 you are right i have a navigation action which enable me navigate in my redux middleware. how do i fix this.

[danielr18]

You can only use navigation actions or next/router methods client side, so make sure that you don't do it server side.

You could use if (typeof window !== 'undefined) { // client side only }

[Prof-isaac]

@danielr18 import { push } from 'connected-next-router'

const navigateTo = ({ dispatch }) => next => action => { next(action); if (action.type == UI_NAVIGATE) { isBrowser() && dispatch(push(url));
} }; still having the same issue; above is the navigation action.

[danielr18]

If you can create a small reproduction, I will be able to better help you.

I would say UI_NAVIGATE action isn't needed, you could just dispatch connected-next-router actions where you dispatch those.

[Prof-isaac]

@danielr18
import { createRouterMiddleware, initialRouterState } from 'connected-next-router' here is my store

const routerMiddleware = createRouterMiddleware();

const parseMiddleware = () => { const middleware = [ thunk, routerMiddleware, // if i comment this line it works fine showing it comming from this part ...applicationMiddleware, ];

if (process.env.NODE_ENV === "production") { return applyMiddleware(...middleware); } else { // Enable additional logging in non-production environments. middleware.push(createLogger()); return applyMiddleware(...middleware); } };

const store = createStore( createRootReducer(), getPersistedStore(), composeWithDevTools(parseMiddleware()) );
this application is comming from connected react router setup. is next 10 compatible with connected-next-router v3 so i can try