Изображение Gatsby с Netlify CMSField «эскиз» не должно иметь выделения, так как тип «String» не имеет подполей.

с сегодняшнего дня я столкнулся с проблемой и не знаю, как ее решить. Я новичок в React и Gatsby. Что случилось, в настоящее время я работаю над веб-сайтом, который работает с Netlify CMS. Последние несколько дней все работало нормально, но с сегодняшнего дня происходит что-то странное. Я получаю следующее сообщение об ошибке:

      
> hemd-und-fliege-2.1@1.0.0 start
> gatsby develop

success open and validate gatsby-configs, load plugins - 1.221s
success onPreInit - 0.045s
success initialize cache - 0.039s
success copy gatsby files - 0.090s
success Compiling Gatsby Functions - 0.336s
success onPreBootstrap - 0.356s
success createSchemaCustomization - 0.053s

 ERROR #11321  PLUGIN

"gatsby-remark-relative-images" threw an error while running the onCreateNode lifecycle:

No matching file found for src "/images/uploads/bildschirmfoto-2021-07-26-um-11.09.18.png" in static folder "static". Please check static folder name and that file exists at
"static/images/uploads/bildschirmfoto-2021-07-26-um-11.09.18.png". This error will probably cause a "GraphQLDocumentError" later in build. All converted field paths MUST resolve to a matching file in the
 "static" folder.



  Error: No matching file found for src "/images/uploads/bildschirmfoto-2021-07-26-um-11.09.18.png" in static folder "static". Please check static folder name and that file exists at "static/images/uploa
  ds/bildschirmfoto-2021-07-26-um-11.09.18.png". This error will probably cause a "GraphQLDocumentError" later in build. All converted field paths MUST resolve to a matching file in the "static" folder.
  
  - index.js:32 Object.exports.findMatchingFile
    [hemd-und-fliege-2.1]/[gatsby-remark-relative-images]/dist/index.js:32:15
  
  - on-create-node.js:35 Object.<anonymous>
    [hemd-und-fliege-2.1]/[gatsby-remark-relative-images]/dist/on-create-node.js:35:29
  
  - index.js:190 walker
    [hemd-und-fliege-2.1]/[traverse]/index.js:190:22
  
  - index.js:208 
    [hemd-und-fliege-2.1]/[traverse]/index.js:208:29
  
  - Array.forEach
  
  - index.js:298 forEach
    [hemd-und-fliege-2.1]/[traverse]/index.js:298:31
  
  - index.js:203 walker
    [hemd-und-fliege-2.1]/[traverse]/index.js:203:13
  
  - index.js:226 walk
    [hemd-und-fliege-2.1]/[traverse]/index.js:226:7
  
  - index.js:50 Traverse.forEach
    [hemd-und-fliege-2.1]/[traverse]/index.js:50:18
  
  - on-create-node.js:17 Object.exports.onCreateNode
    [hemd-und-fliege-2.1]/[gatsby-remark-relative-images]/dist/on-create-node.js:17:46
  
  - api-runner-node.js:432 runAPI
    [hemd-und-fliege-2.1]/[gatsby]/src/utils/api-runner-node.js:432:22
  
  - api-runner-node.js:588 Promise.catch.decorateEvent.pluginName
    [hemd-und-fliege-2.1]/[gatsby]/src/utils/api-runner-node.js:588:13
  
  - debuggability.js:384 Promise._execute
    [hemd-und-fliege-2.1]/[bluebird]/js/release/debuggability.js:384:9
  
  - promise.js:518 Promise._resolveFromExecutor
    [hemd-und-fliege-2.1]/[bluebird]/js/release/promise.js:518:18
  
  - promise.js:103 new Promise
    [hemd-und-fliege-2.1]/[bluebird]/js/release/promise.js:103:10
  
  - api-runner-node.js:586 
    [hemd-und-fliege-2.1]/[gatsby]/src/utils/api-runner-node.js:586:16
  

success Checking for changed pages - 0.002s
success source and transform nodes - 0.506s
success building schema - 0.914s
success createPages - 0.003s
success createPagesStatefully - 0.191s
info Total nodes: 66, SitePage nodes: 4 (use --verbose for breakdown)
success Checking for changed pages - 0.001s
success update schema - 0.127s
success write out redirect data - 0.005s
success Build manifest and related icons - 0.099s
success onPostBootstrap - 0.107s
info bootstrap finished - 6.002s
success onPreExtractQueries - 0.002s

 ERROR #85922  GRAPHQL

There was an error in your GraphQL query:

      Field "thumbnail" must not have a selection since type "String" has no subfields.

      This can happen if you e.g. accidentally added { } to the field "thumbnail". If you didn't expect "thumbnail" to be of type "String" make sure that your input source and/or plugin is correct.
      However, if you expect "value" to exist, the field might be accessible in another subfield. Please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query and
what shape they have.

      It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned
      "dummy content". Visit our docs to learn how you can define the schema for "undefined":
      https://www.gatsbyjs.com/docs/reference/graphql-data-layer/schema-customization#creating-type-definitions

File: src/pages/index.js:30:23

failed extract queries from components - 2.116s
success write out requires - 0.006s
success run page queries - 0.020s - 2/2 99.18/s
success Caching HTML renderer compilation - 0.002s
⠸ Building development bundle
 DONE  Compiled successfully in 6990ms                                                                                                                                                             18:09:15
⠀
 I  Netlify CMS is running at http://localhost:8000/admin/
⠀
You can now view hemd-und-fliege-2.1 in the browser.
⠀
  http://localhost:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
  http://localhost:8000/___graphql
⠀
Note that the development build is not optimized.
To create a production build, use gatsby build
⠀
warn 
/Users/mw/PROJECTS/hemd-und-fliege-2.1/src/components/BlogEntry/index.js
  1:27  warning  'useRef' is defined but never used     no-unused-vars
  1:35  warning  'useEffect' is defined but never used  no-unused-vars

/Users/mw/PROJECTS/hemd-und-fliege-2.1/src/components/Headline/index.js
  73:6  warning  React Hook useEffect has a missing dependency: 'gsap'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

✖ 3 problems (0 errors, 3 warnings)

success Building development bundle - 10.477s
success Writing page-data.json files to public directory - 0.157s - 2/4 25.45/s

Я думаю, это связано с gatsby-remark-relative-imagesплагин, но я не понимаю, почему он работал раньше, а сегодня - нет. Что еще кажется странным, так это то, что это началось, когда я пытался программно создавать страницы и для этого создал файл. После удаления этого файла сообщение об ошибке продолжалось. Я пробовал кое-что с моим config.ymlфайл, и он снова заработал. Я снова попытался создать gatsby-node.jsфайл, и проблема вернулась. Я действительно понятия не имею, что происходит.

Вот еще несколько дополнительных файлов:

gatsby-config

      module.exports = {
  siteMetadata: {
    siteUrl: "https://www.yourdomain.tld",
    title: "hemd-und-fliege-2.1",
  },
  plugins: [
    "gatsby-plugin-netlify-cms",
    "gatsby-plugin-styled-components",
    "gatsby-plugin-image",
    {
      resolve: "gatsby-plugin-google-analytics",
      options: {
        trackingId: "TEST",
      },
    },
    "gatsby-plugin-react-helmet",
    "gatsby-plugin-sitemap",
    {
      resolve: "gatsby-plugin-manifest",
      options: {
        icon: "src/images/icon.png",
      },
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "images",
        path: `${__dirname}/src/images/`,
      },
      __key: "images",
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "pages",
        path: `${__dirname}/src/pages/`,
      },
      __key: "pages",
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "markdown-pages",
        path: `${__dirname}/_posts/werke`,
      },
      __key: "markdown-pages",
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "uploaded-images",
        path: `${__dirname}/static/images`,
      },
      __key: "uploaded-images",
    },
    "gatsby-transformer-remark",
    "gatsby-plugin-sharp",
    "gatsby-transformer-sharp",
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          `gatsby-remark-relative-images`,
          {
            resolve: `gatsby-remark-images`,
            options: {},
          },
        ],
      },
    },
  ],
};

gatsby-node

      const path = require(`path`);
const { createFilePath } = require(`gatsby-source-filesystem`);

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions;

  if (node.internal.type === `MarkdownRemark`) {
    const value = createFilePath({ node, getNode });
    createNodeField({
      name: `slug`,
      node,
      value,
    });
  }
};

const buildPages = (edges, createPage) => {
  const pages = edges.filter((edge) => {
    if ("templateKey" in edge.node.frontmatter) {
      return edge;
    }
  });

  // create pages with the filtered edges
  pages.map((page) => {
    console.log(`Creating page ${JSON.stringify(page.node.frontmatter)}`);

    createPage({
      path: page.node.fields.slug,
      // getting the component to render the page using the templateKey property
      component: path.resolve(
        `src/templates/${String(page.node.frontmatter.templateKey)}.js`
      ),
      context: {
        id: page.node.id,
        slug: page.node.fields.slug,
      },
    });
  });
};

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;

  // graphql query for pages only
  const result = await graphql(
    `
      {
        allMarkdownRemark(
          limit: 1000
          filter: { fileAbsolutePath: { regex: "/(work-post)/i" } }
        ) {
          edges {
            node {
              id
              fields {
                slug
              }
              frontmatter {
                title
                templateKey
              }
            }
          }
        }
      }
    `
  );
  // if errors then throw
  if (result.errors) {
    throw result.errors;
  }
  console.log("Creating pages ---->>>>");
  // Create pages
  buildPages(result.data.allMarkdownRemark.edges, createPage);
};

index.js

      import * as React from "react";
import { graphql } from "gatsby";
import gsap from "gsap";
import { Layout } from "../components/layout";

// Components
import { Head } from "../components/Headline";
import { BlogEntry } from "../components/BlogEntry";

// markup
const IndexPage = ({ data }) => {
  const edges = data.allMarkdownRemark.edges;

  return (
    <Layout>
      <Head gsap={gsap} />
      <BlogEntry edges={edges} />
    </Layout>
  );
};

export const query = graphql`
  query {
    allMarkdownRemark {
      edges {
        node {
          id
          frontmatter {
            title
            thumbnail {
              childImageSharp {
                gatsbyImageData(layout: FULL_WIDTH)
              }
            }
          }
        }
      }
    }
  }
`;

export default IndexPage;

Вот ссылка на мой репозиторий и текущую ветку:

https://github.com/M-WRI/hemd-und-fliege-2.0/tree/moritz-dev

Я знаю, что мое описание может быть не таким твердым в некоторых частях, но я надеюсь, что кто-нибудь может мне помочь. Заранее большое спасибо.

Источник

2 ответа

Решение

У этой проблемы может быть несколько решений в зависимости от того, что ее вызывает. Обычно обычно случается так, что Гэтсби не может создать thumbnail node, потому что имеет несвязанный тип (String), где он должен быть узлом изображения, потому что относительность между узлами родитель-потомок каким-то образом теряется.

Возможные решения:

  • Запустить gatsby clean: очищает кеш. Затем, gatsby develop снова проект.

  • Проверить media_folder и public_folder в вашей config.yml: в твоем случае мне они оба хорошо смотрятся.

  • Использовать gatsby-remark-relative-images-v2плагин: Netlify CMS не полностью поддерживает относительные пути (пока), поэтому вам может понадобиться помощь этого плагина. Это потому, что изображение находится за пределами папки узла.

    После его установки. Просто добавьте его как вариант

            {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-relative-images-v2`,
        },
        {
          resolve: `gatsby-remark-images`,
          options: {},
        },
      ],
    },
  },

    После этого вам нужно будет включить следующий фрагмент в свой:

            const { fmImagesToRelative } = require('gatsby-remark-relative-images-v2');

exports.onCreateNode = ({ node }) => {
   fmImagesToRelative(node);
};

    В вашем случае вы используете v1 того же плагина, который я предложил, но вам не хватает предыдущей конфигурации в gatsby-node.jsфайл. В последний раз, когда я столкнулся с вашей проблемой, v2 спас меня, но вы можете попробовать фрагмент v1 +, если хотите.

    Не забывайте очищать кеш в каждой пробной версии.

Кроме того, попробуйте изменить map петля для foreach поскольку вы хотите применить createPage API в каждом экземпляре pages.

Источник

У меня тоже была эта проблема, эта проблема с github помогла мне ее решить. gatsby-comment-images (v1 и v2) продолжал выдавать мне ошибки, но в ходе многих испытаний я обнаружил, что вы можете явно указать тип поля. Это открывает все необходимые узлы, и вы можете перейти к gatsbyImageData.

Это код, который я добавил в gatsby-node.js

      exports.createSchemaCustomization = ({ actions }) => {
    const { createTypes } = actions
  
    createTypes(`
        type MarkdownRemark implements Node {
            frontmatter: Frontmatter
        }
        type Frontmatter {
            thumbnail: File @fileByRelativePath
        }
    `)
}
Источник
Другие вопросы по тегам