gatsby-remark-relative-images | Convert markdown image src to be | Plugin library

After having access to the repo (which runs on Gatsby) I found that /styles/ folder when searched was inside the /public/ folder which is generated by gatsby, this pointed me to the same error that referenced the chunk error "componentChunkName": "component---src-pages-styles-js", I then searched for this file which existed in the .cache, this file showed me the error was coming from @emotion trying to compile the src/pages/styles.js file that is used by index-old.js.

It seemed that Gatsby was interpreting /src/pages/styles.js as a normal static page to build, but because it is returning a function that returned emotion JSX it couldn't build properly as Gatsby expects all .js files to return React JSX code.

It turned out in this project, these files wasn't actually used anymore so simply deleting them fixed the issue. If it was used though, simply having styles.js somewhere other than the /src/pages folder would fix this. I'd recommend having a views folder where you store all pages and styling relative to it to avoid Gatsby trying to compile pages from styling.

You can use as well the built-in dangerouslySetInnerHtml property or any markdown parser like markdown-to-jsx.

Using the first approach, following Gatsby's guides:

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

The issue seems to be related to the favicon path, ensure that the path is correct and try changing it to other dummy image.

If the paths are correct this issue is likely due to an outdated dev-dependency (@babel/helper-compilation-targets) or, according to this GitHub thread it could be also due to an invalid version of libvips dependency. In both cases you can try the same solution:

Remove your lock file (package-lock.json or yarn-lock.json), and your node_modules folder and reinstall your dependencies with yarn install or npm install. If the issue persists, try:

It has something to do with gatsby-remark-relative-images: "^2.0.2", the problem stopped happening when using version ^0.3.0 instead of ^2.0.2 or when using "gatsby-remark-relative-images-v2": "^0.1.5", instead. This is noted on their github page

I found that this is a problem with package dependencies, the codebase was originally from a gatsby starter, to resolve this i changed over the package dependencies to the following:

The example has css styles applied. Specifically:

I am more interested in how do you call those images in your components rather than in the package.json (it doesn't seem a dependencies issue) because inspecting the code, it seems that you've added the /static path which is not required. As it is shown in the following screenshot:

Regarding the updates coming from the comments below, we've figured out that the issue is related directly to this GitHub issue where apparently images retrieved by a markdown are blurring. What solves the issue is to pass a withWebp parameter in Gatsby's configuration, so in gatsby-config.js:

I had the same issue. Updating gatsby-plugin-netlify-cms to latest version helped.