Airtable/airtable.js

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

carderne opened this issue · 9 comments

carderne commented

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>
rub1e commented

I'm currently experiencing the same issue, and so is someone in the Airtable forums

https://community.airtable.com/t/failed-to-execute-fetch-on-window-illegal-invocation/34738

Would be really helpful if someone from Airtable could take a look - currently paralysed

rub1e commented

@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
  • 👍6
carderne commented

Thanks @rub1e, that's working!

  • 👍1
midosamidos commented

Thanks for your help, but your workaround requires changing line 8 on the fetch.js file.
What if I'm using only the airtable.browser.js file in the browser?
The problem is in latest version of the airtable.browser.js file, which is the only file i’m using.

The only workaround that I found (for my case), is to not use the latest airtable.browser.js file
And I'm using the one that is located here /test/test_files/airtable.browser.js

  • 👍1
carderne commented

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

airtable.js/build/airtable.browser.js

Line 313 in 96e2e80

typeof window === 'undefined' ? node_fetch_1.default : fetch);

Change it as suggested and it should work.

  • 👍5
midosamidos commented

@carderne The best Chris in the world 👍

Aias commented

Same issue here, hope to see some action soon.

carderne commented

This probably won't be merged, but here's a PR with the required fix for airtable.browser.js: #234

Alternatively, here's the file you need:
https://github.com/carderne/airtable.js/blob/master/build/airtable.browser.js

  • 👍2
  • 🎉1
  • 🚀1
carderne commented

airtable.browser.js is now fixed: https://github.com/Airtable/airtable.js/blob/master/build/airtable.browser.js

Thanks @benrazon for the fix, closing the issue.

  • 👍1