Next 7 - Router.push() does`t work as expected

[severjason]

Bug report

Describe the bug

Next 7 - Router.push() does`t work.

To Reproduce

I have a search handler that should redirect to '/search' page from main page. But nothing happens.
routeChangeError throws Route cancelled. But on Next 6.1.2. everything works fine.
Also if I go to the link http://localhost:8080/search directly it works as expected, seems like a problem with client side routing. Using HOC withRouter gives the same results.

handleSearch = (event, { suggestionValue }) => {
    if (suggestionValue.address_string === undefined) {
      return;
    }
    const newQueryParams = {
      // New search should always start from 1st page
      page: 1,
      // If search value is empty, it should send default search request
      address: isString(suggestionValue.address_string) ? suggestionValue.address_string : '',
    };
    Router.events.on('routeChangeError', (err) => {
        console.log(err)
    })
    if (Router.router.pathname === '/search') {
      Router.push({ pathname: '/search', query: { ...Router.router.query, ...newQueryParams } })
    } else {
      Router.push({ pathname: '/search', query: newQueryParams })
    }
  };

Expected behavior

Expected to work the same as in Next 6.1.2

System information

• OS: Ubuntu 18.04
• Version of Next.js: 7.0.0

[timneutkens]

Can you create a minimal github repository? That way I can add tests for it if there is indeed a problem, but I suspect there's something else going on.

[severjason]

I will need some time to prepare repository, but for now, can you tell in what situations Route can be cancelled ?

[timneutkens]

https://github.com/zeit/next.js/blob/canary/lib/router/router.js#L257-L274
https://github.com/zeit/next.js/blob/canary/lib/router/router.js#L371-L390

[udanpe]

same problem all pages where i use import css not working.

[msand]

This is probably the same bug as here: #5203
Can be worked around by importing an empty css file from _app.js
It's caused by the chunks having a deferred module dependency on the style chunk, but the style chunk is never loaded, so the new chunk never executes. If you depend on a css file from the _app.js file, then the style chunk will always be available and the new route executes once it's loaded.

[msand]

And this is also the same: vercel/next-plugins#282

[severjason]

I found comments in Router error:

this.abortComponentLoad(as); // If the url change is only related to a hash change
                // We should not proceed. We should only change the state.

So for me solution was to use window.location:

if (Router.router.pathname === '/search') {
      Router.push({ pathname: '/search', query: { ...Router.router.query, ...newQueryParams } })
    } else {
      window.location.replace(`/search?page=${newQueryParams.page}&address=${newQueryParams.address}`);
    }

[timneutkens]

This doesn’t sound like the correct solution. Could you provide a minimal reproduction?

[ex3ndr]

Same here. I have simple component that redirects on mount (simple page redirect), router fires events about navigation start, but it never completes.

[futjikato]

@timneutkens In vercel/next-plugins#282 @standy linked this as his minimal reproduction:
https://github.com/standy/next-css-error

[popuguytheparrot]

This is probably the same bug as here: #5203
Can be worked around by importing an empty css file from _app.js
It's caused by the chunks having a deferred module dependency on the style chunk, but the style chunk is never loaded, so the new chunk never executes. If you depend on a css file from the _app.js file, then the style chunk will always be available and the new route executes once it's loaded.

Not working

[fortydegrees]

FWIW, I randomly encountered this issue and importing a random .css file in _app.js fixed it

[jamesrford7]

It's bitten me too, that was a good 2 hours of pulling my hair out.

@msand workaround fixed it though so a massive thanks.
Would be nice not have the scrappy fix though.

[skptricks]

This is probably the same bug as here: #5203
Can be worked around by importing an empty css file from _app.js
It's caused by the chunks having a deferred module dependency on the style chunk, but the style chunk is never loaded, so the new chunk never executes. If you depend on a css file from the _app.js file, then the style chunk will always be available and the new route executes once it's loaded.

After following steps, it is still not working. could you please let me know the workaround for the same ?

[alvincrespo]

@msand you saved my life. Thank you.

[douglas-pires]

I was having a problem with redirection using Router.push. I was using something like:

useEffect(() => {
  if (authResult) {
    Router.push({ pathname: '/workspaces' }, '/workspaces')
  }
}, [authResult])

Now I have:

  useEffect(() => {
    if (authResult) {
      Router.events.on('routeChangeStart', url => {
        window.location.href = url
      })
      Router.push({ pathname: '/workspaces' }, '/workspaces')
    }
  }, [authResult, Router])

It doesn't smell good but hopefully helps someone.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.