Resolve Absolute / Alias Imports in Components with Storybook

Question

I'm using gatsby-plugin-alias-imports to be able to do absolute imports like so: import { colors } from "@styles/theme"; This is set up in the gatsby-config. Now I've just added storybook to my project. Since storybook doesn't run through gatsby, the alias imports won't resolve and I get an error:

ERROR in ./src/components/Button/index.js Module not found: Error: Can't resolve '@styles/theme' in ...

This makes sense. Storybook doesn't know what to do with @styles... - but how can I fix this?

Humidor

Answer 1

You need to configure Storybook's Webpack to follow the same directive by adding ./src to the resolutions array. In your .storybook/webpack.config.js file, add this to the body of the function being exported (assuming you're destructuring config from the first argument):

config.resolve.modules = [
  path.resolve(__dirname, "..", "src"),
  "node_modules",
]

Your webpack.config.js file should look something like this when you're done:

const path = require("path")

module.exports = ({ config }) => {
  // a bunch of other rules here

  config.resolve.modules = [
    path.resolve(__dirname, "..", "src"),
    "node_modules",
  ]

  // Alternately, for an alias:
  config.resolve.alias = {
    "@styles": path.resolve(__dirname, "..", "src", "styles")
  }

  return config
}

Mckoy

Thanks a lot, but I don't see how this would let webpack know where @styles points to? Also, @styles might not point to src/styles but to a completely different path? Or am I misunderstanding your answer here? – Humidor

@R.Kohlisch You just need to update src with the path to @styles. Alternately you can just define an alias the same way. Documentation for that is here. – Mckoy

Answer 2

You need to tell the webpack config for storybook to resolve the path aliases you have set in your tsconfig.json file.

Inside your .storybook/main.js file, you need to add the following.

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')

module.exports = {
    "webpackFinal": async config => {
        config.resolve.plugins.push(new TsconfigPathsPlugin())
        return config
    }
}

This adds the tsconfig-paths-webpack-plugin package to the storybook webpack config's resolve plugins and uses your tsconfig.json to resolve the path aliases.

This is also the exact way it would be done inside any webpack config file. I have dealt a lot with making path aliases work and this is the absolute easiest way to do it and will work every time.

Crystlecs

Super simple and worked for me! Thanks!!! – Trichloromethane

This only works for Webpack4 and below, tsconfigPathsPlugin is not currently compatible with 5+ – Bresnahan

Answer 3

In case you use @storybook/vite-builder. This neat config works for me

const tsconfigPaths = require("vite-tsconfig-paths");
...
module.exports = {
    ...
    framework: "@storybook/react",
    core: {
        "builder": "@storybook/builder-vite"
    },
    async viteFinal(config) {
        config.plugins.push(tsconfigPaths.default());

        return config;
    },
};

Sackville

Worked perfectly for me. Don't forget yarn -D vite-tsconfig-paths – Coordinate

Answer 4

It seems that you need to create custom babel config for storybook. Include there your configurations of gatsby-plugin-alias-imports

https://storybook.js.org/docs/configurations/custom-babel-config/

Nay

Answer 5

There is a great possibility that you will find your solution here.

Resolve alias in webpack config: https://github.com/storybookjs/storybook/issues/3339

Sackville