Cannot find module file index

[shelleyphant]

Installed to deal with Netlify CMS, but it seems to have upset the entire site. First error is

**Error:** Cannot find module 'project/node_modules/gatsby-remark-relative-images/index'

This seems to cause an flow on effect with errors like:

"gatsby-transformer-remark" threw an error while running the createSchemaCustomization lifecycle:
Cannot read properties of undefined (reading 'createSchemaCustomization')

And then it cannot find any of the image files

I'm on version 2.0.2
gatsby-config.js

plugins: [
    {
        resolve: `gatsby-source-filesystem`,
        options: {
            name: `blog`,
            path: `${__dirname}/content/blog`,
        },
        __key: "blog",
    },
    {
        resolve: `gatsby-source-filesystem`,
        options: {
            name: `portfolio`,
            path: `${__dirname}/content/portfolio`,
        },
        __key: "portfolio",
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "images",
        path: "./src/images/",
      },
      __key: "images",
    },

    "gatsby-plugin-sharp",
    "gatsby-transformer-sharp",
    {
        resolve: 'gatsby-transformer-remark',
        options: {
          plugins: [
            'gatsby-remark-relative-images',
            {
              resolve: `gatsby-remark-images`,
              options: {
                maxWidth: 630,
              },
            },
            {
              resolve: `gatsby-remark-responsive-iframe`,
              options: {
                wrapperStyle: `margin-bottom: 1.0725rem`,
              },
            },
            `gatsby-remark-prismjs`,
            `gatsby-remark-copy-linked-files`,
            `gatsby-remark-smartypants`,
          ],
        },
      },

    "gatsby-plugin-netlify-cms",
    "gatsby-plugin-sass",
]

[j-e-clark]

Are you using Gatsby v3 or Gatsby v4?

I've just encountered exactly the same issue whilst attempting to upgrade a site from v3 to v4.

It works fine with:
"gatsby": "^3.14.1",
"gatsby-remark-images": "^5.11.0",
"gatsby-remark-relative-images": "^2.0.2",
"gatsby-transformer-remark": "^4.11.0",

But gives the same errors as above with:
"gatsby": "^4.0.2",
"gatsby-remark-images": "^6.0.0",
"gatsby-remark-relative-images": "^2.0.2",
"gatsby-transformer-remark": "^5.0.0",

I think this may be an incompatibility with Gatsby v4?

Edit: With a bit more investigation, I've discovered this Gatsby issue which appears related. Subplugins are not currently respecting main field in package.json.

[shelleyphant]

I'm using gatsby v4, but I ended up uninstalling the plugin and finding a workaround using this issue and this stackoverflow thread. Using gatsby-node.js, you can explicitly set a fields type, revealing the required nodes.

exports.createSchemaCustomization = ({ actions }) => {
    const { createTypes } = actions
  
    createTypes(`
        type MarkdownRemark implements Node {
            frontmatter: Frontmatter
        }
        type Frontmatter {
            thumbnail: File @fileByRelativePath
        }
    `)
}

[natapg]

I subscribe to this issue because I have the same problem migrating to v4. I tried @shelleyphant solution and the "must not have a selection since type "String" has no subfields" errors are solved but the images return null for some reason so it doesn't work for me

[shelleyphant]

What's your blog structure? I have everything in main - content - postTitle - index.js + images
Then, I have it added in my gatsby-config.js like so:

plugins: [
       {
            resolve: `gatsby-source-filesystem`,
            options: {
                name: `portfolio`,
                path: `${__dirname}/content`,
            },
        },
]

This means that any relative images referenced in the 'postTitle' folder is linked as a file, and can then be found as a node.

[LekoArts]

Please update to

 - gatsby-plugin-mdx@3.1.1
 - gatsby-remark-autolink-headers@5.1.1
 - gatsby-remark-images@6.1.1
 - gatsby-transformer-remark@5.1.1
 - gatsby@4.1.2

See gatsbyjs/gatsby#33677