Gatsby / webpack - окно WebpackError не определяется - где?

Question

При запуске сборки gatsby я получаю следующую ошибку:

Я знаю, как ее исправить (например, проверить typedef окна), но я не могу найти использование этого окна? Как я могу узнать где это? Я подозреваю модуль узла, поскольку в моем собственном коде не так много ссылок на окна

Большое спасибо

failed Building static HTML for pages - 10.845s

 ERROR #95312 

"window" is not available during server side rendering.

See our docs page for more info on this error: https://gatsby.dev/debug-html





  WebpackError: ReferenceError: window is not defined
  
  - build-html.js:110 doBuildPages
    /[gatsby]/dist/commands/build-html.js:110:24
  
  - build-html.js:124 async buildHTML
    /[gatsby]/dist/commands/build-html.js:124:3
  
  - build.js:206 async build
    /[gatsby]/dist/commands/build.js:206:5

Answer 1

Удаляйте пакеты сторонних узлов по одному, чтобы найти модуль, вызывающий нарушение. Затем вам нужно будет либо разветвить этот пакет и исправить его, чтобы он не использовал объект window, либо найти альтернативный пакет.

Answer 2

Спасибо за все остальные ответы

Я попробовал ответить @Raz Ronen, но изменение globalObject вызвало другие проблемы, такие как undefined localStorage.

Я попытался удалить все модули узлов, но этого не произошло help.

Как ни странно, после удаления узловых модулей ошибка изменилась, и я увидел строку! ошибки. Это было в собственном "методе навигации" Гэтсби. чтобы поместить навигацию в ловушку useEffect, чтобы решить проблему следующим образом:

const PrivateRoute = ({ component: Component, location, ...rest }) => {
  const user = useContext(AuthenticationContext)
  useEffect(() => {
    checkLoginStatus()
  }, [])

  const checkLoginStatus = () => {
    if (!user && location.pathname !== `/login`) {
      navigate("/login")
    }
  }

  return <Component {...rest} />
}

Answer 3

Как вы сказали, если вы не используете window в своем коде (способ исправить это проверить, определено ли оно с помощью typeof), проблема возникает из-за одной из ваших сторонних зависимостей, которые используют window как глобальный объект в собственном коде.

Вы должны найти, какой из них, и добавить загрузчик null в конфигурацию вашего веб-пакета. В вашем gatsby-node.js:

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === "build-html") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /bad-module/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}

В приведенном выше коде /bad-module/ - это зависимость в node_modules, которую вы хотите избежать транспиляции. По сути, вы заменяете вызывающий ошибку модуль фиктивным модулем во время рендеринга сервера.

Answer 4

Возможно, вам поможет настройка globalObject .

output: {
    globalObject: "this",
  }

По умолчанию globalObject window.