我收到gatsby-development的错误。它与这个非常相似：https://github.com/firebase/firebase-js-sdk/issues/2222，但我收到了盖茨比开发的错误，而不是盖茨比构建的错误。我做了很多研究，但找不到有效的解决方案。起初，我对gatsby-build有一个问题，比如在这篇文章中：https://github.com/firebase/firebase-js-sdk/issues/2222，但我使用自定义onCreateWebpackConfig解决了它(您可以在下面找到它(。
堆栈：-盖茨比-Firebase(可能有错误(-Redux
我还删除了.cache和node_modules，并重新安装了所有内容，但没有成功。
错误：
There was an error compiling the html.js component for the development server.
See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html ReferenceError: IDBIndex is not defined
]);
86 |
> 87 | proxyRequestMethods(Index, '_index', IDBIndex, [
| ^
88 | 'get',
89 | 'getKey',
90 | 'getAll',
WebpackError: ReferenceError: IDBIndex is not defined
- idb.mjs:87 Module../node_modules/idb/lib/idb.mjs
node_modules/idb/lib/idb.mjs:87:1
- index.esm.js:1 Module../node_modules/@firebase/installations/dist/index.esm.js
node_modules/@firebase/installations/dist/index.esm.js:1:1
- index.esm.js:1 Module../node_modules/@firebase/analytics/dist/index.esm.js
node_modules/@firebase/analytics/dist/index.esm.js:1:1
- index.esm.js:1 Module../node_modules/firebase/analytics/dist/index.esm.js
node_modules/firebase/analytics/dist/index.esm.js:1:1
- index.ts:1 Module../src/firebase/index.ts
src/firebase/index.ts:1:1
- index.esm.js:32 emit
node_modules/@firebase/analytics/dist/index.esm.js:32:1
我的盖茨比节点文件：
exports.onCreateWebpackConfig = ({ stage, actions, getConfig }) => {
if (stage === 'build-html') {
actions.setWebpackConfig({
externals: getConfig().externals.concat(function(context, request, callback) {
const regex = /^@?firebase(/(.+))?/;
if (regex.test(request)) {
return callback(null, `umd ${request}`);
}
callback();
}),
});
}
};
我的firebase依赖项：
"@firebase/firestore-types": "^1.10.1",
"firebase": "^7.13.1",
"firebase-admin": "^8.10.0",
"firebase-functions": "^3.5.0",
"firebase-tools": "^7.16.1",
Firebase索引文件：
import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';
import 'firebase/storage';
import 'firebase/analytics';
const firebaseConfig = {...};
firebase.initializeApp(firebaseConfig);
export const firestore = firebase.firestore();
export const auth = firebase.auth();
export const storage = firebase.storage();
项目回购：https://github.com/olafsulich/Projecty
关于Github问题的帖子：https://github.com/firebase/firebase-js-sdk/issues/2946
提前谢谢。
由于您的条件(stage === 'build-html'(，以下代码段仅适用于build环境：
exports.onCreateWebpackConfig = ({ stage, actions, getConfig }) => {
if (stage === 'build-html') {
actions.setWebpackConfig({
externals: getConfig().externals.concat(function(context, request, callback) {
const regex = /^@?firebase(/(.+))?/;
if (regex.test(request)) {
return callback(null, `umd ${request}`);
}
callback();
}),
});
}
};
删除它并像这样使用：
exports.onCreateWebpackConfig = ({ stage, actions, getConfig }) => {
actions.setWebpackConfig({
externals: getConfig().externals.concat(function(context, request, callback) {
const regex = /^@?firebase(/(.+))?/;
if (regex.test(request)) {
return callback(null, `umd ${request}`);
}
callback();
}),
});
};
非常感谢！它只在gatbsy开发上工作，但现在当我要生成项目，我收到一个错误-TypeError:无法读取的属性"concat"未定义。你知道怎么解决吗？
关于新问题，您可以遵循本主题中的解决方法，这是Gatsby中第三方模块在尝试访问应用程序构建时尚未定义的DOM元素(通常为window(时出现的常见错误。因此，您需要等待window被定义。您可以通过两种方式实现这一点：
用这样的条件实例化你的火球：
import firebase from '@firebase/app'; import '@firebase/auth'; import '@firebase/firestore'; import '@firebase/functions'; const config = { ... firebase config here }; let instance; export default function getFirebase() { if (typeof window !== 'undefined') { if (instance) return instance; instance = firebase.initializeApp(config); return instance; } return null; }注意
if (typeof window !== 'undefined')语句通过忽略webpack配置中的firebase模块，如显示他们的文档。在您的
gatsby-node.js:中exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => { if (stage === "build-html") { actions.setWebpackConfig({ module: { rules: [ { test: /bad-module/, use: loaders.null(), }, ], }, }) } }将
bad module替换为firebase(或node_modules中的包/文件夹名称(。保留斜线，因为test是正则表达式规则这个片段替换了您以前在
concat()函数中抛出错误的片段。
对于那些想尝试concat()分辨率的人来说，这也会很有帮助：
exports.onCreateWebpackConfig = ({ stage, actions, getConfig }) => {
if (stage === 'build-html') {
actions.setWebpackConfig({
externals: getConfig().externals.concat((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()
}),
})
}
}
解决了这个问题
我正在使用"gatsby"："3.10.2"firebase"："9.0.0β6〃；。
firebase需要将externals设置为commonjs。
gatsby-node.js:
exports.onCreateWebpackConfig = ({ stage, actions, getConfig }) => {
if (stage === 'build-html') {
actions.setWebpackConfig({
externals: getConfig().externals.concat((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()
}),
})
}
}
请尝试此设置。