search

Airtable / airtable.js

Airtable javascript client
MIT License
2k stars 404 forks source link

Support for next.js edge runtime #346

Open markhughes opened 1 year ago

markhughes commented 1 year ago

The next.js edge runtime does a validation on the Request object.

This causes this line to fail:

https://github.com/Airtable/airtable.js/blob/b468d8fe48d75e3d5fe46d0ea7770f4658951ed0/src/abort-controller.ts#L7

error - Error: URL is malformed "". Please use only absolute URLs - https://nextjs.org/docs/messages/middleware-relative-urls
    at <unknown> (file:///.../node_modules/next/dist/server/web/utils.js:94)
    at Object.validateURL (file:///.../node_modules/next/dist/server/web/utils.js:94:15)
    at new context.Request (file:///.../node_modules/next/dist/server/web/sandbox/context.js:210:33)
    at Object.1.abort-controller (webpack-internal:///(middleware)/./node_modules/airtable/lib/airtable.umd.js:9:22)
    at o (webpack-internal:///(middleware)/./node_modules/airtable/lib/airtable.umd.js:1:348)
    at eval (webpack-internal:///(middleware)/./node_modules/airtable/lib/airtable.umd.js:1:399)

As it is considered an invalid URL. We should pass a valid URL here for this validation.

You can see here in the edge runtime it adds its own validator:

https://github.com/vercel/next.js/blob/efcec4c1e303848a5293cef6961be8f73fd5160b/packages/next/src/server/web/sandbox/context.ts#L267-L279

Which will not accept an invalid URL:

https://github.com/vercel/next.js/blob/efcec4c1e303848a5293cef6961be8f73fd5160b/packages/next/src/server/web/utils.ts#L108-L119

mirshko commented 1 year ago

Can we get more eyes on @BlakeThomson-at! This is a blocker for us!

delasy commented 1 year ago

Man... I spent entire day trying to fix that... Is there any temporary solution? Here's repository reproducing the problem: delasy/airtable-nextjs-malformed-url

markhughes commented 1 year ago

Here is how you can get around it. I would suggest not using Airtable as their dev relations is terrible, I have tried many avenues to poke them about this.

  1. add patch-package to your project
  2. create a "patches" directory
  3. add the attached patch to the directory "patches"
  4. execute patch-package (yarn patch-package, npx patch-package, etc..)
  5. add patch-package to your postinstall for package.json

airtable+0.12.1.patch