Docz: Can't resolve ~db or ~imports

[JeroenReumkens]

Bug Report

Describe the bug
I have the feeling that after this commit I can't run docz anymore: https://github.com/pedronauck/docz/commit/6d9bb2507b3a23aff825a1a2efd53bcdc8080240#diff-1e7a151ea59cd3f5090a28e374906791

It shows me this error;

These dependencies were not found:

* ~db in ./node_modules/docz/dist/index.m.js
* ~imports in ./node_modules/docz/dist/index.m
.js

To install them, you can run: npm install --sa
ve ~db ~imports

I tried already re-installing all node modules and deleting cache, but that didn't work.
It seems to be broken from version 0.12.10 and up. 0.12.9 is still working.

A clear and concise description of what the bug is.
Docz won't start.

Environment
Mac OSX Mojave.
Node 8.11.3
Npm 6.3.0

[pedronauck]

can you show me a little bit version of your repo @JeroenReumkens?

[JeroenReumkens]

Thanks for the quick reply @pedronauck I'm right now diving a little bit deeper. I just upgrade from 0.12.5 to the latest version, and then it broke. But after a clean install I see 0.12.9 is also broken. So it might be that there is indeed in something wrong in my repo. I'm trying to narrow it down now.

[JeroenReumkens]

@pedronauck Found it! We added our own aliases, but did it by completely replacing the alias object (since it wasn't used before by docz). So removing that fixed it! 🎉

You can close this. Thanks.

[minheq]

@JeroenReumkens where did you add your aliases? I am facing the same error, running docz in jest environment and it throws the same error as the one u reported

Update: due to aliases in dist of docz, in environment such as jest it will fail to load ~db. A worked around I have implemented is adding

// doczMock.js
import React from 'react';

module.exports.Playground = ({ children }) => <div>{children}</div>;
module.exports.PropsTable = ({ children }) => <div>{children}</div>;

and alias'ed docz module to mock:

"jest": {
    ...
    "moduleNameMapper": {
      "^docz$": "./doczMock.js"
    }
  },

[JeroenReumkens]

@minheq I didn’t face any issues with jest. I extended the webpack config in the docz config file and added the alias override in there. However I added a complete new object as module.aliases since there weren’t any in docz at that time. Changing if from overriding to extending fixed it.

[minheq]

@JeroenReumkens thanks for the info, i think our use case differed.
My use case was to run snapshot tests of all components rendered in docz. In case anyone was curious about implementation (requires more polish as of 8th December 2018):

https://github.com/WeTrustPlatform/paramount/commit/46f1225d63e599ef38d3184610aa43b6da42bc60

[pedronauck]

You need to merge your alias with the docz default aliases. Use something like webpack-merge is a good option to prevent errors :)

[psullivan6]

An additional solution that I've found is to do an Object.assign with the existing docz aliases and my desired custom aliases like so:

const aliases = require('./path-to-custom/aliases');

export default {
  modifyBundlerConfig : (config) => {
    // Combine the default docz aliases with our custom aliases from an external file
    config.resolve.alias = Object.assign({}, config.resolve.alias, aliases);
    return config;
  }
};

For my particular project, logging config.resolve.alias within the modifyBundlerConfig function yields:

{
  '~db': '[PROJECT_ROOT]/.docz/app/db.json',
  '~imports': '[PROJECT_ROOT]/.docz/app/imports.js',
  'react-native$': 'react-native-web'
}

showing that the alias object is setup with these "defaults" and thus custom aliases need to be added on via Object.assign or similar.

While the webpack-merge is probably the better solution for a more robust build, this works for something a bit smaller.