Search code examples
javascriptreactjsnext.jsairtable

Getting "URL is malformed "". Please use only absolute URLs" error in Next JS app when attempting to use Airtable JS library in Page

I have a Next JS app with a Page somePage.js. I would like to make an XHR request to the Airtable API from within getServerSideProps. The truncated component is as follows:

pages/somePage.js

import { Component } from 'react';
import Airtable from 'airtable';

export const config = {
  runtime: 'experimental-edge',
};

export async function getServerSideProps({ query }) {

  Airtable.configure({
      endpointUrl: 'https://api.airtable.com',
      apiKey: process.env.AIRTABLE_API_KEY,
  })
  const base = Airtable.base(process.env.AIRTABLE_BASE);
  base('someTable').select({...});
  return { props: { items: [] } };
}

class SomePage extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (<>...</>);
  }
}
export default SomePage;

I get the following error when I do yarn run next dev:

Error: URL is malformed "". Please use only absolute URLs - https://nextjs.org/docs/messages/middleware-relative-urls

This error happened while generating the page. Any console logs will be displayed in the terminal window.

With a stack trace starting in node_modules/next and ending in node_modules/airtable.

The error goes away if I remove airtable related code.

The website linked in the error indicates that URLs must be absolute when used in specific functions (none of which are used in my app in my code, I checked), specifically, in middleware, as in the Next.js middleware paradigm (within a middleware directory, which I also don't have). I assumed the airtable.js library was trying to do some relative query, which I tried to resolve by setting the endpointUrl explicitly, but that didn't solve the issue.

I also tried doing Airtable.configure outside of getServerSideProps, but that didn't change the error.

I checked various other answers on stackoverflow, but their issues all resolved around using middleware, which I don't do, and anyway, their answers didn't seem to be relevant to my issue:

Next JS - Middlewares - Error: URLs is malformed. Please use only absolute URLs : to my knowledge, I'm not making relative URL request

Next JS Middlewares - URLs is malformed. Please use only absolute URLs : same as above

I checked the Airtable API docs, as well as the airtable.js library, but didn't find anything about ensuring all URLs are absolute, nor any helpful tutorials about using next.js with airtable. The tutorials I did find didn't seem to be using airtable in any significantly different way than me.

According to my understanding of the getServerSideProps paradigm of next.js, I should be able to make cross-origin API calls within this function, so I don't see why it would be specifically disallowed.

How can I make API calls to Airtable from within Next JS getServerSideProps?

My versions are as follows:

"airtable": "^0.11.6",
"next": "^13.1.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"webpack": "^4.29.6"

Edit: I have confirmed that literally just importing airtable, or requiring it, causes the error. No need to invoke it.

Edit: This seems to be related to the experimental edge runtime.

Solution

  • This is because the experimental edge runtime is incompatible with the airtable.js library, for various reasons. I don't know the exact cause of the mentioned bug, but basically the experimental edge runtime isn't node, and therefore the airtable library is using incompatible APIs.

    See: https://github.com/vercel/next.js/discussions/44843 https://community.cloudflare.com/t/is-the-airtable-js-library-compatible-with-cloudflare-pages/452308/2

    Airtable js can be used with nextjs, just not on cloudflare, because cloudflare requires experimental edge runtime for serverside rendered next.js. The deployment solution will have to be able to run the next.js node server if you want to use airtablejs for a serverside rendered app.