Skip to content
This repository has been archived by the owner on Oct 30, 2022. It is now read-only.

Support for Gatsby 4 #293

Open
Mrtenz opened this issue Oct 27, 2021 · 5 comments
Open

Support for Gatsby 4 #293

Mrtenz opened this issue Oct 27, 2021 · 5 comments

Comments

@Mrtenz
Copy link

Mrtenz commented Oct 27, 2021

The gatsby-rehype-inline-images does not seem to support Gatsby 4 at the moment. With the following config:

    {
      resolve: 'gatsby-transformer-rehype',
      options: {
        filter: (node: Node) => node.internal.type === 'GhostPost',
        plugins: [
          'gatsby-rehype-inline-images'
        ]
      }
    }

I get this error when querying childHtmlRehype { html }:

{
  "errors": [
    {
      "message": "Cannot read property 'withWebp' of undefined",
      "locations": [
        {
          "line": 4,
          "column": 4
        }
      ],
      "path": [
        "ghostPost",
        "childHtmlRehype",
        "html"
      ],
      "extensions": {
        "stack": [
          "TypeError: Cannot read property 'withWebp' of undefined",
          "    at fluidImage (.../node_modules/gatsby-rehype-inline-images/gatsby-node.js:215:5)",
          "    at processImage (.../node_modules/gatsby-rehype-inline-images/gatsby-node.js:193:13)",
          "    at replaceNewImage (.../node_modules/gatsby-rehype-inline-images/gatsby-node.js:169:16)",
          "    at async Promise.all (index 3)",
          "    at module.exports (.../node_modules/gatsby-rehype-inline-images/gatsby-node.js:99:18)",
          "    at Function.Promise.each (.../node_modules/gatsby-transformer-rehype/extend-node-type.js:16:5)",
          "    at processHtmlAst (.../node_modules/gatsby-transformer-rehype/extend-node-type.js:142:7)"
        ]
      }
    }
  ],
  "data": {
    "ghostPost": {
      "childHtmlRehype": {
        "html": null
      }
    }
  },
  "extensions": {}
}
@styxlab
Copy link
Owner

styxlab commented Oct 27, 2021

@Mrtenz I no longer actively maintain this repo, because I now do everything with Next.js. However, If you want to submit a PR to fix the issue, you are most welcome.

@lamellama
Copy link
Contributor

Only tested with Gatsby@v3 but it may also work for 4
#294

@illogic-al
Copy link
Contributor

If this still doesn't work perhaps a change in the gatsby-rehype-inline-images plugin similar to that in #298 (where we are not mutating a node directly, but using createNodeField instead will fix things.

@amaljithev
Copy link

Still does not work @illogic-al , Can you submit a PR ?

@illogic-al
Copy link
Contributor

@amaljithev I did submit a PR, that's what I linked to in #298. As I don't use this plugin I won't make the change here.
I encourage you to copy those changes and make them for yourself, and as you are using the plugin you'll be able to test and verify that it works.
If you run into any issues feel free to link to the PR in your fork and I'd be happy to see if the proper changes were made.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants