Not following webpack aliases

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'),
        },
    },
[...]

[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

[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)
};