Gatsby 3 - `gatsby build` не работает на 'Построение статического HTML для страниц' с ошибкой 'WebpackError: ReferenceError:… не определено' (firebase/app)
При запуске процесс не выполняется на Gatsby v3.
Немного контекста ... Модули firebase включаются в настраиваемый хук (код, показывающий это, приведен ниже).
В gatsby-node есть настраиваемая функция конфигурации веб-пакета, которая использует внешнюю функцию веб-пакета, чтобы отложить загрузку этого модуля на этапе сборки до времени выполнения в браузере пользователя (код, показывающий это, также приведен ниже).
Я обновил все соответствующие пакеты до текущих версий, и у меня нет соответствующих ошибок зависимостей или устаревших пакетов.
Если нужен какой-либо другой контекст, дайте мне знать, более подробная информация и примеры приведены ниже.
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
Я исправил предыдущую ошибку, из-за которой пользовательская внешняя функция webpack вызывалась некорректно после обновления с gatsby 2 до gatsby 3.
Код в 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, ниже приведены строки импорта из моего настраиваемого хука 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
Однако я не уверен, дальше это или нет, чем последняя попытка ...
2 ответа
Пожалуйста, попробуйте эту настройку.
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 с Firebase - WebpackError: ReferenceError: IDBIndex не определен
Удачи.
Похоже, вы пошли дальше с последней попыткой, поскольку реализация Firebase дает сбой не по основным методам, а по самой реализации.
Я столкнулся с той же проблемой несколько недель назад, и я следил за этой веткой GitHub , где предоставленное решение помогло мне в моем случае. В вашем случае, поскольку это индивидуальная реализация, вам может потребоваться немного ее адаптировать.
Идея основана на ленивой загрузке импорта модуля 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-to General-at-last , что вы можете дать несколько советов.