带有Firebase的GatsbyJS-WebpackError:ReferenceError:IDBIndex未定义 [英] GatsbyJS with Firebase - WebpackError: ReferenceError: IDBIndex is not defined
问题描述
我在 gatsby开发上收到错误消息.与此非常相似: https://github.com/firebase/firebase-js-sdk/issues/2222 ，但是我收到的 gatsby开发而不是gatsby构建错误.我做了很多研究，但是找不到有效的解决方案.最初，我在 gatsby构建时遇到了问题，例如这篇文章:
I'm received error with gatsby develop. It's very similar to this one: https://github.com/firebase/firebase-js-sdk/issues/2222, but I'm received error with gatsby develop, not with gatsby build. I did a lot of research but I can't find working solution. At first I had a problem with gatsby build, like in this post: https://github.com/firebase/firebase-js-sdk/issues/2222, but I resolved it with custom onCreateWebpackConfig(you can find it below).
堆栈:-盖茨比- Firebase(可能与此有关的错误)-Redux
Stack: - Gatsby - Firebase(error probably with that) - Redux
我还要删除.cache和node_modules并重新安装所有内容，但这没有用.
I'm also delete .cache and node_modules and install everything again, but it didn't work.
错误:
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
我的gatsby节点文件:
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
Post on Github issues: https://github.com/firebase/firebase-js-sdk/issues/2946
谢谢.
推荐答案
以下代码段由于您的情况而仅在 build 环境下有效( stage ==='build-html'):
The following snippet will only work on build environment because of your condition (stage === 'build-html'):
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();
}),
});
}
};
删除它并像这样使用它:
Remove it and use it like this:
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".你知道如何解决吗?
Thank's a lot! It's working only on gatbsy develop, but now when I want to build project, I get an error - TypeError: Cannot read property 'concat' of undefined. You know how to solve it?
关于新问题，您可以按照此主题中的解决方法进行操作.，这是Gatsby中第三方模块尝试访问构建应用时尚未定义的DOM元素(通常是 window )的常见错误.因此，您需要等待直到定义了 window .您可以通过两种方式实现这一目标:
Regarding the new issue, you can follow a workaround in this topic, This is a common error in third-party modules in Gatsby when they try to reach a DOM element (usually window) that is not already defined when the app builds. So, you need to wait until window is defined. You can achieve this in two ways:
1)使用以下条件增强您的Firebase:
1) Instancing your firebase with a condition like this:
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')语句
2)通过忽略Webpack配置中的firebase模块，例如显示其文档.在您的 gatsby-node.js 中:
2) By ignoring firebase module in you webpack configuration like shows their docs. In your gatsby-node.js:
exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
if (stage === "build-html") {
actions.setWebpackConfig({
module: {
rules: [
{
test: /bad-module/,
use: loaders.null(),
},
],
},
})
}
}
替换Firebase(或程序包名称)的错误模块"
此代码段替换了您先前的似乎在 concat()函数中引发错误的代码段.
This snippet replaces your previous one that seems to throw an error in concat() function.
这篇关于带有Firebase的GatsbyJS-WebpackError:ReferenceError:IDBIndex未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
