Complex { Link } from routes module doesn't work when coming from static pages, but does when navigated to first

Description: A complex link doesn’t work when first landing on a static page with a normal link. But does when first navigating to the complex link, moving towards another (static) page. And then navigating to the complex link. (it is not reproducible in a local environment)

Here is the website I’m talking about. I have no clue when it got introduced or for how long it has been there. But obviously I want to get this fixed quick.

www.lizy.be/nl/leasing-auto - Complex link www.lizy.be/nl/over-ons - simple link

Scenario:

1. Go to www.lizy.be/nl/leasing-auto
2. Go to the second navigation link (Waarom Lizy ?) by clicking
3. Move back to the complex link (Onze wagens) by clicking
4. Go back to the second navigation link (Waarom Lizy ?)
5. Refresh
6. Try to navigate to the complex link (Onze wagens)

Might it be something with the way next-routes is wrapped around this a-tag? Any insights would be very much appreciated. I have the feeling some JS error might be swallowed, but I have no indication or idea on how to get this fixed fast. Any pointers on how to debug this

Here is the setup:

• I’m using next export
• The router defines the link, just as the next.config paths

Minimal version:

routes.js (as defined by next-routes)

module.exports = routes()
  .add('/:lang(nl)/waarom-lizy', '/whylizy')
  .add('/:lang(fr)/pourqoui-lizy', '/whylizy')
  .add('/:lang(nl)/leasing-auto', '/overview')
  .add('/:lang(fr)/leasing-voiture', '/overview')
  .add('/:lang(nl)/leasing-auto/:makes', '/overview')
  .add('/:lang(fr)/leasing-voiture/:makes', '/overview')
  .add('/:lang(nl)/leasing-auto/:makes/:models', '/overview')
  .add('/:lang(fr)/leasing-voiture/:makes/:models', '/overview')

The paths as defined by next.config: Next to that I also have paths generated for all the models/cars available to have them as static pages as well inside my application and they become easy to navigate.

{
      page: 'overview',
      template: '/overview',
      slug: {
        nl: '/leasing-auto',
        fr: '/leasing-voiture',
      }
},
{
      page: 'why-lizy',
      template: '/whylizy',
      slug: {
        nl: '/waarom-lizy',
        fr: '/pourqoui-lizy',
      },
},

The Link button is defined like this:

<li>
  <Link
    route={`/${locale}/${formatMessage({
      id: `global_data.slugs.overview_slug`,
    })}`}
  >
    <a>{formatMessage({ id: `global_data.slugs.overview_title` })}</a>
  </Link>
</li>
<li>
  <Link
    route={`/${locale}/${formatMessage({
      id: `global_data.slugs.why_lizy_slug`,
    })}`}
  >
    <a>{formatMessage({ id: `global_data.slugs.why_lizy_title` })}</a>
  </Link>
</li>

[sidujjain]

Thanks @watch-janick ! This really helped. I was able to fix this by importing bootstrap css file in _app.js

[watch-janick]

Did anyone find a workaround/fix for this?

My problem was related to Webpack, NextJS and Ant Design using less.

In case anyone has the same problem as I had, here’s how I fixed it:

It happened only when a page without Ant Design was trying to navigate to a page with Ant Design on it.

The fix was to manually load all the used less files across the project into _app.js:

import 'antd/lib/style/index.less'
import 'antd/lib/layout/style/index.less'
[...]

And disable styles import in .babelrc:

[
  "import",
  {
    "libraryName": "antd",
    "style": false
  }
],

It’s not ideal, but it’s actually the only way to make it work with the current version of Webpack & NextJS.

Good luck!