Gatsby 3 - `gatsby build` не работает при построении статического HTML для страниц с ошибкой WebpackError: ReferenceError: ... не определен '(firebase / app)

При запуске gatsby build процесс не выполняется на 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

Однако я не уверен, дальше это или нет, чем последняя попытка ...

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
2
0
37
1

Ответы 1

Похоже, вы пошли дальше с последней попыткой, поскольку реализация 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, что вы можете дать несколько советов.

Другие вопросы по теме