reactjs - Cómo agregar rutas de TypeScript a Storybook

Tengo una aplicación React con una configuración personalizada de Webpack. Después de agregar alias de Webpack que coinciden con el archivo tsconfig.json en el campo compilerOptions->paths, los alias fueron reconocidos por Webpack.

Dado que Storybook viene con una configuración de Webpack incorporada, mis alias no son reconocidos por Storybook y estoy recibiendo el siguiente error:

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

Respuesta #1

En el archivo main.js de Storybook, agrega lo siguiente:

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

};

Puedes instalar tsconfig-paths-webpack-plugin usando el siguiente comando desde la carpeta en la que se encuentra el archivo package.json de tu aplicación:

npm i tsconfig-paths-webpack-plugin -D

La solución se derivó de esta discusión: https://github.com/storybookjs/storybook/issues/6316

Respuesta #2

Para los futuros visitantes de esta pregunta, desde el 15 de julio de 2022 los libros de historias pueden usar Vite en lugar de Webpack.

En ese caso, recomiendo usar vite-tsconfig-paths en lugar de tsconfig-paths-webpack-plugin. Si estás usando rutas de TS en Vite, probablemente ya tengas este paquete instalado.

Agrega esto a tu .storybook/main.js

const { mergeConfig } = require("vite")
const { default: tsconfigPaths } = require('vite-tsconfig-paths')

module.exports = {
  // your previous configs and more...
  viteFinal(config, { configType }) {
    return mergeConfig(config, {
      plugins: [
        tsconfigPaths()
      ]
    })
  }
}