Docz: Monorepo nested folders in packages does not work

[giulianok]

Question

I'm currently trying to migrate to 2.x and I have a monorepo using Lerna. I'm using Atomic Design System to organize my components, and I have the following folder structure:

root
├── package.json
├── packages
│   ├── atoms
│   │   ├── Button
│   │   │   ├── package.json
│   │   │   ├── README.md
│   │   │   ├── src
│   │   │   │   ├── index.mdx
│   │   │   │   ├── index.less
│   │   │   │   ├── index.tsx
│   ├───└───└───└── index.spec.tsx
│   ├── molecules
│   ├── organisms
│   └── utilities
└── ...

The project is pretty large and very hard to migrate and find the source of the issues, so I started a fresh new project and I replicated the structure (I only added the folders atoms and utilities.

The Button package.json name value is button and just importing it as the example I get Can't resolve 'button' in '/Projects/docz-app-monorepo-separate-docs/packages/docs/.docz/.cache/caches/gatsby-plugin-mdx/mdx-scopes-dir'.

This I have tried:

1. Changed import from import Button from 'button' to import Button from 'atoms/button'
2. I found workspaces in the root package, I changed it as following:

from

"workspaces": {
    "packages": [
      "packages/*"
    ]
  },

to

"workspaces": {
    "packages": [
      "packages/**/"
    ]
  },

1. I also tried adding atoms in the workspaces object:

from

"workspaces": {
    "packages": [
      "packages/*"
    ]
  },

to

"workspaces": {
    "packages": [
      "packages/atoms/"
    ]
  },

and this one as weel

"workspaces": {
    "packages": {
      "atoms": [
         "packages/**/*"
         // also with  "packages/atoms/**/*"
       ]
    }
  },

1. I changed the folder and package.json name from alert to atom-alert and it does not work anymore..

[deammer]

I'm having a similar issue with my monorepo. I get the errors below when I try to import a file from one directory to the other:

 ERROR #98123  WEBPACK

Generating SSR bundle failed

Can't resolve '../../../../../../../source/src/Button' in '/Users/maxime/Code/docz-monorepo/documentation/.docz/.cache/caches/gatsby-plugin-mdx/mdx-scopes-dir'

File: .cache/caches/gatsby-plugin-mdx/mdx-scopes-dir/049a239130db62be40d44f60627af4dd.js


 ERROR #98123  WEBPACK

Generating SSR bundle failed

Can't resolve '@emotion/core' in '/Users/maxime/Code/docz-monorepo/source/src'

File: ../../source/src/Button.jsx

Here's a barebones repo where I reproduced the problem. This used to work. cc @rakannimer

[rakannimer]

@giulianok could you provide a small repro it would be really helpful !

Also, did you install button from the package where you're using it ?

@deammer thanks for providing a repro ! This setup will indeed break docz because it's not a yarn or lerna workspace so webpack won't know where to look for dependencies. I submitted a PR that tells webpack to look in both documentation and source node_modules for dependencies.

Another way to solve it would be to use a lerna or yarn workspace that will hoist node_modules to the top and won't need special webpack configuration 👍

[deammer]

@rakannimer thank you for the quick fix! Posting your code here for posterity in case I delete the test repo:

In gatsby-node.js:

const path = require("path");

exports.onCreateWebpackConfig = args => {
  const documentationNodeModules = path.resolve("../node_modules");
  const sourceNodeModules = path.resolve("../../source/node_modules");
  args.actions.setWebpackConfig({
    resolve: {
      modules: [documentationNodeModules, sourceNodeModules]
    }
  });
};

[rakannimer]

You're welcome @deammer, thanks for posting the code here 👍

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

[hassankhan]

Hi all, I seem to be having the same issue when trying to add Docz to an existing Lerna monorepo project: https://github.com/spartan-ui/spartan-ui/compare/feat/docs. The project also uses Typescript, and I've looked through the examples and tried to follow them as much as possible, but I've had no luck getting this error to go away.

$ docz dev

Building app
warn Configuring yargs through package.json is deprecated and will be removed in the next major release, please use the JS API instead.
success open and validate gatsby-configs - 0.575s
success load plugins - 0.228s
success onPreInit - 0.006s
success initialize cache - 0.006s
success copy gatsby files - 0.033s
success onPreBootstrap - 0.215s
success createSchemaCustomization - 0.006s
warn Configuring yargs through package.json is deprecated and will be removed in the next major release, please use the JS API instead.
⠧ source and transform nodes
⚠  warning   No cache was found with your props definitions
⚠  warning   We'll parse your components to get props from them
success source and transform nodes - 4.513s
success building schema - 0.239s
success createPages - 0.003s
success createPagesStatefully - 0.871s
success onPreExtractQueries - 0.042s
success update schema - 0.044s
success extract queries from components - 0.086s
success write out requires - 0.142s
success write out redirect data - 0.003s
success onPostBootstrap - 0.002s
⠀
info bootstrap finished - 8.527 s
⠀
success run queries - 0.053s - 21/21 396.09/s

 ERROR #98123  WEBPACK

Generating SSR bundle failed

Can't resolve '../../../../../packages/layout/src/Footer/Footer' in '/spartan-ui/.docz/.cache/caches/gatsby-plugin-mdx/mdx-scopes-dir'