Docz dosent find custom paths

[maxguzenski]

Hi, I have this config on my webpack:

    resolve: {
      modules: [
        '.',
        '..',
        __dirname,
        __dirname + '/js',
        'node_modules'
      ]
   }

So, in can import without use things like '../'

import Link from 'components/Link'

But on docz, got a error (file not found)

 ERROR  Failed to compile with 8 errors17:02:37

These dependencies were not found:

* components/base in ./js/components/button/ButtonCircle.jsx, ./js/components/button/ButtonSquare.jsx
* components/icons in ./js/components/button/ButtonCircle.jsx, ./js/components/button/ButtonSquare.jsx
* components/link in ./js/components/button/Button.jsx

Is there a way to config root paths to find components on docz?

[pedronauck]

I think that change the resolve.modules directly is not a good option, because we have some paths that docz need to find, so If you change it, probably you'll get an error...

Use .push or .concat to add new modules to existent one!

[good-idea]

@maxguzenski I got it working by creating a simple plugin, it looks like this:

import { createPlugin } from 'docz-core'

const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.config')()

/**
 * Add support for custom resolvers
 */

const includeResolvers = () =>
    createPlugin({
        modifyBundlerConfig: (bundler) => {
            const merged = merge(bundler, { resolve: baseWebpackConfig.resolve })
            return merged
        },
    })

module.exports = {
    source: './src',
    plugins: [includeResolvers()],
}

I'm still having some odd issues with it, though - some components work, and some don't. Trying to figure out the cause, I'll follow up here or with another issue.

[pedronauck]

you can use modifyBundlerConfig directly without a plugin @good-idea

// doczrc.js
export default {
  modifyBundlerConfig: (config) => /* ... */
}

[good-idea]

@pedronauck , I also need to use modifyBabelRc, because my aliases are also used in my project's .babelrc. It looks like this can only be done using a plugin - maybe this should be something that can be used on the config object?

Also, it might be helpful to throw a warning if there are unexpected or incompatible properties found on config or plugin objects - for instance, if I named my plugin function modifyBabelRC instead of modifyBabelRc, it would be helpful to know that this isn't recognized and won't be used.

[pedronauck]

Release v0.2.7 turns possible to pass modifyBabelRc option directly without plugins

[chrstntdd]

Is there current a way that docz can handle aliases afforded by the paths option in a given tsconfig.json file? I have alias @/path/to/component that resolves to the src directory and it currently won't work :/

[hrajchert]

Hi, same question here... I'm developing a component that should be used inside an mdx file, so I'm adding inside tsconfig.json a path that maps the name of the library to the index of the project, but docz doesn't seem to find it :(

[dfee]

This works for me:

const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");

export default {
  modifyBundlerConfig: config => {
    /*
     * use tsconfig paths, e.g.: `import Button from components/Button`
     */
    config.resolve.plugins = [
      new TsconfigPathsPlugin({ configFile: "./tsconfig.json" })
    ];

    /*
     * allow proptype generation with tsconfig.
     * https://github.com/pedronauck/docz/issues/240#issuecomment-415689181
     */
    const jsxPluginIndex = config.plugins.findIndex(
      plugin => plugin.config.id === "jsx"
    );
    const { loaders } = config.plugins[jsxPluginIndex].config;
    const docGenLoaderIndex = loaders.findIndex(loader =>
      /react-docgen-typescript-loader/.test(loader.loader)
    );
    const docGenLoader = loaders[docGenLoaderIndex];
    docGenLoader.options = {
      tsconfigPath: "./tsconfig.json"
    };

    return config;
  },
  typescript: true
};

I still get errors like this at startup:

Could not find dependency version for components/content

But those don't seem to actually affect anything.

[selrond]

@dfee confirmed, I'm getting them as well

[williamluke4]

@dfee Is this still working for you? I have tried your config above but i get the following error

TypeError: Cannot read property 'id' of undefined
    at id (D:\Documents\Atto-Byte\Projects\react-component-lib/doczrc.js:47:31)
    at Array.findIndex (<anonymous>)
    at Object.findIndex [as modifyBundlerConfig] (D:\Documents\Atto-Byte\Projects\react-component-lib/doczrc.js:46:50)
    at Bundler.mountConfig (D:\Documents\Atto-Byte\Projects\react-component-lib\node_modules\docz-core\dist\index.js:776:22)
    at process._tickCallback (internal/process/next_tick.js:68:7)

[stramel]

With the latest version of Docz v2 I was able to utilize TypeScript paths using the following.

// gatsby-node.js
const TSPathsPlugin = require('tsconfig-paths-webpack-plugin');

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
      plugins: [new TSPathsPlugin({ configFile: '../tsconfig.json' })]
    }
  });
};

I hope this helps someone who runs into this. I am utilizing it in my NX repo.

[crusoexia]

@stramel

That's work for me. 👍

[rpivo]

@stramel I tried to make a gatsby-node.js file at the root of my typescript file like what you have there, but this doesn't seem to work for me. My I should be putting the gatsby-node.js file elsewhere. In my tsconfig file, I have these relative imports:

    "paths": {
      "@components/*": ["components/*"],
      "@env": ["../env.ts"],
      "@pages/*": ["pages/*"],
      "@styles/*": ["styles/*"],
      "@utilities/*": ["utilities/*"],
    },

Does anyone know how to get docz to use these relative imports?

[brettdewoody]

After a lot of trial and error I got this working similar to @stramel's solution, but also ran into the issue here about the file not being used due to an error. In my case it was a stupid mistake - I was using an import instead of a require.

To ensure your gatsby-node.js file is being used, add a console.error('Error') to the gatsby-node.js file, this way you know when you fire up Docz the file is being correctly loaded and used. If you don't see the error in your console the file isn't being loaded.