Блог

Я работал с репозиторием Gatsby и заметил, что в некоторых случаях, если не все время, когда я вызываю window, мое развертывание завершается ошибкой со следующей ошибкой

 4:57:03 AM: failed Building static HTML for pages - 1.305s
4:57:03 AM: error "window" is not available during server side rendering.
4:57:03 AM: 
4:57:03 AM:   21 | }
4:57:03 AM:   22 | else {
4:57:03 AM: > 23 |     _btoa = btoa.bind(window);
4:57:03 AM:      | ^
4:57:03 AM:   24 |     helpers = function (url) {
4:57:03 AM:   25 |         return new URL(url);
4:57:03 AM:   26 |     };
4:57:03 AM: 
4:57:03 AM:   WebpackError: ReferenceError: window is not defined
4:57:03 AM:   
4:57:03 AM:   - helpers.js:23 
4:57:03 AM:     [gatsby-starter-default]/[web3-providers-ws]/lib/helpers.js:23:1
4:57:03 AM:   
4:57:03 AM:   - bootstrap:19 
4:57:03 AM:     gatsby-starter-default/webpack/bootstrap:19:1
4:57:03 AM:   
4:57:03 AM:   - index.js:24 
4:57:03 AM:     [gatsby-starter-default]/[web3-providers-ws]/lib/index.js:24:15
4:57:03 AM:   
4:57:03 AM:   - bootstrap:19 
4:57:03 AM:     gatsby-starter-default/webpack/bootstrap:19:1
4:57:03 AM:   
4:57:03 AM:   - index.js:44 
4:57:03 AM:     [gatsby-starter-default]/[web3-core-requestmanager]/lib/index.js:44:24
4:57:03 AM:   
4:57:03 AM:   - bootstrap:19 
4:57:03 AM:     gatsby-starter-default/webpack/bootstrap:19:1
4:57:03 AM:   
4:57:03 AM:   - index.js:22 
4:57:03 AM:     [gatsby-starter-default]/[web3-core]/lib/index.js:22:24
4:57:03 AM:   
4:57:03 AM:   - bootstrap:19 
4:57:03 AM:     gatsby-starter-default/webpack/bootstrap:19:1
4:57:03 AM:   
4:57:03 AM:   - index.js:29 
4:57:03 AM:     [gatsby-starter-default]/[web3]/lib/index.js:29:12
4:57:03 AM:   
4:57:03 AM:   - bootstrap:19 
4:57:03 AM:     gatsby-starter-default/webpack/bootstrap:19:1
4:57:03 AM:   
4:57:03 AM:   - bootstrap:19 
4:57:03 AM:     gatsby-starter-default/webpack/bootstrap:19:1
4:57:03 AM:   
4:57:03 AM:   - bootstrap:19 
4:57:03 AM:     gatsby-starter-default/webpack/bootstrap:19:1
4:57:03 AM:   
4:57:03 AM:   - bootstrap:19 
4:57:03 AM:     gatsby-starter-default/webpack/bootstrap:19:1
 

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

 const webpack = require("webpack");

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
    if(stage === "build-htmnl") {
        actions.setWebpackConfig({
            plugins: [
                new webpack.ProvidePlugin({
                    process: 'process/browser',
                }),
            ],
        })
    }
    actions.setWebpackConfig({
        plugins: [
            new webpack.ProvidePlugin({
                Buffer: [require.resolve("buffer/"), "Buffer"],
                process: 'process/browser',
            }),
        ],
        resolve: {
            fallback: {
                "crypto": false,
                "stream": require.resolve("stream-browserify"),
                "assert": false,
                "util": false,
                "http": false,
                "https": false,
                "os": false
            },
        },
    })
}
 

Но как только я это делаю, кажется, что это нарушает разработку из-за того, что я useEffect не выполняю должным образом ни функцию, которую я прикрепил в качестве события onClick к кнопке. Ошибка, которую я получаю, заключается в следующем: Uncaught (in promise) ReferenceError: process is not defined

Есть ли способ, которым я могу решить эту проблему более легко? Я не слишком хорошо знаком с webpack и тем более с тем, как Гэтсби взаимодействует с ним. Я бы предположил, что это так же просто, как условие, находится ли приложение в разработке или в разработке.

Как вы можете видеть при добавлении пользовательских документов конфигурации веб-пакета, stage значение может изменяться через:

• разработка: при выполнении gatsby develop команды. Имеет конфигурацию для горячей перезагрузки и вставки CSS на страницу
• разработка-html: то же, что и разработка, но без react-hmre в конфигурации babel для рендеринга HTML-компонента.
• сборка-javascript: производственная сборка JavaScript и CSS. Создает пакеты JavaScript маршрутов, а также общие блоки для JavaScript и CSS.
• сборка-html: производственная сборка статических HTML-страниц

Так что, да, как вы указали, добавление простого условия должно сработать, чтобы установить process/browse подобное:

 if(stage === "develop"){
  // gatsby develop stuff
}