Docz: Yarn workspaces support

[brunolemos]

Bug Report

Describe the bug

Compilation fail when importing components from another yarn workspace.

To Reproduce

1. Create one docz workspace and one shared workspace
2. Create components on shared
3. Import them on docz
4. See error

Module parse failed: Unexpected token (11:2)
You may need an appropriate loader to handle this file type.
| 
| export default () => (
>   <Touchable onPress={() => alert('pressed')}>
|     <Text style={styles.text}>Shared Button</Text>
|   </Touchable>

 @ ./src/index.mdx 9:0-61 66:93-99
 @ ./.docz/app/imports.js
 @ ./.docz/app/index.jsx
 @ multi ../node_modules/docz-core/node_modules/babel-polyfill/lib/index.js ./.docz/app/index.jsx

Environment

• OS: macOS 10.14
• Node/npm version: Node 8.11.3 / npm 5.6

Additional context/Screenshots
If I move the docz code to shared it will work. It only works if the components are in the same "project". If you try to import from another workspace it fails.

If you setup docz in the root directory (outside all workspaces) it fails as well, but with another error.

doczrc.js

module.exports = {
  themeConfig: {
    colors: {
      primary: 'black',
    },
  },
  typescript: true,
}

docz package.json

{
  "name": "docz",
  "version": "0.0.1",
  "scripts": {
    "start": "docz dev",
    "build": "docz build"
  },
  "dependencies": {
    "shared": "0.0.1"
  },
  "devDependencies": {
    "docz": "^0.10.2"
  }
}

docz/src/index.mdx

---
name: Hello world
---

import Button from 'shared/src/components/common/Button.tsx'

# Hello world

<Button>Click</Button>

[bogdansoare]

also having this issue, is there any possibility to transpile node_modules ?

[nicholasess]

@brunolemos It isn't error from docz and yes for the yarn workspace.

[brunolemos]

@nicholasess: It isn't error from docz and yes for the yarn workspace.

I don't think so. Docz needs to prepare the webpack config for this, supporting multiple project roots. I don't know details, but here's an example of a PR: https://github.com/facebook/create-react-app/pull/3741

[pedronauck]

For sure @brunolemos I agree with you that is related to docz instead of yarn. But, is not a "problem", is an architecture decision. It's not a good practice import from other packages in a monorepo without transpiling and since they will be in the node_modules they won't be transpiled. What you can do in this case is change the loader do transpile from a specific node_modules since we're ignoring all node_modules folder to be transpiled.

About create-react-app I saw this week on twitter that they're dropping support for monorepo. So, I think that change the entire structure to support monorepo can be a good choice.

[aarshaw]

Anyone have a good workaround for this?

[pedronauck]

See how https://github.com/smooth-code/smooth-ui work @aarshaw, they're using docz in a monorepo!

[aarshaw]

Ended up using something similar to this ^ ...feels king of hacky but works

Updated doczrc.js to the following:

import path from 'path'

const modifyBundlerConfig = config => {
  config.module.rules[0].include.push(path.join(__dirname, '..', 'SHARED_PACKAGE_NAME'))

  return config
}

export default {
  modifyBundlerConfig,
}

[mattietea]

Update

I changed my docsrc.js to this and it works now!

export default {
  title: "@hello/ui",
  codeSandbox: false,
  typescript: true,
  modifyBundlerConfig: config => {
    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      loader: require.resolve("babel-loader"),
      options: {
        presets: [["react-app", { flow: false, typescript: true }]]
      }
    });
    config.resolve.extensions.push(".ts", ".tsx");
    return config;
  }
};

Anybody having this issue when upgrading to v1?

If I have a component inside of packages/docs it works fine. The only issue is when I try to import a component from another package.

ERROR  Failed to compile with 1 errors                                                                                                                                             
error  in ../ui/index.tsx

Module parse failed: Unexpected token (3:24)
You may need an appropriate loader to handle this file type.
| import React from 'react';
| 
> export default props => <div {...props} />;
| 

 @ ./index.mdx 16:0-37 49:29-40
 @ ./.docz/app/imports.js
 @ ./.docz/app/root.jsx
 @ ./.docz/app/index.jsx
 @ multi /Users/mattthomas/Desktop/ui/node_modules/react-dev-utils/webpackHotDevClient.js ./.docz/app/index.jsx

My folder structure is like this:

/packages
    /docs
        - docsrc.js
        - index.mdx
    /ui (@hello/ui)
        - index.tsx

Here are the relevant files if that helps!

// packages/docs/doczrc.js

import path from "path";

export default {
  title: "@hello/ui",
  codeSandbox: false,
  typescript: true,
  modifyBundlerConfig: config => {
    config.resolve.alias = Object.assign({}, config.resolve.alias, {
      "@hello/ui": path.resolve(__dirname, "..", "ui")
    });
    return config;
  }
}

// packages/ui/index.tsx

import React from 'react';

export default props => <div {...props} />;

// packages/docs/index.mdx

---
name: Getting Started
route: /
---

import MyComponent from "@hello/ui";

<MyComponent>Hello</MyComponent>