如何解决gatsby问题：将gatsby站点部署为netlify时找不到命令
我试图将gatsby站点部署到Netlify。我将gatsby项目中public目录中的所有文件提交到我的github存储库，然后将该存储库部署在netlify上，但是出现错误。
在将public以外的所有文件和目录推送到github之后，进行部署后，出现以下错误：
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软件包，请将其添加到您的页面/组件：
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(); } });
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。