Resolve Absolute / Alias Imports in Components with Storybook

user_9316628 0
Viewed 16983

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?

storybook gatsby webpack reactjs javascript
4 Answers

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
}
user_2031300

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.

user_154881070
user_90355860
user_126782690
Related