Upgrading to gatsby v4

[kalwalt]

With this PR i will upgrade the starter to gatsby version 4 and will try to make other updates. If not a problem @rmatambo8 i will continue here your work started in PR https://github.com/kalwalt/gatsby-starter-i18n-bulma/pull/148, i am at a good point but maybe i will ask for some support.

[kalwalt]

Netlify build https://app.netlify.com/sites/gatsby-starter-i18n-bulma/deploys/61fb002ad74ada0007c02eea fails while in develop mode not happens. Something wrong with the image query?

[kalwalt]

In build mode, i get errors like this:

 ERROR #85922  GRAPHQL

There was an error in your GraphQL query:

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

      This can happen if you e.g. accidentally added { } to the field "image". If you didn't expect "image"
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/templates/home.jsx:206:17

failed extract queries from components - 9.295s

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[kalwalt]

I fixed the images for SEO but i discovered that other components needs to be fixed, for example the Lightbox.jsx

[kalwalt]

Netlify build fails but not in my local machine anyway no images are displayed...

[kalwalt]

@rmatambo8 i don't understand this error, this happens for all the entry of frontmatter->image and in other parts. I think i have followed all the suggestions in the migration guide v3 to v4 and in the image migration guide, but it's clear that i'm missing something. Have you an idea what could be the cause?

[rmatambo8]

Hey @kalwalt , I pulled down the local code and there seem to be several problems that i can't fully figure out, one thing was: there's a caching issue.

you may also want to check the paths for your image files.

if file system can't find an image file where you specify it, it will register an image 'path' as a string, that's the error you're getting.

If i have time I'll look more into this but I'd recommend isolating the issue as much as you can by only building one page based on an md file and fix the issue in that one file before dealing with the whole site.

[kalwalt]

Hi @rmatambo8 thank you for the kind answer!

Hey @kalwalt , I pulled down the local code and there seem to be several problems that i can't fully figure out, one thing was: there's a caching issue.

yes i saw it. I'm investigating on it.

you may also want to check the paths for your image files.

if file system can't find an image file where you specify it, it will register an image 'path' as a string, that's the error you're getting.

That's strange because with gatsby v3 i hadn't these issues, but maybe something other is changed inside gatsby.

If i have time I'll look more into this but I'd recommend isolating the issue as much as you can by only building one page based on an md file and fix the issue in that one file before dealing with the whole site.

Yes i agree with you i think i will start with the simpler one the about page.

[kalwalt]

Im testing the [about](https://github.com/kalwalt/gatsby-starter-i18n-bulma/blob/upgrading-to-v4/src/templates/about.jsx) template now. If i try to change the image with an image from img/src folder i get:

ERROR #11321  PLUGIN

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

No matching file found for src "/img/icon.png" in static folder "static". Please check static folder name and that file
 exists at "static/img/icon.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 "/img/icon.png" in static folder "static". Please check static folder name and 
  that file exists at "static/img/icon.png". This error will probably cause a "GraphQLDocumentError" later in build. Al
  l converted field paths MUST resolve to a matching file in the "static" folder.

  - index.js:32 Object.exports.findMatchingFile
    [gatsby-starter-i18n-bulma]/[gatsby-remark-relative-images]/dist/index.js:32:15

  - on-create-node.js:35 Object.<anonymous>
    [gatsby-starter-i18n-bulma]/[gatsby-remark-relative-images]/dist/on-create-node.js:35:29

  - index.js:190 walker
    [gatsby-starter-i18n-bulma]/[traverse]/index.js:190:22

  - index.js:208 
    [gatsby-starter-i18n-bulma]/[traverse]/index.js:208:29

  - Array.forEach

  - index.js:298 forEach
    [gatsby-starter-i18n-bulma]/[traverse]/index.js:298:31

  - index.js:203 walker
    [gatsby-starter-i18n-bulma]/[traverse]/index.js:203:13

  - index.js:226 walk
    [gatsby-starter-i18n-bulma]/[traverse]/index.js:226:7

  - index.js:50 Traverse.forEach
    [gatsby-starter-i18n-bulma]/[traverse]/index.js:50:18

  - on-create-node.js:17 Object.exports.onCreateNode
    [gatsby-starter-i18n-bulma]/[gatsby-remark-relative-images]/dist/on-create-node.js:17:46

  - api-runner-node.js:462 runAPI
    [gatsby-starter-i18n-bulma]/[gatsby]/src/utils/api-runner-node.js:462:22

  - api-runner-node.js:613 Promise.catch.decorateEvent.pluginName
    [gatsby-starter-i18n-bulma]/[gatsby]/src/utils/api-runner-node.js:613:13

  - debuggability.js:384 Promise._execute
    [gatsby-starter-i18n-bulma]/[bluebird]/js/release/debuggability.js:384:9

  - promise.js:518 Promise._resolveFromExecutor
    [gatsby-starter-i18n-bulma]/[bluebird]/js/release/promise.js:518:18

  - promise.js:103 new Promise
    [gatsby-starter-i18n-bulma]/[bluebird]/js/release/promise.js:103:10

  - api-runner-node.js:611 
    [gatsby-starter-i18n-bulma]/[gatsby]/src/utils/api-runner-node.js:611:16

not finished source and transform nodes - 1.441s

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

maybe the issue is related to gatsby-remark-relative-images plugin?

[kalwalt]

Small progress: now Netlify can build the site, maybe the gbimage-bridge was causing an issue. Anyway no images displayed, that has to be fixed yet.

[rmatambo8]

keep me posted, i'll be looking in to here from time to time so if you have any follow up questions I'd be glad to help

[kalwalt]

@rmatambo8 The last commits do not solve the image issue. I have the suspect that one of the dependencies gatsby-plugin-i18n use some very old packages in the dependencies that may cause some failure. To reproduce the issue, i will try to clone the gatsby-starter-netlify-cms and add the gatsby-plugin-i18n as dependencies , and see how it goes.

[kalwalt]

@rmatambo8 @MartinRosenberg Tested in another branch if removing gatsby-plugin-i18n solved the issue. And yes for some reason it cause the issue, Can't understand why but i have this working branch https://github.com/kalwalt/gatsby-starter-i18n-bulma/tree/removing-gatsby-plugin-i18n if you have an idea why this happens just let me know. I would upgrade that package but at the moment i can't understand what exactly causing it.

[kalwalt]

Live preview here: https://removing-gatsby-plugin-i18n--gatsby-starter-i18n-bulma.netlify.app/test/

[rmatambo8]

good to see 👍

we can probably go ahead and merge this and add this to the starters library for Gatsby 4.

[kalwalt]

Thank you @rmatambo8 i need to do some small fixes and i think i will merge it. When i tried some month ago i believed that the cause was in the outdated gatsby-plugin-i18n but this wasn't. Strange that excluding it and using the same gatsby-config.js settings was able to process the images. Spent a lot of time on this but the solution was under the eyes...