Cannot import component from React lib into Markdown (docusaurus)

[jugglingcats]

Current Behavior

Apologies if this has been covered somewhere but I couldn't find it. I'm expecting to be able to import the components to document into Markdown in order to show their behaviour. The components will be in various libs within the NX project developed in Typescript. And apologies if this is not a bug, it just seems the way it should work!

I added the following to my markdown:

---
id: doc2
title: Document Number 2
---

import {Tiles} from "@gb/tiles"

<Tiles/>

This is a link to [another document.](doc3.md) This is a link to an [external page.](http://www.example.com/)

Error on render:

./apps/glowsaurus/docs/doc2.md
Module not found: Can't resolve '@gb/tiles' in 'D:\xxxxxx\gb\apps\glowsaurus\docs'

Expected Behavior

Component imported and displayed.

Steps to Reproduce

npx create-nx-workspace@^9.0.0
# named nx project 'gb', empty project
cd gb
npm i --save-dev @nrwl/react
nx g @nrwl/react:library tiles
npm install @nx-plus/docusaurus --save-dev
nx g @nx-plus/docusaurus:app glowsaurus
nx serve glowsaurus

Then I edited doc2.md as shown above.

Environment

Plugin name and version: 10.0.0

$ nx report

>  NX  Report complete - copy this into the issue template

  @nrwl/angular : Not Found
  @nrwl/cli : 9.0.0
  @nrwl/cypress : 10.3.0
  @nrwl/eslint-plugin-nx : Not Found
  @nrwl/express : Not Found
  @nrwl/jest : 10.3.0
  @nrwl/linter : 10.3.0
  @nrwl/nest : Not Found
  @nrwl/next : Not Found
  @nrwl/node : Not Found
  @nrwl/react : 10.3.0
  @nrwl/schematics : Not Found
  @nrwl/tao : 9.0.0
  @nrwl/web : 10.3.0
  @nrwl/workspace : 9.0.0
  typescript : 3.7.5

[ZachJW34]

I tried importing a React javascript component with a relative path and it rendered correctly. I don't think Docusaurus supports rendering typescript React components in mdx though, and resolving the aliases might be doable via the babel.config.js with something like babel-plugin-module-resolver or a custom plugin but it's not something that would be a priority for us to support. I think storybook would fit your needs better.

[jugglingcats]

Thanks @ZachJW34 for your response - good information. I will look into the options you suggest and report back.

We looked quite a bit at Storybook. The feeling is that Storybook is more geared to internal documentation while we prefer Docusaurus for customer-facing docs. So we are trying to get the best of both worlds - good developer experience for components and when writing documentation, plus nice customer-facing packaged docs.

[jugglingcats]

@ZachJW34 your suggestion to use babel-plugin-module-loader was a good one. Although I couldn't manage to get my components imported directly in the MDX, using the babel plugin made the library components visible to my swizzled CodeBlock theme, which is actually where I was trying to get to all along! I suspect the library components would work when using the new ReactLiveScope in docusaurus, but I couldn't manage to swizzle the latest version - possibly related to facebook/docusaurus#3466.

For interest my babel.config.js is below.

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

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

Closing this issue - thanks for your help!

[ZachJW34]

Glad it worked out!

[dustinlacewell]

I have tried the method above and I don't think it is working any longer:

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,
            },
        ],
    ],
};

It results in errors like this:

Docusaurus Node/SSR could not render static page with path=/ because of error: Module parse failed: Unexpected token (1:119)
File was processed with these loaders:
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
> import{Facet}from"../../../core/src/index.ts";import{Vector3}from"three";export class Acceleration extends Facet{amount=new Vector3(0,0,0);}

[schirrel]

I've tried the workaround but it adds too much ../ to the path, shoudl be only ../../ but it results as ../../../../
When using ./:

My structure is

• apps
  • my nuxt app
• libs
  • shared
    • ds

i've add as follow on my nuxt config:

  build: {
    babel: {
      plugins: [
        [
          require.resolve('babel-plugin-module-resolver'),
          {
            alias,
          },
        ],
      ],
    },
  },

my path alias is

"@marketplace/ds/vuetify": ["libs/shared/ds/src/plugins/vuetify/theme.ts"]
    },