search

GV14982 / async-airtable

A lightweight npm package to handle working with the Airtable API.
https://www.npmjs.com/package/asyncairtable
MIT License
54 stars 5 forks source link

Error: unable to locate global object #51

Closed raybrownco closed 3 years ago

raybrownco commented 3 years ago

Describe the bug Any attempt to use async-airtable in the browser via Next.js fails due to an inability to locate the global object.

To Reproduce Steps to reproduce the behavior:

  1. Visit this CodeSandbox: https://codesandbox.io/s/silly-galileo-0zt3w?file=/pages/index.js
  2. Observe in pages/index.js that we are referencing the browser version of async-airtable.
  3. See error message in browser preview window.

Expected behavior I expect to access the browser version of async-airtable within a React component.

Screenshots

Screen Shot 2020-12-30 at 5 06 31 PM

Desktop (please complete the following information):

Additional context

Next.js offers ways to retrieve data via SSR, and the node version of async-airtable works perfectly within that context. However, I'd like to make some updates to Airtable from forms within React components, and that needs to happen in the browser context. I ran into this issue while attempting to make those updates.

A bit of Googling made me think that the issue might be related to node-fetch and/or referencing this instead of globalThis. However, this stuff isn't really my wheelhouse and I wasn't able to fork and fix on my own. Thanks in advance for your time and energy!

raybrownco commented 3 years ago

(This seems related to the work done in #37.)

GV14982 commented 3 years ago

Hey there,

I tested this out, and I was able to fix the error by changing the import on line from: import AsyncAirtable from "asyncairtable/dist/asyncAirtable"; to import AsyncAirtable from "asyncairtable";

That seemed to fix it. Let me know if you're still having trouble!

raybrownco commented 3 years ago

Huh. When I perform the same action in CodeSandbox, I get Error: API Key is required errors (even after nuking and redefining the related env vars). When I change the import in my local dev env, I get weird CORS errors instead. Not sure how to proceed from here, aside from falling back to using Airtable's own lib for client-side JS, while still using async-airtable server-side. (That's good enough for me.)

Thanks for your time, @GV14982!

GV14982 commented 3 years ago

I'll setup a local NextJS project and see if I can find a fix for your issue a little later today.

GV14982 commented 3 years ago

@bitmanic I was able to get this working on codesandbox using the env by renaming the variables with a NEXTPUBLIC prefix according to the docs

I was also able to get this working in a local NextJS project. Would you mind sharing some of your code?

GV14982 commented 3 years ago

@bitmanic are you still having issues with this or can I close this issue?

GV14982 commented 3 years ago

Going to close this issue for now. Let me know if you're still having issues :)

raybrownco commented 3 years ago

@GV14982 Sorry for the silence, and thanks for your time and energy. I'll be working on this particular project again later this week. I'll respond to this thread if need be. Thanks again!