Docz: Integrating babel-plugin-module-resolver with docz

[KevenMax]

Question

When I run yarn docz dev, I get this error:

ERROR #98123 WEBPACK

Generating SSR bundle failed

Can't resolve '/components/C1'...

File: ../src/components/C2/index.jsx

Description

Basically, for my components, I'm using babel module-resolver. I tried some suggested solutions here in issues using gatsby-node.js and gatsby-config.js, but none worked for me.

Any ideas on how I can make this work? thanks in advance

[rakannimer]

Hello @KevenMax

It looks like you want to resolve absolute paths starting from the src directory in your project.

Docz relies on Gatsby which relies on webpack. To make this work you'll need to tell webpack how to interpret that absolute path.

Start by creating a file gatsby-node.js in your root directory.

Then inside of it write the following :

const path = require('path')

exports.onCreateWebpackConfig = args => {
  args.actions.setWebpackConfig({
    resolve: {
      modules: [path.resolve(__dirname, '../src'), 'node_modules']
    },
  })
}

This will tell webpack to try to resolve paths starting from your root directory (../src because docz stores this file in .docz/ ) or from node_modules.

This should work but since I know very little about your use-case it might not. If it doesn't could you please provide more details on what it is exactly you need done so I can help debug further 👍

Cheers !

[rakannimer]

There's also an example of using babel plugin with docz here : https://github.com/doczjs/docz/blob/master/examples/with-decorators/gatsby-node.js

Just in case that's helpful

[KevenMax]

Hello @rakannimer!

The first solution works fine, but I need to remove the bar to work, like this:
'components/C1'

To use with babel module-resolver I needed to use onCreateBabelConfig. But I had used onCreateBabelConfig before, so I realized that my src path to root was wrong :/

The correct way is below:

exports.onCreateBabelConfig = ({actions}) => {
   actions.setBabelPlugin ({
     name: `babel-plugin-module-resolver`,
     options: {
       root: ['../src'],
     },
   })
}

Thank you @rakannimer!

[rakannimer]

Awesome ! Thank you @KevenMax for providing the solution for future readers !

Going to close this issue please feel free to re-open or comment here if you face another one 👍 !