Unable to import workspace libraries

[dustinlacewell]

Current Behavior

Unable to import any of the libraries in my workspace.

Expected Behavior

The ability to import workspace libraries.

Steps to Reproduce

Create a workspace with NX 12, boostrap a react component library and docusaurus. Try to import the react component library.

Failure Logs

./apps/docs/src/scenes/BoidScene.tsx
Module not found: Can't resolve '@react-ecs/boids' in '/home/ldlework/src/react-ecs/apps/docs/src/scenes'./apps/docs/src/pages/index.tsx
Module not found: Can't resolve '@react-ecs/core' in '/home/ldlework/src/react-ecs/apps/docs/src/pages'

### Environment
  Node : 14.16.0
  OS   : linux x64
  yarn : 1.22.10

  nx : Not Found
  @nrwl/angular : Not Found
  @nrwl/cli : 12.0.6
  @nrwl/cypress : 12.0.6
  @nrwl/devkit : 12.0.6
  @nrwl/eslint-plugin-nx : 12.0.6
  @nrwl/express : Not Found
  @nrwl/jest : 12.0.6
  @nrwl/linter : 12.0.6
  @nrwl/nest : Not Found
  @nrwl/next : 12.0.6
  @nrwl/node : Not Found
  @nrwl/react : 12.0.6
  @nrwl/schematics : Not Found
  @nrwl/tao : 12.0.6
  @nrwl/web : 12.0.6
  @nrwl/workspace : 12.0.6
  @nrwl/storybook : 12.0.6
  @nrwl/gatsby : Not Found
  typescript : 4.1.5

[BuckyMaler]

This is related to #127 and #112. We don't plan on adding TypeScript support to Docusaurus soon, but we'd appreciate a contribution. If you're unable to contribute at this time, then perhaps this workaround will help you.

[dustinlacewell]

I have tried the method mentioned in https://github.com/ZachJW34/nx-plus/issues/112 to no avail:

const tsconfig = require('../../tsconfig.base.json');
const paths = tsconfig.compilerOptions.paths;
const alias = Object.keys(paths).reduce(
    (aliases, k) => ({ ...aliases, [k]: './' + paths[k][0] }),
    {}
);

module.exports = {
    presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
    plugins: [
        [
            require.resolve('babel-plugin-module-resolver'),
            {
                alias: alias,
            },
        ],
    ],
};

[schirrel]

I couldnot make this work, i've also wrote on the original issue https://github.com/ZachJW34/nx-plus/issues/112#issuecomment-1245663498

[clemenscodes]

I was able to import components from other libraries by prepending the full relative path to the aliases and then importing the components in the mdx files using a full relative path as well.

const tsconfig = require('../../tsconfig.base.json');
const paths = tsconfig.compilerOptions.paths;
const alias = Object.keys(paths)
    .reduce(
        (aliases, k) => ({ ...aliases, [k]: '../../' + paths[k][0] }),
        {}
    );

module.exports = {
    presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
    plugins: [
        [
            require.resolve('babel-plugin-module-resolver'),
            {
                alias,
            },
        ],
    ],
};

And in the markdown file:

# Documentation

import { Button } from '../../../libs/components/src/lib/button/button';

<Button>Test</Button>

It's not pretty but at least the files get resolved correctly that way.