Docz: Absolute path not resolved in react components

[simonepizzamiglio]

Question

Description
I'm trying to setup docz for a react-native project but It returns an error when my react component files have an absoulte path.

// Button.js
import theme from 'src/styles/theme';

This is the error docz returns when I run yarn docz dev

ERROR #98123  WEBPACK

Generating SSR bundle failed

Can't resolve 'src/styles/theme' in 'my-app/src/components'

File: ../src/components/Button.js

Is there a way to fix this?

[rakannimer]

Hey @simonepizzamiglio

There definitely is a way to fix this.

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

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

But since this is a react-native project you will also probably need to alias react-native to react-native-web. Your final config should look like :

const path = require('path')

exports.onCreateWebpackConfig = args => {
  args.actions.setWebpackConfig({
    resolve: {
      modules: [path.resolve(__dirname, '../'), 'node_modules'],
      alias: {
        'react-native': 'react-native-web',
      },
    },

  })
}

That should solve your issue, but please let us know if it doesn't 👍

[simonepizzamiglio]

Thanks for answering mate! Your solution works :)
I was so close, the only different with my configuration was the modules line, my path was ../src/ instead yours is ../

Only one thing, your need to slightly change you code, the object alias should be within resolve and not outside otherwise it won't work :)

[rakannimer]

Awesome ! Happy to hear that.

Only one thing, you need to slightly change you code, the object alias should be within resolve and not outside otherwise it won't work :)

Good catch, missed that one 😄 ! I edited the comment to reflect it for posterity.

Going to close this, feel free to open another if anything else doesn't work 👍