How can I use absolute paths in my React styleguidist component library?

Question

I have a React component library that is used in a React app. The component library is setup using Styleguidist and webpack. I've setup webpack to use absolute paths using:

webpackConfig: {
  resolve: {
    modules: [path.resolve(__dirname, 'src/'), 'node_modules'],
  }
}

This works within the context of the component library. When I build the component library, the package looks like this:

/core
  /components
    /Table
    /Row

When I import the components into my app, I get an error:

Module not found: Can't resolve components/Row in /Users/myusername/Sites/mysite/node_modules/@mypackage/core/components/Table

I understand why the paths don't match in the context of node_modules, but I would've expected Webpack to transform those import paths during the build process. Is there something I'm missing? Or is this not possible?

Could you replicate the problem in a GH repo? – Andrei Gătej Aug 06 '21 at 18:50 — Andrei Gătej, Aug 06 '21 at 18:50

score 0 · Answer 1 · answered Aug 06 '21 at 20:40

While Styleguidist uses webpack, it turns out the build script we were using does not, so the webpack config is irrelevant. Instead, our build script (https://www.npmjs.com/package/cod-scripts) uses babel.

We ended up having to add a separate babel.config.js file to define absolute paths for babel using the babel-plugin-module-resolver package.

npm install babel-plugin-module-resolver --saveDev
npm install @babel/preset-react --saveDev

babel.config.js

module.exports = {
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
      },
    ],
  ],
  presets: ['@babel/preset-react'],
};

How can I use absolute paths in my React styleguidist component library?

1 Answers1