Fetch As Google Error – ReactJs

Hi everyone,

I ran into the following error while using “fetch as Google” and none of my pages were being indexed correctly:

Uncaught TypeError: undefined is not a function

It took a while to find a solution but after some Googling I found that GoogleBot currently uses Chrome v41. You can download the mini installer of Chromium v41 which will run in parallel with your existing Chrome version: https://www.googleapis.com/download/storage/v1/b/chromium-browser-snapshots/o/Win%2F310958%2Fmini_installer.exe?generation=1420864313749000&alt=media

After downloading Chromium you can just debug normally via the console. In my case, Chrome v41 didn’t like the following command:

document.head.append(script);

If you’re using a front-end framework like ReactJS, AngularJS or Vue you’ll often just need to add babel polyfill:


npm install babel-core --save-dev

Then add this as the first line in your entry point e.g. index.js:

import 'babel-core/polyfill';

It’s important that the polyfill import is added as the first line otherwise anything added before it won’t work.

If you’re getting an error about Headers, you may also need to install the following:

npm install whatwg-fetch --save

Add then add this import just below your babel polyfill:

import 'whatwg-fetch'

Thanks to tomekrudzki on Reddit for the link to Chromium v41: Chrome 41 the key to successful website rendering

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s