reactjs Gatsby生成错误：网络包错误：类型错误：apiFn不是函数

wbrvyc0a 于 2023-01-30 发布在 React

关注(0)|答案(1)|浏览(117)

我在这个网站上有动态和静态的减价页面，这个错误是令人惊讶的抛出一个博客文章页面（只是减价）：

failed Building static HTML for pages - 3.005s

 ERROR #95313  HTML.COMPILATION

Building static HTML failed for path "/blog/my-blog-page/"

See our docs page for more info on this error: https://gatsby.dev/debug-html

  74 |
  75 |     try {
> 76 |       const result = apiFn(args, plugin.options)
     |                      ^
  77 |
  78 |       if (result && argTransform) {
  79 |         args = argTransform({ args, result })

  WebpackError: TypeError: apiFn is not a function
  
  - api-runner-ssr.js:76 
    my-project/.cache/api-runner-ssr.js:76:22
  
  - api-runner-ssr.js:69 
    my-project/.cache/api-runner-ssr.js:69:11
  
  - static-entry.js:272 
    my-project/.cache/static-entry.js:272:16
  
  - index.js:93 
    [my-project]/[query-string]/index.js:93:1

阅读Gatsby调试HTML构建文档并添加以下内容后：

flags: {
  DEV_SSR: true
},

到我的gatsby-config.js，我看到以下内容：

Failed to Server Render (SSR)
Error message:
TypeError: apiFn is not a function

File:
node_modules/webidl-conversions/lib/index.js:178:1

Stack:
WebpackError: TypeError: apiFn is not a function
    at my-project/node_modules/webidl-conversions/lib/index.js:178:1
    at my-project/node_modules/webidl-conversions/lib/index.js:173:1
    at my-project/.cache/ssr-develop-static-entry.js:275:8
    at my-project/src/hooks/useIsMarketOpen.ts:30:7
    at my-project/.cache/ssr-develop-static-entry.js:330:19
    at my-project/.cache/caches/gatsby-plugin-offline/app-shell.js:12:3

所以看起来像是webidl-conversions软件包的问题。
有趣的是，网站在开发模式下运行良好，我甚至可以访问该博客页面没有任何问题。
编辑：做了一些软件包清理和升级，仍然得到这个错误，虽然现在它是在一个不同的地方：

Failed to Server Render (SSR)
Error message:
TypeError: apiFn is not a function

File:
node_modules/common-tags/es/splitStringTransformer/index.js:3:1

Stack:
WebpackError: TypeError: apiFn is not a function
    at my-project/node_modules/common-tags/es/splitStringTransformer/index.js:3:1
    at my-project/node_modules/react-dom/cjs/react-dom.development.js:28587:1
    at my-project/node_modules/@microsoft/signalr/dist/esm/DefaultHttpClient.js:18:1
    at my-project/node_modules/react-dom/cjs/react-dom.development.js:28654:1

reactjs

来源：https://stackoverflow.com/questions/75273465/gatsby-build-error-webpackerror-typeerror-apifn-is-not-a-function

1条答案

按热度按时间

kokeuurv1#

我终于让它工作起来了。原来它与任何库、包或我自己的任何源代码都无关。问题是我把我的gatsby-ssr.js修改成了这样：

const wrapWithProvider = require('./wrap-with-provider')

exports.wrapRootElement = wrapWithProvider

显然，Gatsby不喜欢exports.wrapRootElement = wrapWithProvider这种语法，我从SSR文档中找到了更多的例子，我意识到我可以完全摆脱wrap-with-provider.jsx（一种遗留的Gatsby模式），并这样做：

const React = require('react')
const { Provider } = require('react-redux')
const { store, persistor } = require('./src/store/index')
const { PersistGate } = require('redux-persist/integration/react')

exports.wrapRootElement = ({ element }) => {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        {element}
      </PersistGate>
    </Provider>
  )
}

确保在gatsby-browser.js中进行相同的更改（如果有的话）。
现在构建版本又可以工作了，我也没有在开发中遇到SSR错误。

赞(0）回复(0）举报 2023-01-30

我来回答

reactjs Gatsby生成错误：网络包错误：类型错误：apiFn不是函数

1条答案

相关问题

热门标签

最新问答