How to add typescript paths to storybook

Question

I have a react application with a custom Webpack configuration. After adding Webpack aliases that matches tsconfig.json file compilerOptions->paths field the aliases were recognized by webpack.

Since storybook comes with a built in Webpack configuration, my aliases are not read by Storybook and I'm getting the following error:

Module not found: Error: Can't resolve <path with typescript alias> in <some folder path>

Answer 1

In Storybook main.js file, add the following:

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
module.exports = {
  ...,
  webpackFinal: async (config, { configType }) => {
       config.resolve.plugins = [new TsconfigPathsPlugin()];<-- this line
       return config;
  }

};

You can install tsconfig-paths-webpack-plugin using the following command from the folder in which you application's package.json file resides:

npm i tsconfig-paths-webpack-plugin -D

Solution was derived from this discussion: https://github.com/storybookjs/storybook/issues/6316