Issue setting up in monorepo with docz in multiple packages

[chunksnbits]

Bug Report

Describe the bug I am working on a lerna monorepo project that holds an existing gatsby project (calledwebsite) and a library style project called design-system. In the file system this looks like:

NOTE The project is set up using gatsby-theme-docz. But some quick test using the cli yielded the same results.

packages
 |- design-system
      |- components/button.tsx
      |- components/button.md
 |- website
      |- components/page-header/subnavigation.md
      |- components/page-header/page-header.txs
      |- components/page-header/page-header.md
      | doczrc.js
      | gatsby-config.js
      | package.json 

The page-header uses the button component (via a library style import in subcomponent called subnavigation.tsx, i.e. ímport { Button } from '@namespce/desgin-system)`.

Both page-header and button define a markdown file using mdx format (includingplayground and props helper from docz)

Whever I start the gatsby application (website) the build gets stuck on In progress I get the following error:

ERROR

There was an error compiling the html.js component for the development server.

See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html  Cannot create styled-component for component: undefined.

  205 |       var _this = possibleConstructorReturn(this, _Error.call(this, 'An error occurred. See https://github.com/styled-components/styled-components/blob/master/packages/styled-components/src/utils/errors.md#' + code + ' for more information.' + (interpolations.length > 0 ? ' Additional arguments: ' + interpolations.join(', ') : '')));
  206 |     } else {
> 207 |       var _this = possibleConstructorReturn(this, _Error.call(this, format.apply(undefined, [ERRORS[code]].concat(interpolations)).trim()));
      | ^
  208 |     }
  209 |     return possibleConstructorReturn(_this);
  210 |   }

  WebpackError: Cannot create styled-component for component: undefined.

  - styled-components.esm.js:207 new StyledComponentsError
    [website]/[styled-components]/dist/styled-components.esm.js:207:1

  - styled-components.esm.js:1347 constructWithOptions
    [website]/[styled-components]/dist/styled-components.esm.js:1347:1

  - styled-components.esm.js:2237 styled
    [website]/[styled-components]/dist/styled-components.esm.js:2237:1

  - sub-navigation.tsx:47 Module../src/components/page-header/sub-navigation.tsx
    src/components/page-header/sub-navigation.tsx:47:36

  - mdx-scopes.js:2 Module.../../node_modules/gatsby-plugin-mdx/loaders/mdx-scopes.js
    [website]/[gatsby-plugin-mdx]/loaders/mdx-scopes.js:2:15

  - react-common.esm.js:38 execFunction
    [website]/[@apollo]/react-common/lib/react-common.esm.js:38:1

  - react-common.esm.js:22 execHelper
    [website]/[@apollo]/react-common/lib/react-common.esm.js:22:1

  - react-common.esm.js:26 execMethod
    [website]/[@apollo]/react-common/lib/react-common.esm.js:26:6

  - react-common.esm.js:82 process.emit
    [website]/[@apollo]/react-common/lib/react-common.esm.js:82:45

  - react-hooks.esm.js:571 emit
    [website]/[@apollo]/react-hooks/lib/react-hooks.esm.js:571:1

The website gatsby server starts as expected, if I delete the button.md file. In that case the page-header.mdx is output as expected.

I tried different settings in docz config, e.g.,

• restricting src: './src'
• custom filterComponents settings, including one that returned just [], i.e., filtered out all files
• propsParser: false
• docgenConfig: { searchPath: '%absolute%/package/website/src'}

All to no avail. The error is consisten regardless of my settings.

UPDATE If i move the button.mdx into the website package (button.tsx stays within design-system package), I can start the server again.

To Reproduce This is the file content for buth mdx files:

button.md

---
name: Button
status: alpha
route: /docs/components
---
import { Playground, Props } from 'docz'
import { PrimaryButton, SecondaryButton, TertiaryButton, DeleteButton } from './button';

## Props
<Props of={PrimaryButton} />

## Button variants
<Playground>
  <PrimaryButton autofocus>Primary</PrimaryButton>
 ...

page-header.mdx

---
name: PageHeader
status: alpha
route: /docs/components/page-header
---

import { Playground } from 'docz'
import { PageHeader } from './page-header';

# PageHeader

## Examples
<Playground>
  <PageHeader />
 ...

Expected behavior

• The website gatsby projects starts.
• The website gatsby creates pages for both md files.
• The website gatsby project does not show error

Environment

• docz version: 2.0.0-rc.71
• OS: OSX 10.15.1
• Node/npm version: v10.16.0 | 6.9.0

Additional context/Screenshots Add any other context about the problem here. If applicable, add screenshots to help explain.

Would really love to get this working. Any help is much appreciated!

[rakannimer]

Hey @chunksnbits ,

Since you have mdx files in different packages did you consider putting docz at the root of your monorepo and using it as a cli as shown here ?

If that doesn't help, could you provide a repro to make debugging your problem easier ?

Cheers !

[chunksnbits]

Thanks for the reply.

On the project I am working on docz is an appendix on an already existing gatsby project. So using the gatsby-plugin-docz package seemed the most natural choice to me.

But I will look deeper into the example provided over the next couple of days to see if I can reuse anything or otherwise provide a minimal example to reproduce.

[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.