Next.js: : An unexpected error has occurred being indexed as title on google

Created on 21 Aug 2018  路  9Comments  路  Source: vercel/next.js

Bug report

Describe the bug

I have 3 different websites served by next.js and some random pages are being indexed on google with title as ": An unexpected error has occurred - My website name" but everything looks fine with the title tag when opening page's source

To Reproduce

Have no idea, since the error only appears when indexed by google, but you can see it wrong with these website:
site:brasilmaplestory.com
just google it ^

Expected behavior

No error message at page's title

Screenshots

System information

  • Version of Next.js: 6.1.1

Additional context

How do I use the title tag:

page.jsx

<PageLayout title={`CashShop | ${websiteName`}>
    .... Page content
  </PageLayout>

PageLayout.jsx

const PageLayout = ({
  title,
 ...
}) => (
<div>
    <Head>
      <meta charSet="UTF-8" />
      <title>{title}</title>
........
    </Head>
  </div>
);
picture JoaoBGusmao

Most helpful comment

I added @babel/polyfill and fixed most of the error.
Then I added a custom polyfill.js to polyfill NodeList.forEach and url-polyfill for URL Object;

Here's the code,

/.babelrc

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                   "chrome": "41"
                },
                "useBuiltIns": "entry"
            }
        ]
    ],
}

src/helpers/polyfill.js

// NodeList.forEach polyfill
if (typeof window !== "undefined") {
  if (window.NodeList && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = Array.prototype.forEach;
  }
}

pages/_app.js

import "helpers/polyfill";
import "@babel/polyfill";
import "url-polyfill";

If this still doesn't solve your problem, I recommend you to checkout https://polyfill.io/v3/url-builder and find your polyfill function.

picture Ktchan825 on 3 Mar 2019
❤2 🎉1 👍1

All 9 comments

@JoaoBGusmao need to see your package.json what modules do you use?
What error logs? Do you have some?

radeno picture radeno on 21 Aug 2018

So I had this problem recently, it's quite hard to debug. For me the JavaScript was executing fine in the latest browsers, but crashing when googlebot was accessing the site. They use an old version of Chrome (Chrome 41). Download that and try and access your website with it, you'll probably find the site crashes, and the error should be listed in the dev tools console.

For me it was Object.assign not being supported, so I just polyfilled it.

richardwillars picture richardwillars on 21 Aug 2018
👍2

I'm going to try downloading this old chrome version. By the way, when using the google webmater tool "googlebot fetch" the title comes fine, its weird..

JoaoBGusmao picture JoaoBGusmao on 21 Aug 2018

Looks like it works on chrome 41 https://www.browserling.com/browse/win/7/chrome/41/http%3A%2F%2Fbrasilmaplestory.com

dont you had any problem with website when it was indexed by google? Because when i google you website currently title looks OK.

radeno picture radeno on 21 Aug 2018

thanks @radeno and @richardwillars! Open using 41 really shows the error.
@radeno the homepage has no error.. The page /cashshop and others are pages that doesnt work. Closing this issue because looks like it's my fault, but for everyone having this problem, just try Chrome 41

JoaoBGusmao picture JoaoBGusmao on 21 Aug 2018

I was using the array find method, that wasn't supported by chrome 41. Only added a polyfill and the problem is gone

JoaoBGusmao picture JoaoBGusmao on 21 Aug 2018

Hi,
I have got the exactly same problem.
First my title is ok but after it's replaced but an unexpeted error, look at that : https://www.browserling.com/browse/win/7/chrome/41/https://vetolib.vet

Thanks you so much

davzer27 picture davzer27 on 2 Sep 2018

@davzer27 The error displayed on my page was related to the use of Array.find function that was not supported by chrome in this version. I fixed by adding a polyfill.
_app.jsx

import '../src/helpers/find.polyfill';
......

src/helpers/find.polyfill

Array.prototype.find = Array.prototype.find || function (callback) {
  if (this === null) {
    throw new TypeError('Array.prototype.find called on null or undefined');
  } else if (typeof callback !== 'function') {
    throw new TypeError('callback must be a function');
  }
  var list = Object(this);
  // Makes sures is always has an positive integer as length.
  var length = list.length >>> 0;
  var thisArg = arguments[1];
  for (var i = 0; i < length; i++) {
    var element = list[i];
    if (callback.call(thisArg, element, i, list)) {
      return element;
    }
  }
};
JoaoBGusmao picture JoaoBGusmao on 3 Sep 2018
👍1

I added @babel/polyfill and fixed most of the error.
Then I added a custom polyfill.js to polyfill NodeList.forEach and url-polyfill for URL Object;

Here's the code,

/.babelrc

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                   "chrome": "41"
                },
                "useBuiltIns": "entry"
            }
        ]
    ],
}

src/helpers/polyfill.js

// NodeList.forEach polyfill
if (typeof window !== "undefined") {
  if (window.NodeList && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = Array.prototype.forEach;
  }
}

pages/_app.js

import "helpers/polyfill";
import "@babel/polyfill";
import "url-polyfill";

If this still doesn't solve your problem, I recommend you to checkout https://polyfill.io/v3/url-builder and find your polyfill function.

Ktchan825 picture Ktchan825 on 3 Mar 2019
❤2 🎉1 👍1
Was this page helpful?
0 / 5 - 0 ratings

Related issues

swrdfish picture swrdfish  路  3Comments
irrigator picture irrigator  路  3Comments
lixiaoyan picture lixiaoyan  路  3Comments
flybayer picture flybayer  路  3Comments
havefive picture havefive  路  3Comments