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:

In Text:

index.js:56
    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": {
        ...
    }
}