Search code examples
typescriptwebpackpluginsstorybook

Add typescript paths to Storybook - Webpack v5?

Storybook comes with a built in Webpack configuration and till Webpack v4 it was possible to use tsconfig-paths-webpack-plugin and declare custom tscofnig (or any other plugin) as:

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

Has anyone made it work with Webpack v5 or used any other package?

Solution

  • Would still prefer solution with plugin configuration in main.ts file which would be more proper imo.
    But as workaround adding environment variable works:
    "storybook": "TS_NODE_PROJECT=tsconfig.dev.json start-storybook"