Docz: [gatsby-theme-docz] Using Docz in existing Gatsby site fails

[madeleineostoja]

I'm trying to migrate from Storybook to Docz within an existing Gatsby project, and Docz is trying to use my site's config and gatsby-node page generators. Which causes the Docz build to fail and error all over the place.

What's the recommended approach of embedding Docz within an existing Gatsby site, to document its components?

[madeleineostoja]

Update: tried using gatsby-theme-docz, but now docz doesn't pull in any of my components etc to ./.docz/, just the child theme and my pages

[madeleineostoja]

Okay more digging, figured I can fix the million can't resolve x in y errors by setting up a webpack alias, but the only way to do that is the gatsby-node.js, which will mess up my actual Gatsby build. Is there a custom env context or something Docz uses I could hook into? Or is Docz just not designed to work alongside Gatsby?

I'm also still getting lots of X fragment doesn't exist and cannot query fields x on y errors from Docz trying to interact with my site's data source. I _think_ they're just noise though

[madeleineostoja]

Also tried shadowing gatsby-node.js in src/gatsby-theme-docz to no avail

[jesperorb]

Docz is supposed to work as a theme to gatsby as my understanding source

But I think it is just set up on picking up gatsby-node.js if existent which I think is how most will use it but not ideal in many cases, like yours.

I have also had some trouble with using aliases and I think it's a bit broken or not giving back enough error/info on why it is not working: #1480

Can you explain to me your folder structur och setup a bit clearer as I am having trouble picturing what you have and what you are trying to accomplish.

[madeleineostoja]

My folder structure is pretty standard for a Gatsby project:

|  components
|  |  component
|  |  |  index.ts
|  |  |  Component.mdx    
|  pages
gatsby-config.js
gastby-node.js

I was hoping to use Docz to document the components in my Gatsby project, from .mdx files colocated with each component. The issue is that Docz expects you to provide a gatsby-node and gatsby-config file just for it. This means that it's incompatible with Gatsby projects as far as I understand, because Gastby also needs those files (obviously), and the config for a production site and a Docz setup there will almost always be vastly different.

For now I'm just switching to Storybook ^5.3, which now includes functionality very similar to Docz. Would still prefer to use Docz since it's lighter for what I want (component library for clients).

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Steffi3rd]

Did you finally find a solution to your problem?

[drewlustro]

I've tried to get shadowing to work with gatsby-theme-docz and still cannot figure it out

[madeleineostoja]

Yes, I moved back to Storybook 🤷‍♀️

[drewlustro]

Wow @seaneking, I found that the shadowed theme must be in src/, even though I didn't have an src/ directory prior. That solves my shadowing issue I think?

root
 |- doczrc.js
 |- components
 |- src
     |
     |- gatsby-theme-docz
           |
           |- wrapper.js