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 #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