Question

运行 gatsby build 时，该进程在 Gatsby v3 上失败。

一些上下文... firebase 模块包含在自定义钩子中（显示此内容的代码如下）。

在 gatsby-node 中有一个自定义的 webpack 配置函数，它使用 webpack externals 功能在构建阶段推迟加载这个模块，直到用户浏览器中的运行时（代码显示也在下面）。

我已将所有相关软件包更新为当前版本，并且没有相关的依赖错误或过时的软件包。

如果需要任何其他上下文，请告诉我，更多信息和示例如下。

gatsby build 产生以下错误：

success Building HTML renderer - 17.646s
failed Building static HTML for pages - 0.562s

 ERROR #95313 

Building static HTML failed

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


> 1 | module.exports = __WEBPACK_EXTERNAL_MODULE_firebase_app__;
    | ^


  WebpackError: ReferenceError: __WEBPACK_EXTERNAL_MODULE_firebase_app__ is not defined
  
  - app":1 
    /external "firebase/app":1:1
  
  - bootstrap:19 
    /webpack/bootstrap:19:1
  
  - useFirebase.js:7 
    /src/hooks/useFirebase.js:7:18
  
  - bootstrap:19 
    /webpack/bootstrap:19:1
  
  - bootstrap:19 
    /webpack/bootstrap:19:1
  
  - bootstrap:19 
    /webpack/bootstrap:19:1
  
  - sync-requires.js:7 
    /.cache/_this_is_virtual_fs_path_/$virtual/sync-requires.js:7:49
  
  - bootstrap:19 
    /webpack/bootstrap:19:1
  
  - static-entry.js:11 
    /.cache/static-entry.js:11:22
  
  - utils.js:283 
    /[@gatsbyjs]/reach-router/lib/utils.js:283:1
  
  - plugin.js:5 
    /[@savvywombat]/tailwindcss-grid-areas/src/plugin.js:5:1
  
  - utils.js:163 
    /[@gatsbyjs]/reach-router/lib/utils.js:163:1

我修复了之前的错误，即自 gatsby 2 更新到 gatsby 3 以来，自定义 webpack 外部函数被错误调用。

gatsby-node 中配置 webpack 外部的代码可能直接相关，目前看起来像这样：

exports.onCreateWebpackConfig = ({ stage, actions, getConfig }) => {
  if (stage === 'build-html' || stage === 'develop-html') {
    actions.setWebpackConfig({
      externals: getConfig().externals.concat(({ context, request }, callback) => {
        const regex = /^@?firebase(\/(.+))?/
        if (regex.test(request)) {
          return callback(`umd ${request}`)
        }
        callback()
      })
    })
  }
}

由于这似乎也与 firebase 模块直接相关，下面是来自我的自定义 useFirebase 钩子的导入行（这之前取自另一个堆栈溢出线程或 github 问题，并在 gatsby 中工作2.

...
import firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/firestore'
import 'firebase/storage'
import 'firebase/messaging'

let app
let messaging

const config = {
...
}

// don't initialize untill you're in the browser - required to work with Gatsby
if (typeof window !== 'undefined') {
  app = app || firebase.initializeApp(config)

来自 package.json 的相关模块版本和分辨率（我认为这就是全部）：

  "dependencies": {
    "gatsby": "^3.2.1",
    "@firebase/app": "^0.6.18",
    "@firebase/auth": "^0.16.4",
    "@firebase/firestore": "^2.2.2",
    "@firebase/messaging": "^0.7.7",
    "@firebase/storage": "^0.4.6",
    ...
  }
  "resolutions": {
    "graphql": "^15.4.0",
    "graphql-compose": "^7.25.0",
    "webpack": "^5.24.2"
  }

如果有人对此问题有任何经验或想法，我将不胜感激，谢谢！

更新我尝试用以下替代代码替换 onCreateWebpackConfig：

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === 'build-html') {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /^@?firebase(\/(.+))?/,
            use: loaders.null()
          }
        ]
      }
    })
  }
}

哪个摆脱了旧错误并创建了以下错误：

failed Building static HTML for pages - 0.737s

 ERROR #95313 

Building static HTML failed

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


  85 | ]);
  86 |
> 87 | proxyRequestMethods(Index, '_index', IDBIndex, [
     | ^
  88 |   'get',
  89 |   'getKey',
  90 |   'getAll',


  WebpackError: ReferenceError: IDBIndex is not defined
  
  - idb.mjs:87 
    /[idb]/lib/idb.mjs:87:1
  
  - bootstrap:19 
    /webpack/bootstrap:19:1
  
  - bootstrap:19 
    /webpack/bootstrap:19:1
  
  - bootstrap:19 
    /webpack/bootstrap:19:1
  
  - bootstrap:19 
    /webpack/bootstrap:19:1
  
  - bootstrap:19 
    /webpack/bootstrap:19:1
  
  - bootstrap:19 
    /webpack/bootstrap:19:1
  
  - bootstrap:19 
    /webpack/bootstrap:19:1
  
  - sync-requires.js:7 
    /.cache/_this_is_virtual_fs_path_/$virtual/sync-requires.js:7:49
  
  - bootstrap:19 
    /webpack/bootstrap:19:1

但是，我不确定这是否比上次尝试更进一步...

Answer 1

请尝试此设置。

gatsby-node.js：

exports.onCreateWebpackConfig = ({
  stage,
  actions,
  getConfig
}) => {
  if (stage === 'build-html') {
    actions.setWebpackConfig({
      externals: getConfig().externals.concat(function(context, request, callback) {
        const regex = /^@?firebase(\/(.+))?/;
        // exclude firebase products from being bundled, so they will be loaded using require() at runtime.
        if (regex.test(request)) {
          return callback(null, 'commonjs ' + request); // <- use commonjs!
        }
        callback();
      })
    });
  }
};

我参考了以下评论。重点是使用commonjs。 https://github.com/firebase/firebase-js-sdk/issues/2222#issuecomment-538072948

我已经回答了同样的问题。 GatsbyJS with Firebase - WebpackError: ReferenceError: IDBIndex is not defined

祝你好运。

Answer 2

您似乎在最后一次尝试中走得更远，因为 Firebase 实现不是主要方法失败，而是实现本身失败。

几周前我遇到了同样的问题，我关注了这个 GitHub thread，其中提供的解决方案对我的情况有所帮助。在您的应用中，由于它是自定义实现，您可能需要对其进行一些调整。

这个想法依赖于延迟加载 Firebase 模块导入（动态导入）。在使用 Firebase 的最高组件中，像这样导入：

import('firebase').then(firebase => {
  firebase.initializeApp({ /* firebaseConfig goes here */});
  firebase.firestore().collection('items').doc('yJd1Fs5Ampttq6QKBoYF').get()
    .then(doc => {
      // do stuff with Firestore data
    });
});

我建议阅读以下内容：https://kyleshevlin.com/firebase-and-gatsby-together-at-last，您有什么建议。

Gatsby 3 – `gatsby build` 在 'Building static HTML for pages' 失败，错误为 'WebpackError: ReferenceError: ... is not defined' (firebase/app)

2 个答案: