#gatsby #github-actions #netlify #gatsby-image #gatsby-plugin
#gatsby #github-действия #netlify #gatsby-image #gatsby-плагин
Вопрос:
Я использую Gatsby и NetlifyCMS для своего веб-сайта и в настоящее время получаю следующее сообщение об ошибке при запуске рабочего процесса в действиях GitHub:
error "gatsby-plugin-manifest" threw an error while running the onPostBootstrap lifecycle:
Error: Input file contains unsupported image format
Очень странно, что ошибка не возникает при разработке gatsby и сборке gatsby в моей локальной системе
Мой массив плагинов выглядит следующим образом:
plugins: [
{
resolve: `gatsby-plugin-typography`,
options: {
pathToConfigModule: `src/utils/typography`,
},
},
{
// keep as first gatsby-source-filesystem plugin for gatsby image support
resolve: "gatsby-source-filesystem",
options: {
path: `${__dirname}/static/img`,
name: "uploads",
},
},
`gatsby-plugin-smoothscroll`,
`gatsby-plugin-react-helmet`,
`gatsby-plugin-twitter`,
{
resolve: "gatsby-plugin-netlify-cms",
options: {
modulePath: `${__dirname}/src/cms/cms.js`,
htmlFavicon: `src/images/favicon.png`,
},
},
`gatsby-plugin-no-index`,
`gatsby-plugin-transition-link`,
{
resolve: "gatsby-source-filesystem",
options: {
path: `${__dirname}/src/postings`,
name: "postings",
},
},
{
resolve: "gatsby-plugin-react-svg",
options: {
rule: {
include: /svg/,
},
},
},
`gatsby-transformer-sharp`,
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: "gatsby-remark-relative-images",
options: {
name: "uploads",
},
},
{
resolve: "gatsby-remark-images",
options: {
staticFolderName: "static",
maxWidth: 768,
linkImagesToOriginal: false,
},
},
],
},
},
{
resolve: `gatsby-plugin-sharp`,
options: {
// Available options and their defaults:
base64Width: 20,
forceBase64Format: `jpg`, // valid formats: png,jpg,webp
useMozJpeg: process.env.GATSBY_JPEG_ENCODER === `MOZJPEG`,
stripMetadata: true,
defaultQuality: 50,
failOnError: true,
},
},
`gatsby-plugin-postcss`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/favicon.png`, // This path is relative to the root of the site.
},
},
],
И это мой запрос, в котором я получаю доступ к эскизу с помощью childImageSharp
const data = useStaticQuery(graphql`
query {
allMarkdownRemark(
filter: { frontmatter: { templateKey: { eq: "blog" } } }
) {
edges {
node {
fields {
slug
}
frontmatter {
title
language
templateKey
description
author
thumbnail {
childImageSharp {
fluid(maxWidth: 240, maxHeight: 140, quality: 100) {
...GatsbyImageSharpFluid
}
}
}
}
}
}
}
}
`);
Я не знаю, в чем причина этого. Я уже пытался обновить несколько пакетов.
Это мой package.json
{
"name": "gatsby-starter-default",
"private": true,
"description": "A simple starter to get up and developing quickly with Gatsby",
"version": "0.1.0",
"author": "Kyle Mathews <mathews.kyle@gmail.com>",
"dependencies": {
"@brainhubeu/react-carousel": "^1.19.26",
"@tailwindcss/ui": "^0.6.2",
"axios": "^0.21.0",
"formik": "^2.2.3",
"gatsby": "2.28.00",
"gatsby-image": "^2.4.17",
"gatsby-plugin-manifest": "^2.7.0",
"gatsby-plugin-matomo": "^0.8.3",
"gatsby-plugin-netlify-cms": "^4.4.0",
"gatsby-plugin-no-index": "^1.0.1",
"gatsby-plugin-offline": "^3.2.27",
"gatsby-plugin-postcss": "^2.3.12",
"gatsby-plugin-react-helmet": "^3.3.14",
"gatsby-plugin-react-svg": "^3.0.0",
"gatsby-plugin-sharp": "^2.10.0",
"gatsby-plugin-smoothscroll": "^1.2.0",
"gatsby-plugin-transition-link": "^1.20.5",
"gatsby-plugin-twitter": "^2.4.0",
"gatsby-plugin-typography": "^2.5.11",
"gatsby-remark-images": "^3.7.0",
"gatsby-remark-relative-images": "^2.0.2",
"gatsby-source-filesystem": "^2.3.28",
"gatsby-transformer-remark": "^2.11.0",
"gatsby-transformer-sharp": "^2.5.14",
"i18next": "^19.8.3",
"lodash": "^4.17.20",
"netlify-cms-app": "^2.13.3",
"prop-types": "^15.7.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-helmet": "^6.1.0",
"react-i18next": "^11.7.3",
"react-media": "^2.0.0-rc.1",
"react-particles-js": "^3.3.0",
"react-select": "^3.1.1",
"react-slick": "^0.27.12",
"react-spring": "^8.0.27",
"react-transition-group": "1.x",
"react-typography": "^0.16.19",
"sharp": "^0.26.3",
"slick-carousel": "^1.8.1",
"tsparticles": "^1.18.2",
"typography": "^0.16.19",
"yup": "^0.29.3"
},
"devDependencies": {
"env-cmd": "^10.1.0",
"gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.17",
"prettier": "2.1.1",
"tailwindcss": "^1.8.10"
},
"keywords": [
"gatsby"
],
"license": "0BSD",
"scripts": {
"build": "gatsby build",
"develop": "env-cmd -f .env.local gatsby develop",
"format": "prettier --write "**/*.{js,jsx,ts,tsx,json,md}"",
"start": "npm run develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo "Write tests! -> https://gatsby.dev/unit-testing" amp;amp; exit 1"
},
"repository": {
"type": "git",
"url": "https://github.com/gatsbyjs/gatsby-starter-default"
},
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
}
}
Комментарии:
1. Существует ли ваш
src/images/favicon.pngвообще?2. @FerranBuireu Я снова проверил путь. Путь правильный, и изображение существует в этой форме.
Ответ №1:
Проблема, по-видимому, связана с путем к значку, убедитесь, что путь указан правильно, и попробуйте изменить его на другое фиктивное изображение.
Если пути указаны правильно, эта проблема, вероятно, связана с устаревшей dev-зависимостью ( @babel/helper-compilation-targets ) или, согласно этой теме GitHub, это может быть также связано с недопустимой версией libvips зависимости. В обоих случаях вы можете попробовать одно и то же решение:
Удалите файл блокировки ( package-lock.json или yarn-lock.json ) и node_modules папку и переустановите зависимости с yarn install помощью или npm install . Если проблема не устранена, попробуйте:
rm -rf node_modules amp;amp;
SHARP_IGNORE_GLOBAL_LIBVIPS=true yarn
Комментарии:
1. Поскольку сообщение об ошибке появляется только в процессе сборки, это, к сожалению, не поможет. Файл package.json останется прежним, и процесс сборки снова сообщит об ошибке. Для меня локально это все еще работает с разработкой и сборкой gatsby. Действительно странно, почему возникает эта ошибка. Я удалил все сообщения в блоге и проверил правильность путей к изображениям.
2. Конечно, я предполагаю, что проблема связана с несоответствующими версиями узла или какой-либо конкретной зависимостью между вашим локальным и Netlify. Вот почему я попытался обновить их локально, чтобы воспроизвести проблему локально. Процесс сборки использует установленные зависимости для работы и выполнения других задач, так что это мое предположение. Попробуйте проверить версии узла между вашей локальной и Netlify. Тот факт, что строится локально, не следует воспринимать как абсолютную истину. Он создается в ваших условиях, а не в среде Netlify, вот почему я указываю именно на это направление.
3. спасибо вам за подсказки! Я проверю версию узла между моей локальной и сетевой версией. Однако теперь мне удалось заставить процесс сборки работать. Я закомментировал плагин gatsby-plugin-manifest в gatsby-config.js . Теперь процесс сборки работает. Это зависит от gatsby-plugin-manifest. Вероятно, он настроен неправильно, потому что код все еще взят из начального шаблона.
4. Да, конечно, мое первое предположение заключалось в том, что путь
gatsby-plugin-manifestбыл неправильным, поскольку ошибка указывает на это, но, похоже, он не может получить значок, но вы сказали, что он работает, поэтому, сделав чтение в некоторых потоках проблемой, я изменил направление. Попробуйте изменить изображение на другое фиктивное.5. Замена старого favicon.png на новое изображение (и новое имя) сработало
Ответ №2:
Был аналогичный сбой в рабочем процессе github. Ошибка была
success Build manifest and related icons - 0.002s
error "gatsby-plugin-manifest" threw an error while running the onPostBootstrap lifecycle:
Input file contains unsupported image format
Error:Input file contains unsupported image format
not finished onPostBootstrap - 0.021s
Error: The process '/usr/local/bin/npm' failed with exit code 1
5 шагов:
- Удалить node_modules
- Удалить package-lock.json
- очистка кэша npm — принудительно
- npm rebuild -подробный четкий
- установка npm
Похоже, проблема в кэшировании пакетов babel, как уже указал @Ferren