gatsby 问题：将 gatsby 站点部署到 netlify 时找不到命令
Problem with gatsby: command not found when deploying gatsby site to netlify
我正在尝试将 gatsby 站点部署到 Netlify。我将 gatsby 项目中 public 目录中的所有文件提交到我的 github 存储库，然后将该存储库部署到 netlify 上，但出现错误。
推送到 github 除 public 之外的所有文件和目录然后部署后，我收到以下错误：
12:23:37 PM:
12:23:37 PM: ┌─────────────────────────────┐
12:23:37 PM: │ Netlify Build │
12:23:37 PM: └─────────────────────────────┘
12:23:37 PM:
12:23:37 PM: ❯ Version
12:23:37 PM: @netlify/build 3.3.0
12:23:37 PM:
12:23:37 PM: ❯ Flags
12:23:37 PM: deployId: 5f4637d3e090c2ab4a26309c
12:23:37 PM: mode: buildbot
12:23:37 PM:
12:23:37 PM: ❯ Current directory
12:23:37 PM: /opt/build/repo
12:23:37 PM:
12:23:37 PM: ❯ Config file
12:23:37 PM: No config file was defined: using default values.
12:23:37 PM:
12:23:37 PM: ❯ Context
12:23:37 PM: production
12:23:37 PM:
12:23:37 PM: ┌───────────────────────────────────┐
12:23:37 PM: │ 1. Build command from Netlify app │
12:23:37 PM: └───────────────────────────────────┘
12:23:37 PM:
12:23:37 PM: $ gatsby build
12:23:40 PM: success open and validate gatsby-configs - 0.022s
12:23:40 PM: success load plugins - 0.498s
12:23:40 PM: success onPreInit - 0.040s
12:23:40 PM: success delete html and css files from previous builds - 0.002s
12:23:40 PM: success initialize cache - 0.006s
12:23:41 PM: success copy gatsby files - 0.028s
12:23:41 PM: success onPreBootstrap - 0.005s
12:23:41 PM: success createSchemaCustomization - 0.006s
12:23:41 PM: success Checking for changed pages - 0.000s
12:23:41 PM: success source and transform nodes - 0.086s
12:23:41 PM: success building schema - 0.271s
12:23:41 PM: success createPages - 0.001s
12:23:41 PM: success Checking for changed pages - 0.000s
12:23:41 PM: success createPagesStatefully - 0.067s
12:23:41 PM: success update schema - 0.023s
12:23:41 PM: success onPreExtractQueries - 0.001s
12:23:43 PM: success extract queries from components - 2.444s
12:23:43 PM: success write out redirect data - 0.001s
12:23:43 PM: success onPostBootstrap - 0.000s
12:23:43 PM: info bootstrap finished - 6.517s
12:23:44 PM: success run static queries - 0.017s - 1/1 60.34/s
12:23:44 PM: success run page queries - 0.004s - 1/1 241.80/s
12:23:44 PM: success write out requires - 0.004s
12:24:11 PM: success Building production JavaScript and CSS bundles - 27.400s
12:24:11 PM: success Rewriting compilation hashes - 0.002s
12:24:15 PM: failed Building static HTML for pages - 3.641s
12:24:15 PM: error "document" is not available during server side rendering.
12:24:15 PM:
12:24:15 PM: > 1 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.AOS=t():e.AOS=t()}(this,function(){return function(e){function t(o){if(n[o])return n[o].exports;var i=n[o]={exports:{},id:o,loaded:!1};return e[o].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var n={};return t.m=e,t.c=n,t.p="dist/",t(0)}([function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}var i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},r=n(1),a=(o(r),n(6)),u=o(a),c=n(7),s=o(c),f=n(8),d=o(f),l=n(9),p=o(l),m=n(10),b=o(m),v=n(11),y=o(v),g=n(14),h=o(g),w=[],k=!1,x={offset:120,delay:0,easing:"ease",duration:400,disable:!1,once:!1,startEvent:"DOMContentLoaded",throttleDelay:99,debounceDelay:50,disableMutationObserver:!1},j=function(){var e=arguments.length>0&&void
12:24:15 PM: | ^
12:24:15 PM:
12:24:15 PM: WebpackError: ReferenceError: document is not defined
12:24:15 PM:
12:24:15 PM: - aos.js:1
12:24:15 PM: node_modules/aos/dist/aos.js:1:14565
12:24:15 PM:
12:24:15 PM: - aos.js:1
12:24:15 PM: node_modules/aos/dist/aos.js:1:1506
12:24:15 PM:
12:24:15 PM: - Technologie.js:8
12:24:15 PM: src/components/Technologie.js:8:5
12:24:15 PM:
12:24:15 PM: - index.js:1
12:24:15 PM: src/pages/index.js:1:1
12:24:15 PM:
12:24:15 PM: - getLayoutRect.js:1
12:24:15 PM: node_modules/@popperjs/core/lib/dom-utils/getLayoutRect.js:1:1
12:24:15 PM:
12:24:15 PM:
12:24:15 PM:
12:24:15 PM: ┌─────────────────────────────┐
12:24:15 PM: │ "build.command" failed │
12:24:15 PM: └─────────────────────────────┘
12:24:15 PM:
12:24:15 PM: Error message
12:24:15 PM: Command failed with exit code 1: gatsby build
12:24:15 PM:
12:24:15 PM: Error location
12:24:15 PM: In Build command from Netlify app:
12:24:15 PM: gatsby build
12:24:15 PM:
12:24:15 PM: Resolved config
12:24:15 PM: build:
12:24:15 PM: command: gatsby build
12:24:15 PM: commandOrigin: ui
12:24:15 PM: publish: /opt/build/repo/public
12:24:15 PM: Caching artifacts
12:24:15 PM: Started saving node modules
12:24:15 PM: Finished saving node modules
12:24:15 PM: Started saving build plugins
12:24:15 PM: Finished saving build plugins
12:24:15 PM: Started saving pip cache
12:24:15 PM: Finished saving pip cache
12:24:15 PM: Started saving emacs cask dependencies
12:24:15 PM: Finished saving emacs cask dependencies
12:24:15 PM: Started saving maven dependencies
12:24:15 PM: Finished saving maven dependencies
12:24:15 PM: Started saving boot dependencies
12:24:15 PM: Finished saving boot dependencies
12:24:15 PM: Started saving go dependencies
12:24:15 PM: Finished saving go dependencies
12:24:18 PM: Error running command: Build script returned non-zero exit code: 1
12:24:18 PM: Failing build: Failed to build site
12:24:18 PM: Failed during stage 'building site': Build script returned non-zero exit code: 1
12:24:19 PM: Finished processing build request in 2m5.540557721s
有什么建议吗？提前致谢。
那里有一个过程误解。在您的存储库中，您应该提交除 /public 文件夹之外的所有文件，因为它是将在 Netlify 的构建和部署过程中生成的文件。此外，您的 netlify.toml 没有向 Netlify 添加任何有用的命令，因为它们默认添加在仪表板中。如您所见：
注意：您可以在https://app.netlify.com/sites/YOUR_PROJECT_NAME/settings/deploys
下找到此配置
您的命令失败，因为您正在您的存储库中执行 Netlify 工作。您上传的构建文件夹 (/public) 不包含任何 package.json 或构建命令，因此无法识别您的命令。
您必须上传存储库中除 /public 文件夹之外的所有文件，并让 Netlify 执行构建过程。此外，您可以通过删除默认命令来改进 netlify.toml。
根据新编辑的内容推断
在将其推送到 Netlify 之前，此构建也必须在本地失败。在 Gatsby 中，您必须在使用前检查全局对象的可用性（如 window 或 document）。
这是一个广泛的问题并传播它的话题。如果错误在您的代码中（您正在使用 document 对象），您需要先添加一个条件：
If (typeof document !== 'undefined') {
//Your code here
}
如果错误来自外部来源（内部使用 window 或 document 的库或依赖项），您需要在 webpack 的配置中添加空加载程序：
exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
if (stage === "build-html") {
actions.setWebpackConfig({
module: {
rules: [
{
test: /bad-module/,
use: loaders.null(),
},
],
},
})
}
}
正在将 /bad-module/ 替换为 node_modules 中的库路径。
您可以在 Debugging HTML Builds Documentation
中查看更多详细信息
要正确添加 AOS 包，请将其添加到您的 page/component:
componentDidMount() {
const AOS = require('aos');
this.aos = AOS this.aos.init()
}
componentDidUpdate() {
this.aos.refresh()
}
或使用钩子：
let AOS;
useEffect(() => {
/** * Server-side rendering does not provide the 'document' object
* therefore this import is required either in useEffect or componentDidMount as they
* are exclusively executed on a client */
const AOS = require("aos");
AOS.init({ once: true, }); }, []);
useEffect(() => { if (AOS) { AOS.refresh(); } });
我正在尝试将 gatsby 站点部署到 Netlify。我将 gatsby 项目中 public 目录中的所有文件提交到我的 github 存储库，然后将该存储库部署到 netlify 上，但出现错误。
推送到 github 除 public 之外的所有文件和目录然后部署后，我收到以下错误：
12:23:37 PM:
12:23:37 PM: ┌─────────────────────────────┐
12:23:37 PM: │ Netlify Build │
12:23:37 PM: └─────────────────────────────┘
12:23:37 PM:
12:23:37 PM: ❯ Version
12:23:37 PM: @netlify/build 3.3.0
12:23:37 PM:
12:23:37 PM: ❯ Flags
12:23:37 PM: deployId: 5f4637d3e090c2ab4a26309c
12:23:37 PM: mode: buildbot
12:23:37 PM:
12:23:37 PM: ❯ Current directory
12:23:37 PM: /opt/build/repo
12:23:37 PM:
12:23:37 PM: ❯ Config file
12:23:37 PM: No config file was defined: using default values.
12:23:37 PM:
12:23:37 PM: ❯ Context
12:23:37 PM: production
12:23:37 PM:
12:23:37 PM: ┌───────────────────────────────────┐
12:23:37 PM: │ 1. Build command from Netlify app │
12:23:37 PM: └───────────────────────────────────┘
12:23:37 PM:
12:23:37 PM: $ gatsby build
12:23:40 PM: success open and validate gatsby-configs - 0.022s
12:23:40 PM: success load plugins - 0.498s
12:23:40 PM: success onPreInit - 0.040s
12:23:40 PM: success delete html and css files from previous builds - 0.002s
12:23:40 PM: success initialize cache - 0.006s
12:23:41 PM: success copy gatsby files - 0.028s
12:23:41 PM: success onPreBootstrap - 0.005s
12:23:41 PM: success createSchemaCustomization - 0.006s
12:23:41 PM: success Checking for changed pages - 0.000s
12:23:41 PM: success source and transform nodes - 0.086s
12:23:41 PM: success building schema - 0.271s
12:23:41 PM: success createPages - 0.001s
12:23:41 PM: success Checking for changed pages - 0.000s
12:23:41 PM: success createPagesStatefully - 0.067s
12:23:41 PM: success update schema - 0.023s
12:23:41 PM: success onPreExtractQueries - 0.001s
12:23:43 PM: success extract queries from components - 2.444s
12:23:43 PM: success write out redirect data - 0.001s
12:23:43 PM: success onPostBootstrap - 0.000s
12:23:43 PM: info bootstrap finished - 6.517s
12:23:44 PM: success run static queries - 0.017s - 1/1 60.34/s
12:23:44 PM: success run page queries - 0.004s - 1/1 241.80/s
12:23:44 PM: success write out requires - 0.004s
12:24:11 PM: success Building production JavaScript and CSS bundles - 27.400s
12:24:11 PM: success Rewriting compilation hashes - 0.002s
12:24:15 PM: failed Building static HTML for pages - 3.641s
12:24:15 PM: error "document" is not available during server side rendering.
12:24:15 PM:
12:24:15 PM: > 1 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.AOS=t():e.AOS=t()}(this,function(){return function(e){function t(o){if(n[o])return n[o].exports;var i=n[o]={exports:{},id:o,loaded:!1};return e[o].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var n={};return t.m=e,t.c=n,t.p="dist/",t(0)}([function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}var i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},r=n(1),a=(o(r),n(6)),u=o(a),c=n(7),s=o(c),f=n(8),d=o(f),l=n(9),p=o(l),m=n(10),b=o(m),v=n(11),y=o(v),g=n(14),h=o(g),w=[],k=!1,x={offset:120,delay:0,easing:"ease",duration:400,disable:!1,once:!1,startEvent:"DOMContentLoaded",throttleDelay:99,debounceDelay:50,disableMutationObserver:!1},j=function(){var e=arguments.length>0&&void
12:24:15 PM: | ^
12:24:15 PM:
12:24:15 PM: WebpackError: ReferenceError: document is not defined
12:24:15 PM:
12:24:15 PM: - aos.js:1
12:24:15 PM: node_modules/aos/dist/aos.js:1:14565
12:24:15 PM:
12:24:15 PM: - aos.js:1
12:24:15 PM: node_modules/aos/dist/aos.js:1:1506
12:24:15 PM:
12:24:15 PM: - Technologie.js:8
12:24:15 PM: src/components/Technologie.js:8:5
12:24:15 PM:
12:24:15 PM: - index.js:1
12:24:15 PM: src/pages/index.js:1:1
12:24:15 PM:
12:24:15 PM: - getLayoutRect.js:1
12:24:15 PM: node_modules/@popperjs/core/lib/dom-utils/getLayoutRect.js:1:1
12:24:15 PM:
12:24:15 PM:
12:24:15 PM:
12:24:15 PM: ┌─────────────────────────────┐
12:24:15 PM: │ "build.command" failed │
12:24:15 PM: └─────────────────────────────┘
12:24:15 PM:
12:24:15 PM: Error message
12:24:15 PM: Command failed with exit code 1: gatsby build
12:24:15 PM:
12:24:15 PM: Error location
12:24:15 PM: In Build command from Netlify app:
12:24:15 PM: gatsby build
12:24:15 PM:
12:24:15 PM: Resolved config
12:24:15 PM: build:
12:24:15 PM: command: gatsby build
12:24:15 PM: commandOrigin: ui
12:24:15 PM: publish: /opt/build/repo/public
12:24:15 PM: Caching artifacts
12:24:15 PM: Started saving node modules
12:24:15 PM: Finished saving node modules
12:24:15 PM: Started saving build plugins
12:24:15 PM: Finished saving build plugins
12:24:15 PM: Started saving pip cache
12:24:15 PM: Finished saving pip cache
12:24:15 PM: Started saving emacs cask dependencies
12:24:15 PM: Finished saving emacs cask dependencies
12:24:15 PM: Started saving maven dependencies
12:24:15 PM: Finished saving maven dependencies
12:24:15 PM: Started saving boot dependencies
12:24:15 PM: Finished saving boot dependencies
12:24:15 PM: Started saving go dependencies
12:24:15 PM: Finished saving go dependencies
12:24:18 PM: Error running command: Build script returned non-zero exit code: 1
12:24:18 PM: Failing build: Failed to build site
12:24:18 PM: Failed during stage 'building site': Build script returned non-zero exit code: 1
12:24:19 PM: Finished processing build request in 2m5.540557721s
有什么建议吗？提前致谢。
那里有一个过程误解。在您的存储库中，您应该提交除 /public 文件夹之外的所有文件，因为它是将在 Netlify 的构建和部署过程中生成的文件。此外，您的 netlify.toml 没有向 Netlify 添加任何有用的命令，因为它们默认添加在仪表板中。如您所见：
注意：您可以在https://app.netlify.com/sites/YOUR_PROJECT_NAME/settings/deploys
下找到此配置您的命令失败，因为您正在您的存储库中执行 Netlify 工作。您上传的构建文件夹 (/public) 不包含任何 package.json 或构建命令，因此无法识别您的命令。
您必须上传存储库中除 /public 文件夹之外的所有文件，并让 Netlify 执行构建过程。此外，您可以通过删除默认命令来改进 netlify.toml。
根据新编辑的内容推断
在将其推送到 Netlify 之前，此构建也必须在本地失败。在 Gatsby 中，您必须在使用前检查全局对象的可用性（如 window 或 document）。
这是一个广泛的问题并传播它的话题。如果错误在您的代码中（您正在使用 document 对象），您需要先添加一个条件：
If (typeof document !== 'undefined') {
//Your code here
}
如果错误来自外部来源（内部使用 window 或 document 的库或依赖项），您需要在 webpack 的配置中添加空加载程序：
exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
if (stage === "build-html") {
actions.setWebpackConfig({
module: {
rules: [
{
test: /bad-module/,
use: loaders.null(),
},
],
},
})
}
}
正在将 /bad-module/ 替换为 node_modules 中的库路径。
您可以在 Debugging HTML Builds Documentation
中查看更多详细信息要正确添加 AOS 包，请将其添加到您的 page/component:
componentDidMount() {
const AOS = require('aos');
this.aos = AOS this.aos.init()
}
componentDidUpdate() {
this.aos.refresh()
}
或使用钩子：
let AOS;
useEffect(() => {
/** * Server-side rendering does not provide the 'document' object
* therefore this import is required either in useEffect or componentDidMount as they
* are exclusively executed on a client */
const AOS = require("aos");
AOS.init({ once: true, }); }, []);
useEffect(() => { if (AOS) { AOS.refresh(); } });