Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Using in browser: "TypeError: Failed to execute 'fetch' on 'Window': Illegal invocation"

See original GitHub issue

Using the latest airtable.browser.js and the latest jQuery (same error with the old version referenced in test_files/index.html), I get the following error:

In Chrome 86.0:

TypeError: Failed to execute 'fetch' on 'Window': Illegal invocation

In Firefox 81.0:

TypeError: 'fetch' called on an object that does not implement interface Window.

Following code:

<html>
    <head>
        <script src="./vendor/jquery.js"></script>
        <script src="./vendor/airtable.js"></script>
    </head>
    <body>
        <script>
            var Airtable = require('airtable');
            var base = new Airtable({apiKey: 'API_KEY'}).base('BASE_ID');
            base('TABLE_NAME').select({
                maxRecords: 3,
                view: "Grid view"
            }).eachPage(function page(records, fetchNextPage) {
                records.forEach(function(record) {
                    console.log('Retrieved', record.get('Name'));
                });
                fetchNextPage();
            }, function done(err) {
                if (err) { console.error(err); return; }
            });
        </script>
    </body>
</html>

Issue Analytics

State:
Created 3 years ago
Reactions:8
Comments:9 (2 by maintainers)

Top GitHub Comments

6reactions

rub1ecommented, Oct 19, 2020

@carderne here’s a simple workaround if you’re still stuck:

/node_modules/airtable/lib/fetch.js

On line 8, change typeof window === 'undefined' ? node_fetch_1.default : fetch; to typeof window === 'undefined' ? node_fetch_1.default : window.fetch.bind(window));

Or you can use my patch file until it’s fixed properly - use the below in conjunction with patch-package

/patches/airtable+0.10.0.patch

diff --git a/node_modules/airtable/lib/fetch.js b/node_modules/airtable/lib/fetch.js
index 1477bf1..566d00f 100644
--- a/node_modules/airtable/lib/fetch.js
+++ b/node_modules/airtable/lib/fetch.js
@@ -5,5 +5,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 var node_fetch_1 = __importDefault(require("node-fetch"));
 module.exports = (
 // istanbul ignore next
-typeof window === 'undefined' ? node_fetch_1.default : fetch);
+typeof window === 'undefined' ? node_fetch_1.default : window.fetch.bind(window));
 //# sourceMappingURL=fetch.js.map
\ No newline at end of file

5reactions

cardernecommented, Oct 21, 2020

The change suggested by @rub1e is on line 313 in airtable.browser.js:

https://github.com/Airtable/airtable.js/blob/96e2e80fe8d967c549c784fe9934596a94900a1a/build/airtable.browser.js#L313

Change it as suggested and it should work.