Configurable module resolvers

When there’s custom resolver logic being used by Webpack in the project Docz is unable to find them. For example, when using something like directory-named-webpack-plugin Docz seems unable to resolve modules.

For example, given the following resolve setup in webpack.config.js

resolve: {
  modules: [path.resolve('./src'), path.resolve('./node_modules')],
  plugins: [
    // Then when require("component/foo") and the path "component/foo" is
    // resolved to a directory, Webpack will try to look for
    // component/foo/foo.js as the entry (given default options).
    new DirectoryNamedWebpackPlugin({
      include: [path.resolve('./src')],
    }),
  ],
},

components/TextInput/TextInput.js

import Button from 'components/Button';

export default class TextInput extends Component {}

components/TextInput/TextInput.mdx

---
name: TextInput
---

import { Playground, PropsTable } from 'docz'
import TextInput from './TextInput.js'

# TextInput

<PropsTable of={TextInput} />

## Basic usage

<Playground>
  <TextInput></TextInput>
</Playground>

Results in

This dependency was not found:

• components/Button in ./src/components/TextInput/TextInput.js

Similarly if i were to change the import of TextInput.js in the mdx file to

import { Playground, PropsTable } from 'docz'
import TextInput from 'components/TextInput.js'

This dependency was not found:

• components/TextInput.js in ./src/components/TextInput/TextInput.mdx

It’d be great if we could configure the webpack resolver options (and therefore be able to import the ones from the project’s webpack.config.js file).

Jest has a similar feature whereby you can set the module resolver to a module/function. This module jest-webpack-resolver grabs the config from webpack and plugs it into jest. Perhaps this could be used for ideas?

Apologies if I’m missing something and there’s already a facility by which do do something like this?

Cheers

[pedronauck]

Use onCreateWebpackChain to create your alias, it’s more safety:

export default {
  onCreateWebpackChain: config => {
    config.resolve.alias.set('foo', 'bar')
  }
}

[adeelibr]

Also I am using rollup, for my library melting-pot https://github.com/withvoid/melting-pot! So the below change was the option for me for using alias in docz site https://melting-pot.netlify.com/

// .babelrc
(...)
"plugins": [
    ["module-resolver", {
        "root": ["./src"],
        "alias": {
            "app": "./src/app"
        }
    }]
],
(...)

Reference https://github.com/pedronauck/docz-plugin-css/issues/1#issuecomment-425502093

P.S: Thank you for such an amazing tool.