since today I am facing a problem and I don't know how I can solve it. I am kind of new in terms of React and Gatsby. What happened, currently I am working on a Website that runs with a Netlify CMS. In the last few days, everything just worked fine, but since today there is something strange going on. I am getting the following errormessage:
> 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
I think it has to do with the gatsby-remark-relative-imagesplugin, but I don't understand, why it worked the other days and today not. What also seems strange is, that it started, when I tried to create programmatically pages and for this have made a gatsby-node.jsfile. After deleting that file the error message continued. I have tried here and there something with my config.yml file and it worked again. I tried again to create the gatsby-node.jsfile and the problem came back. I really have no idea whats going on.
Here are some additional files:
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;
Here is the link to my repository and current branch:
https://github.com/M-WRI/hemd-und-fliege-2.0/tree/moritz-dev
I know that my description might be not as solid in some parts, but I hope some one can help me. Thanks a lot in advance.
This issue can have multiple solutions depending on what's causing it. Normally, what usually happens is that Gatsby can't create the thumbnail node because has an unrelated type (String) where it should be an image node because the relativity between parent-children nodes is lost somehow.
Potential solutions:
Run gatsby clean: cleans the cache. Then, gatsby develop the project again.
Check the media_folder and public_folder in your config.yml: in your case, to me, they both looks good.
Use gatsby-remark-relative-images-v2 plugin: Netlify CMS doesn't fully support relative paths (yet) so in the meantime, you may need the help of that plugin. This is because the image is outside the node folder.
After installing it. Just add it as an option of the
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-relative-images-v2`,
},
{
resolve: `gatsby-remark-images`,
options: {},
},
],
},
},
After that, you will need to include the following snippet in your gatsby-node.js:
const { fmImagesToRelative } = require('gatsby-remark-relative-images-v2');
exports.onCreateNode = ({ node }) => {
fmImagesToRelative(node);
};
In your case, you are using the v1 of the same plugin I suggested but you are missing the previous configuration in the gatsby-node.js file. The last time I faced your issue, the v2 saved me but you may want to give a try to the v1 + snippet if you want.
Remember to clean cache in each trial.
In addition, try changing the map loop for a foreach since you want to apply the createPage API in each instance of pages.