Googlebot & Next.js, finding Google Chrome 41

Back to another adventure with GoogleBot. I saw that broker list site wasn’t being fetched and rendered properly by Google (via the Google Search Console).

Rather than slowly debugging it via the Search Console tools, I set out to find a Google Chrome v41 so I could resolve the issue quickly. This was a bit tricky but apparently there’s a project called Portable Apps which has a lot of old versions of Chromium. You can find Google Chrome 41 in their listing. I think it’s good to keep that version locally just to do a periodic check to see if everything is working as it should.

In my case, the site was failing due to a fetch call. Polyfilling with whatwg-fetch or unfetch didn’t seem to work (I was getting strange errors) until I realised that next.js is also making use of server side rendering (which is run in a node environment rather than a browser environment), and the above fetch polyfills are not designed to work in a node environment. Switching the polyfill out to isomorphic-unfetch solved my issue.

In addition you need to modify your .babelrc to something like the below. The format is a little compared to a regular .babelrc, since we first need to include the presets that next defines, and then add our customisations separately.

{
  "presets": [
    [
      "next/babel",
      {
        "preset-env": {
          "targets": {
            "chrome": "41"
          }
        }
      }
    ]
  ],
  "plugins": []
}

Lastly, you need to import (after you add it via yarn or npm) for instance in your _app.js

import '@babel/polyfill';

Leave a Reply

Your email address will not be published. Required fields are marked *