How to use a local Gatsby plugin or theme?

Hi,

I have not found a way to create a Gatsby plugin or theme in the libs folder and make it discoverable in the Gatsby-config.js of any given app.

Is that possible?

for example, my workspace is called websites.

I manually add a theme gatsby-theme-base in the libs folder and populate all the relevant files (workspace.json, nx.json, tsconfig…).

When I try to import this theme into a Gatsby app, it fails to see it.

Any idea how to create plugins or themes in libs folder that can be used in the apps?

Thanks.

[ronnetzer]

Hi @xiongemi. Thanks for your support but why was this issue closed? clearly that your solution is not a production-ready solution. You should consider providing some custom builder and generators in order to support gatsby libraries as part of nx workspace correctly. it should support --with-deps when building the app that uses the gatsby libs, it should be able to support tsconfig paths so it will be possible to use the import path of the library inside gatsby-config.js file

[xiongemi]

For gatsby plugin:

To make a gatsby plugin under lib to be discovered by gatsby app:

• in lib folder, add a package.json, also, this package.json needsto have a main value points to a .js file. you could create an empty js file

{
  "name": "@nx-gatsby-blogs/ui",
  "version": "1.0.0",
  "main": "index.js"
}

in your gatsby.config.js, in plugins, add require.resolve(<path to your libfolder>), it should be discovered by gatsby:

      {
        resolve: require.resolve(`../../libs/ui`),
      },

For Gatsby Theme:

• for the gatsy theme app, you could just create another gatsby app, after creating the app, in the app’s package.json, also, need to add a main value, just points to gatsby-config.js like below:

{
  "name": "gatsby-starter-default",
  "private": true,
  "description": "A simple starter to get up and developing quickly with Gatsby",
  "version": "0.0.0",
  "license": "MIT",
  "main": "gatsby-config.js",
  "dependencies": {
    "gatsby": "3.2.1"
  }
}

• for gatsby app that consume the theme, in its gatsby-config.js, under plugins, add require.resolve(<path to your libfolder>)

{
      resolve: require.resolve(`../blog-medium`),
      options: {
        ...
      },
    },

I have played around with it in my repo: https://github.com/xiongemi/nx-gatsby-blogs/tree/gatsby-theme, the theme app is https://github.com/xiongemi/nx-gatsby-blogs/tree/gatsby-theme/apps/blog-medium and the app consumes this theme is https://github.com/xiongemi/nx-gatsby-blogs/tree/gatsby-theme/apps/blog-medium-emily-xiong