The plugin doesn't work for Gatsby 4

[antogada]

• gatsby version: 4.4.0
• gatsby-transformer-remark version: 5.4.0
• gatsby-remark-embedder version: 6.0.0
• node version: 14.15.0
• npm version: 6.14.13

Relevant code or config

    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-embedder`,
            options: {
              customTransformers: [],
              services: {
                // The service-specific options by the name of the service
              },
            },
          },
        ],
      },
    },

What you did: Installed the plugin

What happened: The embedding feature didn't work

Problem description: I'm using gatsby-transformer-remark and I've added the gatsby-remark-embedder to the plugin array. I've left 2 empty lines between the url in my markdown. When I open the page the url is just a string and no embedding has happened.

I cleared the Gatsby cash and I put a console.log statement on top of the main function of the plugin(through node_modules) but nothing was logged. My opinion is that gatsby-transformer-remark doesn't call the gatsby-remark-embedder. The gatsby-transformer-remark works fine because I use it for other things.

[MichaelDeBoey]

@antogada Can you please provide me with a reproduction repo/CodeSandbox that I can look into?

[mattchannn]

https://github.com/mattchannn/gatsby-starter-sample

Hi Michael, I think you can refer to this one, I have the same issue in my blog. This is the best I could give it to you, I tried not to miss any config and settings that my site did

[MichaelDeBoey]

@mattchannn Can you please provide me with a minimal reproduction? Unfortunately, I don't have the bandwidth to figure out if it's because gatsby-remark-embedder or because another package is causing the troubles.

[antogada]

@MichaelDeBoey this is the repo.

There is just one page and one article. You can start the project by running gatsby develop. Let me know if you have any questions.

[mattchannn]

@antogada you saved my day, I have the same issue like yours...

[MichaelDeBoey]

@antogada @mattchannn Please provide me with a bare minimum reproduction repo. So only the really necessary plugins provided. That way I'm sure I'll only put my time & effort in solving a problem that gatsby-remark-embedder is causing.

[mattchannn]

@MichaelDeBoey Hi, please check my repo again, removed all unnecessary plugins

[kxxt]

I encountered the same issue in my personal website using gatsby-plugin-mdx. However, in another repo, it works fine with gatsby-transformer-remark.

[kxxt]

I'm not sure if this bug is related to gatsby-plugin-mdx, but if you prefer MarkdownX syntax, you can try gatsby-plugin-mdx-embed which works fine for me.

www.mdx-embed.com/

[mattchannn]

@kxxt Seems like a breaking change to me..

[mattchannn]

Plus.. as the README said it supports 2 mdx plugin, I think it will be great to review if there's room for fixing this specific issue

[jsg2021]

Gatsby is not calling your default export (babel is not transforming default exports to module.exports = default). The PR #214, notably the addition of babel-plugin-add-module-exports fixes it. You could also just have a non-esm wrapper entrypoint that maps that for you without the transform if you are opposed to that dev dependency.

(tip to other readers: clear gatsby cache to see the change if you've been debugging and don't see any changes)

[MichaelDeBoey]

First of all: I'm sorry to have you guys kept waiting for so long. Life caught up with different priorities, so didn't have time to dedicate on fixing this one.

@jsg2021 So this essentially comes down to the way we do the export?

And we should just change this line https://github.com/MichaelDeBoey/gatsby-remark-embedder/blob/668d719fdd0f9055e2026b43e4f885b552c7b785/src/index.js#L22

to

module.exports = async (

?

[jsg2021]

@MichaelDeBoey yes, that would accomplish the same end.

[MichaelDeBoey]

Should be fixed by #225 then

[github-actions[bot]]

:tada: This issue has been resolved in version 6.0.1 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: