Node.js 盖茨比3&x2013`盖茨比构建`在'上失败；为页面构建静态HTML'；有错误'；WebPackageError:引用错误：。。。未定义'；（firebase/app）_Node.js_Firebase_Webpack_Gatsby_Static Site Generation

Node.js 盖茨比3&x2013`盖茨比构建`在'上失败；为页面构建静态HTML'；有错误'；WebPackageError:引用错误：。。。未定义'；（firebase/app）

node.js firebase webpack gatsby

Node.js 盖茨比3&x2013`盖茨比构建`在'上失败；为页面构建静态HTML'；有错误'；WebPackageError:引用错误：。。。未定义'；（firebase/app）,node.js,firebase,webpack,gatsby,static-site-generation,Node.js,Firebase,Webpack,Gatsby,Static Site Generation,当运行《盖茨比构建》时，进程在《盖茨比v3》上失败一点背景… firebase模块包含在自定义挂钩中（下面的代码显示了这一点） gatsby节点中有一个自定义的webpack config函数，它使用webpack externals功能将在构建阶段加载此模块延迟到用户浏览器中运行时（下面还有显示此功能的代码）我已将所有相关软件包更新为当前版本，并且没有相关的依赖项错误或过时的软件包如果需要任何其他上下文，请让我知道，更多信息和示例如下 gatsby build产生以下错误： succes

当运行《盖茨比构建》时，进程在《盖茨比v3》上失败

一点背景… firebase模块包含在自定义挂钩中（下面的代码显示了这一点）

gatsby节点中有一个自定义的webpack config函数，它使用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

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()
      })
    })
  }
}

  "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"
  }

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

我已经修复了之前的一个错误，即从gatsby 2更新到gatsby 3后，自定义webpack externals函数被错误调用

gatsby节点中配置网页外部的代码可能与此直接相关，目前看起来如下：

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

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()
      })
    })
  }
}

  "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"
  }

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

由于这似乎也与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中的相关模块版本和解析（我想就这些）：

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

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() }) }) } }

"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" }

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
如果有人对此有任何经验或想法，我将不胜感激，谢谢

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

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => { if (stage === 'build-html') { actions.setWebpackConfig({ module: { rules: [ { test: /^@?firebase(\/(.+))?/, use: loaders.null() } ] } }) } }
它将删除旧错误并创建以下错误：

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

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() }) }) } }

"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" }

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

但是，我不确定这是否比上次的尝试更进一步…
看来您在上次的尝试中更进一步了，因为Firebase实现的主要方法并没有失败，而是实现本身失败了
几周前我也遇到过同样的问题，我遵循了这一点，提供的解决方案在我的案例中帮助了我。在您的案例中，由于这是一个自定义实现，您可能需要对其进行一些调整
这个想法依赖于延迟加载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 }); });
我建议如下：，你能给我一些建议吗