Gatsby Recipes

[KyleAMathews]

People experimenting with Recipes — this is the place to ask questions, report bugs, suggest ideas, collaborate on improvements, and get notified about updates.

Also share your recipes! We're excited to see what y'all come up with. Put them in a gist and link to them in a comment.

Smash that "Subscribe" button and start following along!

Have fun and break things!

Quick links:

• RFC
• Docs
• PR for MVP code
• MDX source for official recipes
• GitHub project for Gatsby Recipes

Known issues:

• <GatsbyPlugin> doesn't yet support adding options with javascript

[marcysutton]

Cool! A few things I ran into:

1. Note the required Node version -- I had Node 13 and it failed building a recipe on @urql/core. It worked with Node 12

2. Building a recipe with a Gatsby site running in develop in another tab mostly worked, but threw this:

 try-emotion git:(master) ✗ gatsby recipes emotion

⠋ Loading recipe
events.js:186
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE: address already in use :::4000
    at Server.setupListenHandle [as _listen2] (net.js:1228:14)
    at listenInCluster (net.js:1276:12)
    at Server.listen (net.js:1364:7)
    at Object.<anonymous> (/Users/marcysutton/Sites/Gatsby/try-emotion/node_modules/gatsby/dist/recipes/graphql.js:174:8)
    at Module._compile (internal/modules/cjs/loader.js:936:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:947:10)
    at Module.load (internal/modules/cjs/loader.js:790:32)
    at Function.Module._load (internal/modules/cjs/loader.js:703:12)
    at Function.Module.runMain (internal/modules/cjs/loader.js:999:10)
    at internal/main/run_main_module.js:17:11
Emitted 'error' event on Server instance at:
    at emitErrorNT (net.js:1255:8)
    at processTicksAndRejections (internal/process/task_queues.js:77:11) {
  code: 'EADDRINUSE',
  errno: 'EADDRINUSE',
  syscall: 'listen',
  address: '::',
  port: 4000

Setup Gatsby with Emotion

I didn't hit Enter on the recipe to fully run it, and quitting the process threw this memory leak error:

Setup Gatsby with Emotion

Emotion is a powerful CSS-in-JS library that supports both inline CSS styles and
styled components. You can use each styling feature individually or together in the
same file.
Press enter to continue

 ERROR

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
    in RecipeInterpreter (created by Wrapper)
    in div (created by Box)
    in Box (created by Div)
    in Div (created by Wrapper)
    in Wrapper (created by Recipe)
    in Recipe
    in App

3. The Sass recipe I wrote doesn't install from the default starter: it says it works, but doesn't install files or edit the config https://gist.github.com/marcysutton/19f2efe390e9485968c8fef37795d8ea

[KyleAMathews]

@marcysutton just tried your recipe and it worked with the hello world starter — @johno is doing some work to improve the robustness of the code modifying gatsby-config.js — we'll test explicitly on the default starter to make sure that's working.

[KyleAMathews]

Added it to the PR 5efb22f

[crock]

The docs link in the OP is a 404. https://github.com/gatsbyjs/gatsby/blob/add-recipes/packages/gatsby/src/recipes/README.md

[Khaledgarbaya]

Just created a tailwindcss recipe, works like a charm
https://gist.github.com/Khaledgarbaya/c2c3b5096c757df27421fc7280d689cf

Looking forward to the ability to add options in <GatsbyPlugin/>

[laurieontech]

@crock The README is here: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-recipes/README.md

[Khaledgarbaya]

I started working on a Contentful recipe.
https://gist.github.com/Khaledgarbaya/5106552d3142181a7110e44706ee4ced

This will not work currently since options prop is not available yet

[johno]

We should be landing options support for plugins in the next few days @Khaledgarbaya!

[Khaledgarbaya]

Awesome @johno let me know if you need a hand

[dan2k3k4]

Maybe I'm doing something wrong but I keep getting:
There was a problem loading the local recipes command. Gatsby may not be installed in your site's "node_modules" directory. Perhaps you need to run "npm install"? You might need to delete your "package-lock.json" as well.

I have npm i -g gatsby-cli@latest (I tried with yarn before but still same error):

› gatsby recipes -v
Gatsby CLI version: 2.11.9
Gatsby version: 2.20.12

[johno]

@dan2k3k4 you'll need to bump your Gatsby version to 2.20.23. I believe that should fix it for you.

[dan2k3k4]

@johno thanks! That works. Not sure if we should mention that in the documentation? I followed the steps in: https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-recipes#running-an-example-recipe

[dan2k3k4]

As all "Gatsby Starters" would need to be bumped to at least 2.20.23 to support recipes. The global version of the gatsby-cli seems to try to read from the local gatsby version.

I think we only need to update the package-lock.json or yarn.lock file to ensure it gets the latest version of Gatsby (or anything 2.20.23 or above).

[dan2k3k4]

I just added PR #23205 - I did glance over the documentation on how to contribute but was not sure what to do in the case of a small typo, especially for something "brand new" which I assume is currently being refactored for the next iteration.

[colbyfayock]

not sure if this belongs here given its the README but on:
https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-recipes/README.md

an example uses

gatsby new try-emotion https://github.com/gatsbyjs/gatsby-starter-hello-world
cd try-emotion
gatsby recipes emotion

but doesn't mention upgrading gatsby in that starter. it fails when running yarn at least (similar to the above), but upgrading gatsby in that starter works to fix it

might be helpful to update in that starter as people start running into that 🤷‍♂️

[skorfmann]

I love the concept of Gatsby recipes! Are there plans to extract a generalized version of this, so that it becomes usable beyond Gatsby?

[KyleAMathews]

I love the concept of Gatsby recipes! Are there plans to extract a generalized version of this, so that it becomes usable beyond Gatsby?

It actually already does work outside of Gatsby! Gatsby is just one possible resource that recipes can manipulate. Try running the following recipe in e.g. a tmp folder. Things will work the same:

This isn't running in a Gatsby project

---

<File path="test.md" content="# hi" />
<NPMPackage name="foo" />

[skorfmann]

It actually already does work outside of Gatsby! Gatsby is just one possible resource that recipes can manipulate. Try running the following recipe in e.g. a tmp folder. Things will work the same:

Thanks for your reply, I'm aware that I could provide any mdx recipe as an argument to the gatsby recipe command. Let me elaborate on the use-case I have in mind:

I'm involved in the Cloud Development Kit (CDK) community and we were discussing something similar to Gatsby recipes, but with a focus on CDK products. While there would be a bit overlap with Gatsby for baked in recipes, the majority of recipes and a few providers would be tailored to our needs. However, the underlying engine which you've built, would probably work perfectly fine without any adjustments except for some wording und urls maybe.

That's why I was thinking, perhaps you have a plan already to extract the individual pieces as reusable components (graphql server, providers, built in recipes, ink components), so that other projects - like ours - could build on top of it and contribute back where possible. What do you think?

[KyleAMathews]

Ah interesting! Would be curious to see the discussions if possible. Really flattered by your interest!

We do want to extract out the pieces as we think that there's a lot of value in collaborating across projects as we'd all benefit from the improvements.

Two practical problems however:

• there's a very small team working on it atm (just ~1 FTE atm though that'll be increasing soon)
• we're not done designing and building the engine — recipes is an important piece of the puzzle for a larger product effort @ Gatsby that we're still in process of building — I'm a big fan of extracting frameworks out of a working product and we still don't have a working product. We're still very likely to make fundamental changes to different parts so it'd be tough to maintain any sort of stability of APIs.

These will resolve themselves over time so depending on your timeline, waiting could work. Another option if you/Hashicorp/others want to put in some significant time in the short/medium term, we could accelerate the timeline for when an engine can be extracted.

[KyleAMathews]

Integration with Terraform would be hugely valuable as well so would be keen to figure out that — there's a lot of great providers there that Gatsby devs would love to use.

[crock]

@KyleAMathews Did something change regarding the GatsbyPlugin api for recipes lately? Because recently today when I try running the official Wordpress recipe I made, I'm getting this error. It doesn't seem to recognize locally-defined plugins anymore.

gatsby recipes wordpress --install

The recipe has an error:

A resource (GatsbyPlugin: {"name":"gatsby-plugin-wordpress"}) is missing its dependency on
 {"resourceName":"NPMPackage","name":"gatsby-plugin-wordpress"}

[KyleAMathews]

sorry about the delay — a bit of a 🤦 I didn't see this earlier but fix is up @ #28417

[KyleAMathews]

@crock yeah I added validation that plugins must have an equivalent NPM package. Local plugins need a isLocal prop to tell Gatsby to avoid this check (https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-recipes/README.md#props) — I didn't update this recipe. Could you PR a fix?

[shoxton]

Just created a Chakra UI recipe. Check it out on https://raw.githubusercontent.com/shoxton/gatsby-recipe-chakra-ui/master/chakra-ui.mdx
I also opened a PR #27721 to add it to the official recipes.

[shoxton]

@crock yeah I added validation that plugins must have an equivalent NPM package. Local plugins need a isLocal prop to tell Gatsby to avoid this check (https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-recipes/README.md#props) — I didn't update this recipe. Could you PR a fix?

Just tried to run gatsby recipes wordpresss --install and it logged this error:

The recipe has an error:

Validation error: "isLocal" is not allowed

I'm using the following versions:

Gatsby CLI version: 2.12.113
Gatsby version: 2.24.91

Could you confirm if this is happening not just for me?

[gatsbybot]

Try upgrading your gatsby-cli version?

…

On Fri, Oct 30, 2020, 1:29 PM André ***@***.***> wrote: @crock <https://github.com/crock> yeah I added validation that plugins must have an equivalent NPM package. Local plugins need a isLocal prop to tell Gatsby to avoid this check ( https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-recipes/README.md#props) — I didn't update this recipe. Could you PR a fix? Just tried to run gatsby recipes wordpresss --install and it logged this error: The recipe has an error: Validation error: "isLocal" is not allowed Could you confirm if this is happening not just for me? — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <https://github.com/gatsbyjs/gatsby/issues/22991#issuecomment-719781636>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGDWMDOPVGXTIWTDACCTZQ3SNMOZVANCNFSM4MFHN5EA> .

[shoxton]

Try upgrading your gatsby-cli version?

I'm using the following versions:

Gatsby CLI version: 2.12.113
Gatsby version: 2.24.91

(just updated my question to include used versions)

[KyleAMathews]

#22991 (reply in thread)

[crock]

Could you confirm if this is happening not just for me?

Just connfirmed it's happening for me too. That's odd. I took a look at the Gatsby core code for the component and it does accept an isLocal prop.

gatsby/packages/gatsby-recipes/src/providers/gatsby/plugin.js

Line 525 in f43a6bd

{ id, key, name, options, isLocal = false }

https://raw.githubusercontent.com/gatsbyjs/gatsby/master/packages/gatsby-recipes/recipes/wordpress.mdx

[graysonhicks]

I have a custom Recipe that hangs up on install about midway through. It is a big recipe (about 40 steps) and is typically stalling out at a neverending install halfway through. The raw Recipe is here. It seems to work when running the individual recipes one at a time, but the large one is those individual ones pasted together in to one. Not sure why it is stalling.

[KyleAMathews]

Debugged this a bit w/ @graysonhicks — there was a 404 error with one of the <File> urls — since the recipe was really long it was hard to see it. Probably we need to collect all errors & print them again at the bottom.

[zielinsm]

I've ran into an issue with remark-mdx - while executing gatsby recipes, a following error is logged into the console and the recipe does not execute:

Missing onError handler and/or unhandled exception/promise rejection for invocation 'parseRecipe'. Original error: '1:1-1:1: Missing compiler for
 node of type `mdxBlockElement`: `[object Object]`'.  Stacktrace was 'Error: Missing compiler for node of type `mdxBlockElement`: `[object Object
]`

[TheFirstMe]

Did you solve this issue?

[zielinsm]

Unfortunately not.

[WENPIN1]

I meet the same issue.
gatsby recipes is totally unavailable while blocking at this error!

[k4y4k]

yeah, I just initialised a new site with gatsby new and I can use exactly 0 recipes. yarn add remark@13 didn't do anything for it.

[d-hancock]

Having the same issue. Any luck sorting it out?

[LinnJS]

Having a similar issue... 😢

Gatsby CLI version: 3.7.1

[d-hancock]

Hey @LinnJS ,

I've been having the same issue. I haven't had time to fork and look for a solution so I would recommend that for the time being you just manually pull up the recipe and mechanical-turk it until someone can take a look. Recipes is still an experimental feature that seems to not get the same attention as the core features of the platform. I imagine that work around these types of automation is shifting to an upcoming GUI for gatsby. The markdown inside each recipe is easy to follow and the configuration information is just pulled from a file openly hosted on GitHub so doing it manually is a bit of a pain but should work fine. Let me know if you need a hand.