Gatsby: How do I create a plugin for gatsby-transform-remark?

[Songkeys]

For short, there're lots of native plugins for remark. But gatsby requires an integration. So how? (Guide? Solutions for direct integration?)

Relate to: #5716

---

Details:

I'm trying to use https://github.com/remarkjs/remark-breaks to make my markdown break new line without trailing spaces (since I have been looking for a while but found none options/plugins in gatsby-transform-remark suiting the need..).

What I've tried so far is to make a /plugin/gatsby-remark-breaks/src/index.js look like:

const breaks = require("remark-breaks");

module.exports = ({ markdownAST }) => markdownAST;
module.exports.setParserPlugins = () => [breaks];

And add gatsby-remark-breaks to gatsby-transformer-remark's plugins config.

But when compiling, it prompts Error: Cannot find module 'xxxxxx/plugins/gatsby-remark-breaks' and fails.

---

Sorry, I'm supposed to post this to stackoverflow but since it's also a lack-of-docs problem...

I've spent nearly a day to figure out this question... So any helps here is appreciate thanks!

[zslabs]

👋 I created https://github.com/zslabs/remark-relative-links and https://github.com/zslabs/gatsby-remark-relative-links which are pretty straight forward implementations on both end of the spectrum if you want to take a look at those. Are you placing that local plugin in /plugin because it needs to be /plugins

[thorn0]

@Songkeys

Error: Cannot find module 'xxxxxx/plugins/gatsby-remark-breaks'

From this error, you can see where Gatsby tries to find the plugin. Put your module there, not to /plugin/gatsby-remark-breaks/src/index.js.

[Songkeys]

@Songkeys

Error: Cannot find module 'xxxxxx/plugins/gatsby-remark-breaks'

From this error, you can see where Gatsby tries to find the plugin. Put your module there, not to /plugin/gatsby-remark-breaks/src/index.js.

@th0th
I made a typo here, it's /plugins where I put.
But it's worthy noticing that the index.js should be indeed placed into /gatsby-remark-breaks but not /src. I resolved this after doing that. Thanks!

---

👋 I created zslabs/remark-relative-links and zslabs/gatsby-remark-relative-links which are pretty straight forward implementations on both end of the spectrum if you want to take a look at those. Are you placing that local plugin in /plugin because it needs to be /plugins

@zslabs
Thanks for your reference. I saw you have two same index.js file under root and /src folder. What's that for?
I refered to some other projects. They just put index.js under /src and made none or an empty // noop index file under root...
Not so sure about the principles....

But anyway, my code works now after have an index.js under root folder like:

const breaks = require("remark-breaks");
module.exports = ({ markdownAST }, options) => {
  const transformer = breaks(options);
  transformer(markdownAST, options);
};

Also, my old approach also works:

const breaks = require("remark-breaks");
module.exports = ({ markdownAST }) => markdownAST;
module.exports.setParserPlugins = () => [breaks];

---

So... Seriously, no guide for writing gatsby-remark plugins? Just to check the source code and others' repos? 😢

[zslabs]

So... Seriously, no guide for writing gatsby-remark plugins? Just to check the source code and others' repos? 😢

Sounds like a good PR idea for ya 😏

Thanks for your reference. I saw you have two same index.js file under root and /src folder. What's that for?

Just a bit of redundancy on my end. The one in /src/ is what I edit; and when run through babel, it spits out what is actually consumed by the user in the root one. The other way you mentioned is also perfectly fine.

[Songkeys]

@zslabs

Thanks. Really helpful for me!

I'd like to help with docs but my understanding is poor now lol. So I'll close this issue then...