- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
当运行 gatsby build
时,该过程在 Gatsby v3 上失败。
一些上下文......Firebase 模块包含在自定义 Hook 中(显示代码如下)。
在 gatsby-node 中有一个自定义的 webpack 配置函数,它使用 webpack 外部特性来推迟在构建阶段加载此模块,直到在用户浏览器中运行时加载(显示此代码也在下面)。
我已经将所有相关包更新到当前版本并且没有相关的依赖错误或过时的包。
如果需要任何其他上下文,请告诉我,更多信息和示例如下。
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 外部函数被错误调用。
配置 webpack 外部的 gatsby-node 中的代码可能直接相关,目前看起来像这样:
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 模块直接相关,下面是来 self 的自定义 useFirebase Hook 的导入行(这之前取自另一个堆栈溢出线程或 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
但是,我不确定这是否比上次尝试更进一步...
最佳答案
看来您在上次尝试中走得更远,因为 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 ,有什么可以给点建议的。
关于node.js - Gatsby 3 – `gatsby build` 在 'Building static HTML for pages' 上失败,错误为 'WebpackError: ReferenceError: ... is not defined' (firebase/app),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66934602/
我已经使用 vue-cli 两个星期了,直到今天一切正常。我在本地建立这个项目。 https://drive.google.com/open?id=0BwGw1zyyKjW7S3RYWXRaX24tQ
您好,我正在尝试使用 python 库 pytesseract 从图像中提取文本。请找到代码: from PIL import Image from pytesseract import image_
我的错误 /usr/bin/ld: errno: TLS definition in /lib/libc.so.6 section .tbss mismatches non-TLS reference
我已经训练了一个模型,我正在尝试使用 predict函数但它返回以下错误。 Error in contrasts<-(*tmp*, value = contr.funs[1 + isOF[nn]])
根据Microsoft DataConnectors的信息我想通过 this ODBC driver 创建一个从 PowerBi 到 PostgreSQL 的连接器使用直接查询。我重用了 Micros
我已经为 SoundManagement 创建了一个包,其中有一个扩展 MediaPlayer 的类。我希望全局控制这个变量。这是我的代码: package soundmanagement; impo
我在Heroku上部署了一个应用程序。我正在使用免费服务。 我经常收到以下错误消息。 PG::Error: ERROR: out of memory 如果刷新浏览器,就可以了。但是随后,它又随机发生
我正在运行 LAMP 服务器,这个 .htaccess 给我一个 500 错误。其作用是过滤关键字并重定向到相应的域名。 Options +FollowSymLinks RewriteEngine
我有两个驱动器 A 和 B。使用 python 脚本,我在“A”驱动器中创建一些文件,并运行 powerscript,该脚本以 1 秒的间隔将驱动器 A 中的所有文件复制到驱动器 B。 我在 powe
下面的函数一直返回这个错误信息。我认为可能是 double_precision 字段类型导致了这种情况,我尝试使用 CAST,但要么不是这样,要么我没有做对...帮助? 这是错误: ERROR: i
这个问题已经有答案了: Syntax error due to using a reserved word as a table or column name in MySQL (1 个回答) 已关闭
我的数据库有这个小问题。 我创建了一个表“articoli”,其中包含商品的品牌、型号和价格。 每篇文章都由一个 id (ID_ARTICOLO)` 定义,它是一个自动递增字段。 好吧,现在当我尝试插
我是新来的。我目前正在 DeVry 在线学习中级 C++ 编程。我们正在使用 C++ Primer Plus 这本书,到目前为止我一直做得很好。我的老师最近向我们扔了一个曲线球。我目前的任务是这样的:
这个问题在这里已经有了答案: What is an undefined reference/unresolved external symbol error and how do I fix it?
我的网站中有一段代码有问题;此错误仅发生在 Internet Explorer 7 中。 我没有在这里发布我所有的 HTML/CSS 标记,而是发布了网站的一个版本 here . 如您所见,我在列中有
如果尝试在 USB 设备上构建 node.js 应用程序时在我的树莓派上使用 npm 时遇到一些问题。 package.json 看起来像这样: { "name" : "node-todo",
在 Python 中,您有 None单例,在某些情况下表现得很奇怪: >>> a = None >>> type(a) >>> isinstance(a,None) Traceback (most
这是我的 build.gradle (Module:app) 文件: apply plugin: 'com.android.application' android { compileSdkV
我是 android 的新手,我的项目刚才编译和运行正常,但在我尝试实现抽屉导航后,它给了我这个错误 FAILURE: Build failed with an exception. What wen
谁能解释一下?我想我正在做一些非常愚蠢的事情,并且急切地等待着启蒙。 我得到这个输出: phpversion() == 7.2.25-1+0~20191128.32+debian8~1.gbp108
我是一名优秀的程序员,十分优秀!