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?

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
}

Answer 2

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/

Answer 3

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

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

Answer 4

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.

Answer 5

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;
    },
};