Docz: Not following webpack aliases

[gmarconi]

When using webpack aliases, docz won't follow them, giving the following error:

ERROR  Failed to compile with 3 errors     
These dependencies were not found:

* _atoms/overlay in [...]molecules/fields/clockField.js
* _molecules/fields/textField in [...]/molecules/fields/clockField.js
* _molecules/popup in [...]/molecules/fields/clockField.js

To install them, you can run: npm install --save _atoms/overlay _molecules/fields/textField _molecules/popup

My webpack config:

[...]
resolve: {
        modules: ['node_modules', 'src/common',],
        alias: {
            _usvc: path.resolve(__dirname, 'src/usvc'),
            _templates: path.resolve(__dirname, 'src/common/templates'),
            _organisms: path.resolve(__dirname, 'src/common/organisms'),
            _molecules: path.resolve(__dirname, 'src/common/molecules'),
            _atoms: path.resolve(__dirname, 'src/common/atoms'),
            _app: path.resolve(__dirname, 'src/appComponents'),
            _: path.resolve(__dirname, 'src'),
        },
    },
[...]

[nicholasess]

@gmarconi are you using the doczrc.js?

[gmarconi]

@nicholasess no, I'm not, (didn't find any option regarded to aliases, did I miss any?).

[nicholasess]

@gmarconi I have a suggestion:

First you can create a file with function called setAlias
example:

const path = require("path");
module.exports = config => {
  let newalias = {
    "@src": path.join(__dirname, "..", "src"),
    "@components": path.join(__dirname, "..", "src/components"),
    "@assets": path.join(__dirname, "..", "src/assets"),
    "@pages": path.join(__dirname, "..", "src/pages"),
    "@helpers": path.join(__dirname, "..", "src/helpers")
  };

  config.resolve.alias = { ...config.resolve.alias, ...newalias };
  return config;
};

In webpack, you will set alias with function

import setAlias from "./config/setAlias";
let webpackObj = {/* plugins, entry, outputs, alias,  etc */}
module.exports = setAlias(webpackObj);

In doczrc, the same thing that above

import setAlias from "./config/setAlias";

export default {
  modifyBundlerConfig: config => setAlias(config)
};

[gmarconi]

@nicholasess thanks, I've followed your suggestion and it worked. The only thing I've made differently was that I imported my webpack configuration so I wouldn't need to change it.

By the way, I've read the docs briefly and I didn't know it was possible to customize webpack configuration this way. Not sure if I missed it or if it's not on the docs, but if it isn't, It would be nice to update it including this info. When I get some free time, I'll read it thoroughly and send a PR if that's the case.

For anyone wondering, that's how my doczrc.js is after the changes:

import path from 'path';
import webpackCfg from './webpack.config.js';

const changeConfig = config => {
    config.resolve.alias = {
        ...config.resolve.alias,
        ...webpackCfg.resolve.alias,
    };
    //changed some other settings here (specific loaders, etc)

    return config;
};

export default {
    modifyBundlerConfig: changeConfig,
};

[nicholasess]

@gmarconi we want to create a guide session with tips like https://www.gatsbyjs.org/docs/, but if you want to send a PR, this is the link of repository from website -> https://github.com/pedronauck/docz-website

[gocamille]

Can modifyBundlerConfig be used if we're resolving aliases with a tsconfig.json too? Or does it only work with webpack?

[pedronauck]

They are different things @gocamille, even if you set custom paths on your tsconfig you need to set they as alias for webpack :)

[GradyTruitt]

@pedronauck @nicholasess I am having this same issue in V2 and it's not clear how to resolve it.. I am using Create-react-app and I have .docz implemented for our design system.

Here is my file:

import React from "react";
import PropTypes from "prop-types";
import primaryTheme from "themes/primaryTheme";
import icons from "icons/Icons";

import * as Styled from "./styles/StyledIcon";

const Icon = ({ name, ...restProps }) => {
  const Component = icons[name];
  return (
    <Styled.Icon {...restProps}>
      <Component />
    </Styled.Icon>
  );
};

const ICONS = Object.keys(icons);
const COLORS = Object.keys(primaryTheme.color);

Icon.propTypes = {
  /** The name of the icon */
  name: PropTypes.oneOf(ICONS).isRequired,
  /** Indicates the icon color */
  color: PropTypes.oneOf(COLORS),
  /** Indicates the hover color of the icon */
  hover: PropTypes.oneOf(COLORS),
  /** Indicates whether the icon is active when used in navigation */
  active: PropTypes.bool,
  /** Indicates the active color of the icon when used in navigation */
  activeFillColor: PropTypes.oneOf(COLORS),
  /** Defines the size in px of the icon (sets the width and maxHeight)*/
  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  /** Indicates whether the icon should be hoverable or not */
  nopointer: PropTypes.bool
};

Icon.defaultProps = {
  color: "contrast",
  size: "18px",
  nopointer: false,
  active: false
};

export default Icon;

The issue is coming from import icons from 'icons/Icons'

in our .env we have NODE_PATH=src which allows us to start our imports from ./src... The problem is when we import the component into the .mdx the icons/Icons path is no longer found.. Is there some way to fix this issue in V2?

[rakannimer]

Hey @GradyTruitt

To be able to use absolute imports from ./src you'll need to modify the docz webpack config to tell it how to resolve paths like "icons/Icons".

To do that, add a gatsby-node.js file in your root directory :

const path = require('path')

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
    // Note the '..' in the path because the docz gatsby project lives in the `.docz` directory
      modules: [path.resolve(__dirname, '../src'), 'node_modules'],
    },
  })
}

You can also see a complete working example here : https://github.com/doczjs/docz/tree/master/examples/webpack-alias