Link dies silently in production, works in dev

[joshkadis]

I have a Link that looks like this, seems ok:

<Link
  href={{
    pathname: '/ranking',
    query: { location: defaultLocation },
  }}
  as={'/ranking'}`
>
  <a className={styles.link}>Rankings</a>
</Link>

On a Next dev server, it works fine. On a production server, nothing happens. So I added some console.log statements to

• routeChangeStart
• routeChangeComplete
• routeChangeError
• getInitialProps for pages/ranking.js that I'm linking to.

On the dev server, everything fires as expected (except routeChangeError because there is no error).

On the production server, I see routeChangeStart then...nothing. routeChangeError doesn't fire. Chrome dev tools doesn't detect any errors, not even caught errors.

I've tested various combinations of strings and objects for the Link's href and as but always get the same behavior. It might be something obvious but I've been using Next for a while and I'm pretty sure I've covered all the basics. That said, this codebase started with Next v5 and I've been bringing it gradually up to current standards. Way to go with backwards compatibility!

(It's probably something obvious 🤦)

[timneutkens]

Can you post your next.config.js?

[joshkadis]

Thanks!

require('dotenv').config()
const webpack = require('webpack')
const withCSS = require('@zeit/next-css');

module.exports = withCSS({
  cssModules: true,
  cssLoaderOptions: {
    modules: true,
    localIdentName: '[name]__[local]--[hash:base64:5]',
    importLoaders: 2,
  },
  webpack: (config) => {
    const define = new webpack.EnvironmentPlugin([
      'APP_DOMAIN',
      'PORT',
      'CLIENT_ID',
    ]);
    config.plugins.push(define);
    return config;
  },
});

I guess this predates built-in support for env variables.

[timneutkens]

It's probably this issue: vercel/next-plugins#282
Which has been fixed with built-in CSS support.

[joshkadis]

Wow, ok. Apparently I missed a few things in the last 2+ years!

Thanks for the help, I really appreciate it.

[timneutkens]

Just for reference you can read more about built-in CSS support here: https://nextjs.org/docs/basic-features/built-in-css-support