reactjs 尝试在Page中使用Airtable JS库时,Next JS应用程序中出现“URL格式错误",请仅使用绝对URL”错误

8tntrjer  于 2023-01-17  发布在  React
关注(0)|答案(1)|浏览(119)

我有一个Next JS应用,页面为somePage.js。我想从getServerSideProps中向Airtable API发出XHR请求。截断的组件如下所示:

  • 页/部分页.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;

当我执行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.

堆栈跟踪从node_modules/next开始,到node_modules/airtable结束。
如果我删除airtable相关代码,错误就会消失。
错误中链接的网站指示在特定函数中使用URL时,URL必须是绝对的(我检查了一下,我的应用程序在我的代码中没有用到这些),特别是在中间件中,如Next.js中间件范例(在middleware目录中,我也没有这个目录)我假设airtable.js库正在尝试执行一些相对查询,我试图通过显式设置endpointUrl来解决这个问题,但这并没有解决这个问题。
我还尝试在getServerSideProps之外执行Airtable.configure,但这并没有改变错误。
我检查了关于stackoverflow的各种其他答案,但他们的问题都是围绕使用中间件解决的,我不这样做,而且无论如何,他们的答案似乎与我的问题无关:
Next JS - Middlewares - Error: URLs is malformed. Please use only absolute URLs:据我所知,我没有进行相对URL请求
Next JS Middlewares - URLs is malformed. Please use only absolute URLs:同上
我查看了Airtable API文档,以及airtable.js库,但没有找到任何关于确保所有URL都是绝对的内容,也没有任何关于在airtable中使用next.js的有用教程。我找到的教程似乎与我使用airtable的方式没有任何显著不同。
根据我对next.js的getServerSideProps范例的理解,我应该能够在这个函数中进行跨源API调用,所以我不明白为什么要特别禁止它。

如何从Next JS getServerSideProps中对Airtable进行API调用?

我的版本如下:

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

编辑:我已经确认了仅仅是导入airtable,或者需要它,就会导致这个错误。不需要调用它。
编辑:这似乎与实验性的edge运行时有关。

6rqinv9w

6rqinv9w1#

这是因为实验性的edge运行时与airtable.js库不兼容,原因很多,我不知道这个bug的确切原因,但基本上实验性的edge运行时不是node,因此airtable库使用了不兼容的API。
参见:https://github.com/vercel/next.js/discussions/44843https://community.cloudflare.com/t/is-the-airtable-js-library-compatible-with-cloudflare-pages/452308/2
Airtable js可以和nextjs一起使用,只是不能在cloudflare上使用,因为cloudflare需要实验性的edge运行时来运行服务器端呈现的next.js。如果你想使用airtable js来运行服务器端呈现的应用程序,部署解决方案必须能够运行next.js节点服务器。

相关问题