Fixing Typescript Path Mapping In Storybook

The Problem

This blog may be useful to you if:

  • You are using typescript path mapping (checkout Typescript Module Resolution).
  • The problem goes away if you switch to relative imports in your storybook files (for example, import Button from "./../components/Button" vs import Button from "components/Button". Checkout the link above for more details).
  • Your issue only appears in Storybook and not in your actual application.
  • Your error looks similar to this:
typescript path mapping error In Text:
    Unexpected error while loading ./stories/Feature/Page Content/Button.stories.tsx: Cannot find module 'components/Feature/Common/Button'
    Error: Cannot find module 'components/Feature/Common/Button'
        at webpackMissingModule (http://localhost:6006/main.iframe.bundle.js:1248:50)
        at ./src/stories/Feature/Page Content/Button.stories.tsx (http://localhost:6006/main.iframe.bundle.js:1248:157)
        at __webpack_require__ (http://localhost:6006/runtime~main.iframe.bundle.js:28:33)
        at fn (http://localhost:6006/runtime~main.iframe.bundle.js:339:21)
        at webpackContext (http://localhost:6006/main.iframe.bundle.js:2526:9)
        at http://localhost:6006/vendors-node_modules_sitecore-jss_sitecore-jss-react_dist_esm_components_SitecoreContext_js-n-3f8f16.iframe.bundle.js:12815:29
        at Array.forEach ()
        at http://localhost:6006/vendors-node_modules_sitecore-jss_sitecore-jss-react_dist_esm_components_SitecoreContext_js-n-3f8f16.iframe.bundle.js:12813:18
        at Array.forEach ()
        at executeLoadable (http://localhost:6006/vendors-node_modules_sitecore-jss_sitecore-jss-react_dist_esm_components_SitecoreContext_js-n-3f8f16.iframe.bundle.js:12812:10)
    error @ index.js:56

The Quick Solution

I was stumped at first, but with a little bit of trial and error, I identified that typescript path mapping is the cause. Then it was just a matter of simple googling to find a way for Storybook (in this case, webpack) to resolve the paths.

Step 1 - Install tsconfig-paths-webpack-plugin

Run npm i tsconfig-paths-webpack-plugin.

Step 2 - Modify Your Storybook's main.js File

Add config.resolve.plugins to your webpackFinal in main.js like so:

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');  --- ADD THIS LINE ---

module.exports = {
  "stories": [
  "addons": [
  staticDirs: [...],
  "framework": "@storybook/react",
  "core": {
    "builder": "@storybook/builder-webpack5"
  webpackFinal: async (config, { configType }) => {        --- ADD THIS LINE ---
    config.resolve.plugins = [new TsconfigPathsPlugin()];  --- ADD THIS LINE ---
    return config;                                         --- ADD THIS LINE ---
  }                                                        --- ADD THIS LINE ---


If done correctly, Storybook should now be able to resolve ts path mapping correctly. Your mileage may vary if you are using different versions of webpack, storybook, or typescript. Here is my relevant package.json:

    "dependencies": {
        "next": "^12.1.6",
        "next-localization": "^0.10.0",
        "nprogress": "~0.2.0",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "sb": "^6.5.8"
    "devDependencies": {
        "@storybook/addon-actions": "^6.5.8",
        "@storybook/addon-essentials": "^6.5.8",
        "@storybook/addon-interactions": "^6.5.8",
        "@storybook/addon-links": "^6.5.8",
        "@storybook/addon-postcss": "^2.0.0",
        "@storybook/builder-webpack5": "^6.5.8",
        "@storybook/manager-webpack5": "^6.5.8",
        "@storybook/preset-scss": "^1.0.3",
        "@storybook/react": "^6.5.8",
        "@storybook/testing-library": "^0.0.11",
        "tsconfig-paths-webpack-plugin": "^3.5.2",
        "typescript": "~4.3.5",
    "scripts": {

👋 Hey Sitecore Enthusiasts!

Sign up to our bi-weekly newsletter for a bite-sized curation of valuable insight from the Sitecore community.

What’s in it for you?

  • Stay up-to-date with the latest Sitecore news
  • New to Sitecore? Learn tips and tricks to help you navigate this powerful tool
  • Sitecore pro? Expand your skill set and discover troubleshooting tips
  • Browse open careers and opportunities
  • Get a chance to be featured in upcoming editions
  • Learn our secret handshake
  • And more!
Sitecore Snack a newsletter by Fishtank Consulting