Las propiedades de los parámetros de TypeScript no funcionan con Storybook + Rollup (en el entorno de desarrollo)

TypeScript viene con una característica útil llamada propiedades de parámetros para convertir un parámetro del constructor en una propiedad de la clase con el mismo nombre y valor. Sin embargo, por alguna razón, al usar TypeScript con Storybook y Rollup, las propiedades del constructor no se transpilán a propiedades de la clase.

Código de ejemplo:

mi_clase.ts

class Params {
  constructor(
    public property: number
  ) {}
}

En un entorno de desarrollo de Storybook (iniciado con yarn storybook), Params.property es undefined y no se puede acceder a él.

Aquí están mis archivos de configuración:

rollup.config.js

import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';

const packageJson = require('./package.json');

export default {
    input: 'src/index.ts',
    output: [
        {
            file: packageJson.main,
            format: 'cjs',
            sourcemap: true,
        },
        {
            file: packageJson.module,
            format: 'esm',
            sourcemap: true,
        },
    ],
    plugins: [
        peerDepsExternal(),
        resolve(),
        commonjs(),
        typescript({
            tsconfig: './tsconfig.json',
        }),
    ],
};

package.json

{
    "name": "cursor-ui",
    "version": "0.1.0",
    "license": "MIT",
    "devDependencies": {
        "@babel/core": "^7.16.0",
        "@rollup/plugin-commonjs": "^21.0.1",
        "@rollup/plugin-node-resolve": "^13.0.6",
        "@rollup/plugin-typescript": "^8.3.0",
        "@storybook/addon-actions": "^6.4.9",
        "@storybook/addon-essentials": "^6.4.9",
        "@storybook/addon-links": "^6.4.9",
        "@storybook/react": "^6.4.9",
        "@types/react": "^17.0.35",
        "babel-loader": "^8.2.3",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "rollup": "^2.60.0",
        "rollup-plugin-peer-deps-external": "^2.2.4",
        "rollup-plugin-typescript2": "^0.31.0",
        "styled-components": "^5.3.3",
        "themeprovider-storybook": "^1.8.0",
        "typescript": "^4.5.2"
    },
    "peerDependencies": {
        "react": "^16.8.0",
        "react-dom": "^16.8.0",
        "styled-components": ">= 5"
    },
    "dependencies": {},
    "scripts": {
        "storybook": "start-storybook -p 6006",
        "build-storybook": "build-storybook",
        "build": "rollup -c"
    },
    "main": "lib/index.js",
    "module": "lib/index.esm.js",
    "types": "lib/index.d.ts",
    "files": [
        "src",
        "lib"
    ]
}

tsconfig.js

{
    "compilerOptions": {
        "target": "es5",
        "rootDir": "./src",
        "outDir": "./lib",
        "lib": ["dom", "dom.iterable", "esnext"],
        "declaration": true,
        "declarationDir": "./",
        "allowJs": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react-jsx",
        "downlevelIteration": true
    },
    "include": ["src"],
    "exclude": ["node_modules", "lib"]
}

.storybook/main.js

module.exports = {
    stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
    addons: ['@storybook/addon-links', '@storybook/addon-essentials', 'themeprovider-storybook/register'],
};

Hasta donde yo sé, Storybook usa webpack internamente. ¿Hay alguna configuración que necesite cambiarse? ¿O el problema es causado por otra cosa?

Nota: Después de compilar la biblioteca (usando yarn build) la salida parece ser correcta con las propiedades de clase presentes. El problema solo ocurre durante el desarrollo.

Respuesta #1

Este problema es causado por un error conocido en Storybook. Como solución temporal, agrega el siguiente fragmento de código a .storybook/main.js:

babel: async options => {
        return {
            ...options,
            plugins: options.plugins.filter(x => !(typeof x === 'string' && x.includes('plugin-transform-classes'))),
        };
    },

Por favor, consulte el problema vinculado en GitHub para más detalles y explicaciones.