Storybook: Addon-docs: soporte de TypeScript del bloque de documentos de origen

¡Gracias @ enagy27! Hay al menos algunas opciones aquí:

1) source-loader puede generar código mecanografiado más amigable
2) el usuario puede configurar el mecanografiado de manera diferente (no he visto esto en nuestro monorepo)
3) source-loader puede generar @ts-ignore como solución alternativa

Creo que la tercera opción es la más sencilla de comenzar, la primera es probablemente la mejor a largo plazo.

¡¡El fantasma del gran César !! Acabo de publicar https://github.com/storybookjs/storybook/releases/tag/v5.2.0-beta.39 que contiene PR # 7831 que hace referencia a este problema. ¡Actualice hoy para probarlo!

Puede encontrar esta versión preliminar en la etiqueta @next NPM.

Cerrando este tema. Vuelva a abrir si cree que aún hay más por hacer.

@ enagy27 no tiene una reproducción, por lo que sería genial si pudieras intentarlo y avisarme si funciona.

@shilman absolutamente! Darle una oportunidad ahora. ¡Gracias!

@shilman sigue viendo estos errores en beta.39 😞

ERROR in /Users/eric.nagy/workspace/component-library/src/elements/tag/tag.stories.tsx
./src/elements/tag/tag.stories.tsx
[tsl] ERROR in /Users/eric.nagy/workspace/component-library/src/elements/tag/tag.stories.tsx(69,52)
      TS7005: Variable '__MODULE_DEPENDENCIES__' implicitly has an 'any[]' type.

ERROR in /Users/eric.nagy/workspace/component-library/src/elements/tag/tag.stories.tsx
./src/elements/tag/tag.stories.tsx
[tsl] ERROR in /Users/eric.nagy/workspace/component-library/src/elements/tag/tag.stories.tsx(74,3)
      TS2300: Duplicate identifier 'parameters'.

Resultados de npx -p @storybook/cli<strong i="10">@next</strong> sb info

Environment Info:

  System:
    OS: macOS 10.14.5
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 10.16.0 - /usr/local/opt/node@10/bin/node
    Yarn: 1.17.3 - ~/workspace/component-library/node_modules/.bin/yarn
    npm: 6.9.0 - /usr/local/opt/node@10/bin/npm
  Browsers:
    Chrome: 76.0.3809.100
    Safari: 12.1.1
  npmPackages:
    @storybook/addon-a11y: ^5.2.0-beta.39 => 5.2.0-beta.39 
    @storybook/addon-actions: ^5.2.0-beta.39 => 5.2.0-beta.39 
    @storybook/addon-docs: ^5.2.0-beta.39 => 5.2.0-beta.39 
    @storybook/addon-knobs: ^5.2.0-beta.39 => 5.2.0-beta.39 
    @storybook/addon-links: ^5.2.0-beta.39 => 5.2.0-beta.39 
    @storybook/addon-viewport: ^5.2.0-beta.39 => 5.2.0-beta.39 
    @storybook/addons: ^5.2.0-beta.39 => 5.2.0-beta.39 
    @storybook/preset-scss: 1.0.2 => 1.0.2 
    @storybook/preset-typescript: 1.1.0 => 1.1.0 
    @storybook/react: ^5.2.0-beta.39 => 5.2.0-beta.39 
    @storybook/theming: ^5.2.0-beta.39 => 5.2.0-beta.39

Dado que esto está en el cargador de origen, ¿es necesario instalarlo por separado y luego lo retoma el ajuste preestablecido, o se requiere una nueva versión del ajuste preestablecido?

@ enagy27 ¿ puede echar un vistazo a la fuente cargada usando las instrucciones aquí y ver si la fuente cargada incluye el cambio en # 7831? (reemplace .mdx con .tsx y el resto debería aplicarse)

https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/faq.md#how -do-i-debug-my-mdx-story

@shilman Solo puedo iniciar el servidor cuando sourceLoaderOptions: null está en vigor 😞 de lo contrario, una compilación defectuosa detiene el inicio del servidor y no puedo inspeccionar la fuente en el navegador. ¿Existe tal vez una opción de línea de comando para omitir e iniciar el servidor de todos modos en la primera compilación fallida?

¡¡Juerga!! Acabo de publicar https://github.com/storybookjs/storybook/releases/tag/v5.2.0-beta.40 que contiene PR # 7845 que hace referencia a este problema. ¡Actualice hoy para probarlo!

Puede encontrar esta versión preliminar en la etiqueta @next NPM.

@ enagy27 Fusionó y publicó sus cambios. ¿Darle una oportunidad?

@shilman no as any pero parece que luego se queja de la variable duplicada parameters , lo que me hace preguntarme si __STORY__ no se está escapando correctamente. Pero luego no puedo ver cómo funcionaría para JS y no para TS ... estoy perplejo

También estoy experimentando este problema, pero desafortunadamente no tengo mucho contexto adicional.

Otra solución aquí es anular todas las reglas de verificación de tipo "estrictas" en el archivo tsconfig.js que carga el libro de cuentos (ya sea el tsconfig de su proyecto o un .storybook/tsconfig.js (creo)).

Creo que estos son los que debe asegurarse de que no estén habilitados:

@libetl Sé que estás muy ocupado, pero sería genial si pudieras echarle un vistazo a este.

@JonKrone cuando haces esto, ¿ves el código fuente en la pestaña de documentos? Hice estas modificaciones y todavía no veo la fuente 😞

Una solución temporal si usa awesome-typescript-loader:

/* tsconfig.json */
{
  "compilerOptions": { },
  "awesomeTypescriptLoaderOptions": {
    "ignoreDiagnostics": [7005]
  }
}

no es ideal, pero funciona.

@shilman ¿Es esto lo que estás buscando? Para su información, esto no se construiría sin ignorar TS7005 (no implícito).

  // @ts-ignore
  var withSourceLoader = require('@storybook/source-loader/preview').withSource;
  // @ts-ignore
  var __SOURCE_PREFIX__ = "/home/user/projects/real/ts/my-blog-react/src/graphql";
  // @ts-ignore
  var __STORY__ = "import React from \"react\";\n\nimport { ApolloProvider } from \"@apollo/react-hooks\";\nimport { storiesOf } from \"@storybook/react\";\n\nimport { Posts } from \"../views/Posts/index\"; // ! Fix coupling\nimport { PostContent } from \"../views/PostContent\"; // ! Fix coupling\nimport { withPostContentQuery } from \"./components/withPostContentQuery\";\nimport { withPostsQuery } from \"./components/withPostsQuery\";\nimport * as fakeQl from \"./fakeql/fakeql-endpoints\";\nimport apolloClientFactory from \"./apollo\";\n\n// FIXME: #coupling - find a way to not depend on Post and Container, probably fakes - but not good enough.\n\nconst apolloClient = apolloClientFactory(fakeQl.normalApiEndpoint);\nconst PostContentQuery = withPostContentQuery(PostContent);\nconst PostsQuery = withPostsQuery(Posts);\n\n// ~~~ Posts ~~~\nstoriesOf(\"GraphQL\", module).add(\"PostsQuery\", () => (\n  <ApolloProvider client={apolloClient}>\n    <PostsQuery routeHandler={() => null} />\n  </ApolloProvider>\n));\n\n// ~~~ PostContent ~~~\nstoriesOf(\"GraphQL\", module).add(\"PostContentQuery\", () => (\n  <ApolloProvider client={apolloClient}>\n    <PostContentQuery postId=\"1\" />\n  </ApolloProvider>\n));\n";
  // @ts-ignore
  var __ADDS_MAP__ = {"graphql--postsquery":{"startLoc":{"col":33,"line":20},"endLoc":{"col":1,"line":24},"startBody":{"col":47,"line":20},"endBody":{"col":1,"line":24}},"graphql--postcontentquery":{"startLoc":{"col":33,"line":27},"endLoc":{"col":1,"line":31},"startBody":{"col":53,"line":27},"endBody":{"col":1,"line":31}}};
  // @ts-ignore
  var __MAIN_FILE_LOCATION__ = "/root.stories.tsx";
  // @ts-ignore
  var __MODULE_DEPENDENCIES__ = [];
  // @ts-ignore
  var __LOCAL_DEPENDENCIES__ = {};
  // @ts-ignore
  var __IDS_TO_FRAMEWORKS__ = {};

  import React from "react";

import { ApolloProvider } from "@apollo/react-hooks";
import { storiesOf } from "@storybook/react";

import { Posts } from "../views/Posts/index"; // ! Fix coupling
import { PostContent } from "../views/PostContent"; // ! Fix coupling
import { withPostContentQuery } from "./components/withPostContentQuery";
import { withPostsQuery } from "./components/withPostsQuery";
import * as fakeQl from "./fakeql/fakeql-endpoints";
import apolloClientFactory from "./apollo";

// FIXME: #coupling - find a way to not depend on Post and Container, probably fakes - but not good enough.

const apolloClient = apolloClientFactory(fakeQl.normalApiEndpoint);
const PostContentQuery = withPostContentQuery(PostContent);
const PostsQuery = withPostsQuery(Posts);

// ~~~ Posts ~~~
storiesOf("GraphQL", module).addParameters({ storySource: { source: __STORY__, locationsMap: __ADDS_MAP__ } }).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add("PostsQuery", () => (
  <ApolloProvider client={apolloClient}>
    <PostsQuery routeHandler={() => null} />
  </ApolloProvider>
));

// ~~~ PostContent ~~~
storiesOf("GraphQL", module).addParameters({ storySource: { source: __STORY__, locationsMap: __ADDS_MAP__ } }).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add("PostContentQuery", () => (
  <ApolloProvider client={apolloClient}>
    <PostContentQuery postId="1" />
  </ApolloProvider>
));

@ 0b10 ¡Lo tsconfig.json también 🤔

Recibí errores aquí después de actualizar storybook-react-router a 1.0.6, que tiene un problema abierto: gvaldambrini / storybook-router # 42 No recibo errores aquí (los errores de storybook-router probablemente no estaban relacionados, vea el comentario a continuación )

"No hay código disponible" en mis historias de TSX, MDX funciona bien, el resultado se ve similar / exactamente como la historia de @ 0b10

  // @ts-ignore
  var withSourceLoader = require('@storybook/source-loader/preview').withSource;
  // @ts-ignore
  var __SOURCE_PREFIX__ = "C:\\Workspace\\application-ui\\src\\components\\atoms\\container";
  // @ts-ignore
  var __STORY__ = "import { storiesOf } from \"@storybook/react\";\nimport React, { ReactElement } from \"react\";\n\nimport { Container } from \"components\";\n\nconst stories = storiesOf(\"Atoms/Container\", module).addParameters({ component: Container });\n\nstories.add(\"Default\", (): ReactElement => <Container>Hello</Container>);\n";
  // @ts-ignore
  var __ADDS_MAP__ = {};
  // @ts-ignore
  var __MAIN_FILE_LOCATION__ = "/Container.stories.tsx";
  // @ts-ignore
  var __MODULE_DEPENDENCIES__ = [];
  // @ts-ignore
  var __LOCAL_DEPENDENCIES__ = {};
  // @ts-ignore
  var __IDS_TO_FRAMEWORKS__ = {};

  import { storiesOf } from "@storybook/react";
import React, { ReactElement } from "react";

import { Container } from "components";

const stories = storiesOf("Atoms/Container", module).addParameters({ storySource: { source: __STORY__, locationsMap: __ADDS_MAP__ } }).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).addParameters({ component: Container });

stories.add("Default", (): ReactElement => <Container>Hello</Container>);

Config.js actualizado ya que solo era docs: DocsPage

    docs: {
        container: DocsContainer,
        page: DocsPage,
    },

Preajustes:

module.exports = [
    {
        name: "@storybook/addon-docs/react/preset",
        options: {
            configureJSX: true,
        },
    },
];

Configuración de paquete web, ¿posiblemente no sea necesaria?

    config.module.rules.push({
        exclude: /node_modules/,
        test: /\.(ts|tsx)$/,
        use: [
            {
                loader: require.resolve("babel-loader"),
                options: {
                    presets: [["react-app", { flow: false, typescript: true }]],
                },
            },
            {
                loader: require.resolve("react-docgen-typescript-loader"),
            },
        ],
    });

    config.module.rules.push({
        enforce: "pre",
        include: [path.resolve(__dirname, "../src")],
        loader: require.resolve("@storybook/source-loader"),
        test: /\.(stories|story)\.[tj]sx?$/,
    });

tsconfig.json incluye "noImplicitAny": true y no ignoreDiagnostics 😕

Ya no veo problemas con rc.4 , pero sin fuente 😞 Aunque parece que esto también está marcado en # 6641, ahora que los errores ya no están presentes, este problema puede ser un duplicado

¡Encontré una solución!

• En lugar de usar sourceLoaderOptions: null , usé transpileOnly: true en mi tsLoaderOptions
• Siga la solución alternativa en # 8055, donde no puede haber una variable parameters nivel superior
• Por alguna razón, el uso de declaraciones de la mano derecha como as 'optionA' | 'optionB' falló aquí y tuvo que convertirse a declaraciones de tipo de la mano izquierda.

Esto falla:

const colors = {
  primary: 'primary',
  secondary: 'secondary',
};

const color = radios('color', colors, colors.primary) as ButtonColor;

Esto funciona:

const colors: Record<string, ButtonColor> = {
  primary: 'primary',
  secondary: 'secondary',
};

const color = radios('color', colors, colors.primary);

En retrospectiva, esto parece un problema source-loader comprensible con la inferencia de tipos 🤔 de todos modos, ¡espero que esto ayude!

@ enagy27 Estás darte cuenta de esto. Espero que @libetl vuelva a estar en línea en algún momento en 5.3, y podamos actualizar source-loader para que estas soluciones no sean necesarias. ¡Dedos cruzados! 🤞

Hola. ¿Alguien puede proporcionar un repositorio de ejemplo en el que funcionen los libros de cuentos con react mecanografiado y documentos?

@simonhoss esta es una gran idea, realmente estoy luchando para que esto funcione.

yo tambien 😄

Las instrucciones de TS le indican react-docgen-typescript-loader que dice instalar addon-info pero antes en la documentación, ¿no dice que addon-docs es un reemplazo de addon-info ? Sería muy útil ver una configuración funcional de esto con TS o algunas instrucciones claras en un lugar específicamente para configurar addon-docs con TS.

¡Feliz de contribuir y ayudar, pero primero necesito entender cómo encajan estas piezas! 👍

Ahora que se han publicado los documentos, es posible que pueda tomarme un tiempo para actualizar cra-ts-kitchen-sink para asegurarme de que todos estamos en la misma página para la configuración 🙂 aunque puede ser una semana más o menos ... por ahora Proporcionaré mi configuración:

.storybook / addons.js

import '@storybook/addon-knobs/register';
import '@storybook/addon-a11y/register';
import '@storybook/addon-actions/register';

.storybook / config.js

import { configure, addDecorator, addParameters } from '@storybook/react';
import { withA11y } from '@storybook/addon-a11y';
import { withKnobs } from '@storybook/addon-knobs';

import theme from './theme';
import '../stylesheets/gusto.scss';

// This file overrides styles from the global Gusto
// styles which interfere with Storybook styles
import './storybook.scss';

// Is your addon not showing up? Try looking for a `register` function
// and add it to .storybook/addons.js
addDecorator(withA11y);
addDecorator(withKnobs);

addParameters({
  // storybook built-in
  // more info available here:
  // https://storybook.js.org/docs/configurations/options-parameter/
  options: {
    showPanel: true,
    panelPosition: 'right',
    // https://storybook.js.org/docs/configurations/theming/
    theme,
  },
  knobs: {
    escapeHTML: false,
  },
  // viewport structure here:
  // https://github.com/storybookjs/storybook/tree/master/addons/viewport#use-custom-set-of-devices
  // viewport: {
  //   defaultViewport: 'iphone6',
  //   type: 'mobile',
  // },
});

configure(require.context('../src', true, /\.stories\.(js|jsx|ts|tsx|mdx)$/), module);

.storybook / presets.js

const path = require('path');

module.exports = [
  '@storybook/preset-scss',
  {
    name: '@storybook/preset-typescript',
    options: {
      // Point the loader here to override the root "noEmit" compilerOption
      tsLoaderOptions: {
        // Transpile only means no type-checking from storybook, which greatly speeds up
        // builds. Types will be checked as part of the normal build process. This may also
        // be necessary for loading story source
        transpileOnly: true,
        configFile: path.resolve(__dirname, 'tsconfig.json'),
      },
      // We must use our config to ensure props and their comments are loaded
      tsDocgenLoaderOptions: {
        tsconfigPath: path.resolve(__dirname, 'tsconfig.json'),
        // https://github.com/styleguidist/react-docgen-typescript#parseroptions
        propFilter: prop => {
          if (prop.parent) {
            return !prop.parent.fileName.includes('node_modules/@types/react/');
          }

          return true;
        },
      },
    },
  },
  '@storybook/addon-docs/react/preset',
];

.storybook / theme.js

No puedo compartir esto porque es interno de mi empresa, pero se hace referencia en config.js .

.storybook / tsconfig.json

Este archivo solo sirve para eliminar configuraciones en la raíz tsconfig.json que no tendrían sentido aquí en el libro de cuentos.

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "noEmit": false
  }
}

Hola @ enagy27 , gracias por esto. He conseguido que esto funcione con una configuración de paquete web personalizado. el uso del ajuste preestablecido mecanografiado por alguna extraña razón me impide importar activos en el libro de cuentos, es decir, archivos css.

Un pequeño problema al que me enfrento es que mi tabla de accesorios no puede inferir tipos como este:

SomeType['property'] ahora mismo veo any en mi mesa en lugar de una unión, me pregunto si hay una forma de evitar esto.

Hola, @ enagy27. gracias por esto. Tengo esto funcionando con la configuración que compartiste, pero todavía hay algo de promesa. No puede generar la descripción del componente y la descripción de los accesorios cuando escribo el componente con tsx. pero funciona con jsx。

Hola @zerofront. Tuve que seguir este patrón de comentarios exacto

Descripción del componente:

/**
 * This is a component description and should sit directly above your component
 */

Prop desc:

/** I am a prop description and should sit directly above the interface property i am describing */

@ enagy27 en realidad, había seguido el patrón de comentarios que

@zerofront necesitará un tipo de Typecript para el componente. En su lugar, puede usar export const Button: React.FC<BaseButtonProps> = props => {...}

👆 mi configuración con TS y docgen no funciona con genéricos por alguna razón, creó un problema aquí # 8143 que explica

@zerofront Tengo exactamente tu problema. En las secciones de accesorios de los documentos de Button, Storybook imprime la interfaz defaultProps lugar de la interfaz BaseButtonProps . Y también echo de menos la descripción. Acerca del subtítulo, puede agregarlo en el archivo de la historia, de esta manera:

export default {
  title: 'Button',
  component: Button,
  parameters: {
    componentSubtitle: 'Handy status label',
  },
}

@zerofront Además de lo que dijo @ enagy27 .
Para trabajar con * .stories.tsx , debe agregar algo como esta configuración:

.storybook / webpack.config.js

const path = require('path');
const include = path.resolve(__dirname, '../src');

module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.ts(x?)$/,
    exclude: /node_modules/,
    use: [
      {
        loader: require.resolve('babel-loader'),
        options: {
          presets: [['react-app', { flow: false, typescript: true }]],
        },
      },
    ],
    include,
  });
  return config;
};

@zerofront necesitará un tipo de Typecript para el componente. En su lugar, puede usar export const Button: React.FC<BaseButtonProps> = props => {...}

@zerofront @ enagy27 ayer descubrí que mi problema (que aparentemente era el mismo de @zerofront) fue causado exactamente por el tipo de retorno en la función.

Esto se solucionó para mí:

- import React from 'react'
+ import React, { FC } from 'react'

- export const Button: React.FC<Props>
+ export const Button: FC<Props>

Fuente:
https://github.com/strothj/react-docgen-typescript-loader/issues/42#issuecomment -535090697
Y parcialmente esta nota podría estar relacionada:
https://github.com/strothj/react-docgen-typescript-loader#react -component-class-import

Espero que esto pueda ayudar.

@sergiop @ enagy27 gracias! eventualmente, la mesa de utilería está funcionando.
pero todavía hay algunos problemas.

Si defaultProps no es de tipo cadena, no se puede generar.

@zerofront Puedo confirmar que tengo el mismo problema. Está en mi lista de asuntos pendientes que debo solucionar. ;-)
Si desea buscar la causa, probablemente debería comenzar a intentar comprender si está relacionada con el libro de cuentos en sí o con react-docgen-typescript-loader .

@zerofront tal vez sea mejor abrir una edición dedicada. ;-)

Tuve suerte configurando accesorios predeterminados mientras desestructuraba accesorios. Estoy bastante seguro de que también ha funcionado con valores que no son cadenas.

es decir:

const Text = ({
text: 'Hello world'
}: Props) => <p>{text}</p>

Tuve suerte configurando accesorios predeterminados mientras desestructuraba accesorios. Estoy bastante seguro de que también ha funcionado con valores que no son cadenas.

es decir:

const Text = ({
text: 'Hello world'
}: Props) => <p>{text}</p>

@ sami616 Uso accesorios predeterminados igual que usted, pero no veo valores predeterminados para no cadenas como ya informó @zerofront .

Ignore mi comentario, sí, estoy teniendo el mismo problema.

@ sami616 , como ya se dijo, quiero abrir un informe de error sobre esto, pero antes de hacerlo necesito investigar un poco en la base de código, para entender si la fuente del problema es storybook o react-docgen-typescript-loader . De esta manera abriré el problema en el proyecto correcto.

@ sami616 @sergiop
Instalo react-docgen-typescript-loader versión 3.2.1
Encontré un código en node_modules / react-docgen-typescript-loader / dist / generateDocgenCodeBlock

var setDefaultValue = function(defaultValue) {
    return typescript_1.default.createPropertyAssignment(
      typescript_1.default.createLiteral('defaultValue'),
      // Use a more extensive check on defaultValue. Sometimes the parser
      // returns an empty object.
      defaultValue != null && typeof defaultValue === 'object' && 'value' in defaultValue && typeof defaultValue.value === 'string'
        ? typescript_1.default.createObjectLiteral([
            typescript_1.default.createPropertyAssignment(
              typescript_1.default.createIdentifier('value'),
              typescript_1.default.createLiteral(defaultValue.value),
            ),
          ])
        : typescript_1.default.createNull(),
    );
  };

&& typeof defaultValue.value === 'string'

esta condición limita el tipo de propiedades predeterminadas.

Y en la versión más reciente 3.3.0 react-docgen-typescript-loader, supoort string 、 number 、 boolean

https://github.com/strothj/react-docgen-typescript-loader/blob/master/src/generateDocgenCodeBlock.ts

const setDefaultValue = (
    defaultValue: { value: string | number | boolean } | null,
  ) =>
    ts.createPropertyAssignment(
      ts.createLiteral("defaultValue"),
      // Use a more extensive check on defaultValue. Sometimes the parser
      // returns an empty object.
      defaultValue != null &&
        typeof defaultValue === "object" &&
        "value" in defaultValue &&
        (typeof defaultValue.value === "string" ||
          typeof defaultValue.value === "number" ||
          typeof defaultValue.value === "boolean")
        ? ts.createObjectLiteral([
            ts.createPropertyAssignment(
              ts.createIdentifier("value"),
              ts.createLiteral(defaultValue!.value),
            ),
          ])
        : ts.createNull(),
    );

@zerofront , bueno saberlo. Yo también tengo 3.2.1. Más tarde esta mañana, lo actualizaré a 3.3.0 para ver si esto resuelve el problema. Gracias.

@zerofront Puedo confirmar que la actualización de react-docgen-typescript-loader a 3.3.0 resolverá el problema. Gracias.

Una solución temporal si usa awesome-typescript-loader:

/* tsconfig.json */
{
  "compilerOptions": { },
  "awesomeTypescriptLoaderOptions": {
    "ignoreDiagnostics": [7005]
  }
}

no es ideal, pero funciona.

Acabo de actualizar de 5.1 a 5.2.5 hoy y comencé a recibir este error, sin instalar addon-docs todavía. Esta solución funcionó para mí, aunque debo decir que no tengo muy claro el por qué.

¡Hola a todos! Parece que últimamente no ha habido mucho en este tema. Si todavía hay preguntas, comentarios o errores, no dude en continuar con la discusión. Desafortunadamente, no tenemos tiempo para abordar todos los problemas. Siempre estamos abiertos a contribuciones, así que envíenos una solicitud de extracción si desea ayudar. Los problemas inactivos se cerrarán después de 30 días. ¡Gracias!

Sigo recibiendo el error descrito en este problema para la versión "@storybook/react": "5.2.6" y "react-docgen-typescript-loader": "3.6.0" . No estoy seguro si eso es relevante, pero el único archivo que se ha agregado // @ts-ignore s a __MODULE_DEPENDENCIES__ en los PR a los que se hace referencia aquí es src / server / build.js mientras aún no se ignora en src /client/preview.js .

@jalooc , echa un vistazo a la versión 5.3 beta. Gran cantidad de mejoras en la tabla de accesorios.

@shilman Creo que probé esto último en beta.6 y no funcionaba sin la solución. Lo intentaré de nuevo con la última 😄

Sigo teniendo este problema con el libro de cuentos 5.3. [email protected] y react-docgen-typescript-loader 3.6.0.

La única forma de arreglarlo para mí fue establecer "noImplicitAny": false en tsconfig.json lo que realmente no quiero hacer.

El error que recibo es este:
TS7005: Variable '__MODULE_DEPENDENCIES__' implicitly has an 'any[]' type.

Incluso si agrego un tipo a mis historias, no soluciona el problema por completo.

Seguimiento, lo hice funcionar usando la opción transpileOnly mencionada por @ enagy27. Estoy usando ajustes preestablecidos en lugar de configuraciones completas de paquetes web, este es actualmente mi presets.js . Sin cambios en el tsconfig.json :

// presets.js
const path = require("path");

module.exports = [
    {
        name: "@storybook/preset-typescript",
        options: {
            tsLoaderOptions: {
                configFile: path.resolve(__dirname, "../tsconfig.json"),
                transpileOnly: true,
            },
            tsDocgenLoaderOptions: {
                tsconfigPath: path.resolve(__dirname, "../tsconfig.json"),
            },
            include: [path.resolve(__dirname, "../src")],
        },
    },
    {
        name: "@storybook/addon-docs/react/preset",
        options: {
            configureJSX: true,
            //sourceLoaderOptions: null,
        },
    },
];

¿Alguna actualización sobre esto? Estamos tratando de usar complementos de libros de cuentos con TS y no podemos superar esto incluso con las soluciones alternativas. Continuar recibiendo
"La variable '__MODULE_DEPENDENCIES__' tiene implícitamente un tipo 'cualquier []'."

Actualmente he intentado actualizar el libro de cuentos a 5.3.0-beta.16 y he probado las otras soluciones mencionadas aquí. Gracias

No puedo obtener addon-docs de libros de cuentos para mostrar la tabla de accesorios con mecanografiado. Simplemente dice "No se encontró ningún componente".

addons.js

import '@storybook/addon-knobs/register'
import '@storybook/addon-a11y/register'
import '@storybook/addon-docs/register'

presets.js

module.exports = [
  {
    name: "@storybook/addon-docs/react/preset",
    options: {
      configureJSX: true,
    }
  }
]

webpack.config.js

const path = require('path')
const SRC_PATH = path.join(__dirname, '../src')

module.exports = ({ config }) => {
    config.module.rules.push({
        test: /\.(ts|tsx|js|jsx)$/,
        include: [SRC_PATH],
        use: [
            {
                loader: require.resolve('babel-loader'),
                options: {
                    presets: [['react-app', { flow: false, typescript: true }]],
                    plugins: ['babel-plugin-styled-components']
                },
            },
            {
                loader: require.resolve('react-docgen-typescript-loader'),
                options: {
                    tsconfigPath: path.resolve(__dirname, '../tsconfig.json'),
                },
            },
            {
                loader: require.resolve('@storybook/source-loader'),
                options: { parser: 'typescript',  injectParameters: true, },
            },
        ],
        exclude: [/node_modules/],
        enforce: 'pre',

    })

    config.resolve.extensions.push('.ts', '.tsx', '.js', '.jsx')
    return config
}

Libro de cuentos 5.2.8
Addon-Docs 5.2.8
react-docgen-typescript-loader 3.6.0
babel-loader 8.0.6
@ storybook / source-loader 5.2.8

Además, si uso el formato de historia de componentes, el libro de cuentos no encuentra el componente en absoluto (el lienzo, los documentos y el menú están en blanco), pero si uso storiesOf, los muestra.

Como solución alternativa, puede apuntar la generación de documentos hacia tsconfig.json con las reglas estrictas desactivadas. Supongo que lo resolví así por ahora. Puede volver a comprobar la semana que viene si alguien está interesado.

estas son mis configuraciones, podrían ayudar.
git que funcione completo.

++ su
exportación const AccordionItem
y no tengo webpack.config.js

Para cualquier otra persona que todavía esté luchando, finalmente logré que funcione después de una dolorosa depuración de react-docgen-typescript-loader.

React-docgen-typescript-loader asigna __docgeninfo usando el nombre de la carpeta, no el nombre del componente, por lo que debe colocar su componente en una carpeta con el mismo nombre (distingue entre mayúsculas y minúsculas).

|__
  CTALink
    |___index.tsx

No pude hacer que el formato CSF ​​funcionara (siempre en blanco), pero cuando use la sintaxis storiesOf , debe incluir el componente usando la función addParameters del libro de cuentos para que se pueda seleccionar la tabla de accesorios .

storiesOf('CTALink', module)
  .addParameters({
    component: CTALink,
  })
  .add('default story', () => (
    <CTALink to="/">Click here</CTALink>
  ))

¡Hola a todos! Parece que últimamente no ha habido mucho en este tema. Si todavía hay preguntas, comentarios o errores, no dude en continuar con la discusión. Desafortunadamente, no tenemos tiempo para abordar todos los problemas. Siempre estamos abiertos a contribuciones, así que envíenos una solicitud de extracción si desea ayudar. Los problemas inactivos se cerrarán después de 30 días. ¡Gracias!

Typecript debería estar funcionando en el bloque fuente en 5.3. Clausura.

He actualizado @storybook/react y @storybook/addon-docs a 5.3.0-rc.4 pero sigo recibiendo el mensaje de error TS7005: Variable '__MODULE_DEPENDENCIES__' implicitly has an 'any[]' type.

No estoy usando el ajuste preestablecido y también soy nuevo en el paquete web, por lo que probablemente cometí algunos errores.
Aquí está mi webpack.config.js:
`` `const ruta = require ('ruta');

module.exports = {
nodo: {
fs: 'vacío',
child_process: 'vacío'
},
resolver: {
módulos: [
'node_modules',
],
extensiones: [".ts", ".tsx"],
enlaces simbólicos: verdadero
},
módulo: {
normas: [
{
prueba: /.(ts|tsx)$/,
usar: [
{
cargador: require.resolve ('impresionante-typecript-loader')
},
{
cargador: require.resolve ('react-docgen-typescript-loader')
},
]
},
{
prueba: /.(stories|story).[tj]sx?$/,
cargador: require.resolve ('@ storybook / source-loader')
}
]
},
externos: {
'class-transformer': 'class-transformer'
}
};
''

¡¡Yo-ho-ho !! Acabo de publicar https://github.com/storybookjs/storybook/releases/tag/v5.3.0-rc.5 que contiene PR # 9272 que hace referencia a este problema. ¡Actualice hoy para probarlo!

Puede encontrar esta versión preliminar en la etiqueta @next NPM.

@JacopoBonta, ¿puedes probar la versión más reciente 5.3.0-rc.5 ?

Hola @shilman Gracias por la increíble compatibilidad con los documentos combinados con el libro de cuentos.
Actualicé a 5.3.0-rc.5 y sigo recibiendo el error TS7005: Variable '__MODULE_DEPENDENCIES__' implicitly has an 'any[]' type.

Funciona solo si agrego ignoreDiagnostics: [7005] a la configuración ts-loader como se muestra a continuación.

archivo main.js :

const { addons } = require('@storybook/addons');
const path = require('path');
const tsImportPluginFactory = require('ts-import-plugin')

module.exports = {
  stories: ['../packages/**/*.stories.(tsx|mdx)'],
  presets: [
    {
      name: '@storybook/preset-typescript',
      options: {
        tsLoaderOptions: {
          configFile: path.resolve(__dirname, 'tsconfig.json'),
          ignoreDiagnostics: [7005],
          getCustomTransformers: () => ({
            before: [ tsImportPluginFactory(
              {
                libraryName: 'antd',
                style: 'css',
                libraryDirectory: 'es'
              }
            ) ]
          }),
        },
        tsDocgenLoaderOptions: {
          tsconfigPath: path.resolve(__dirname, 'tsconfig.json'),
        },
        forkTsCheckerWebpackPluginOptions: {
          colors: false, // disables built-in colors in logger messages
        },
        include: [path.resolve(__dirname, "../packages")]
      },
    },
    {
      name: '@storybook/addon-docs/preset',
      options: {
      }
    }],
  addons: [
    '@storybook/addon-docs/register',
    '@storybook/addon-knobs/register',
    '@storybook/addon-actions/register',
    '@storybook/addon-links/register'
  ],
};

@JacopoBonta, ¿puedes probar la versión más reciente 5.3.0-rc.5 ?

Lo siento, pero la actualización a 5.3.0-rc.5 no funcionó.
He actualizado tanto @storybook/react como @storybook/addon-docs pero sigo recibiendo el mismo error.

AcJacopoBonta ¿ puede @ esakal ?

@JacopoBonta Veo que estás usando awesome-typescript-loader . Actualmente estoy usando otro cargador, pero cuando lo usé hace un mes, hice una solución similar. por awesome-typescript-loader debe hacer lo siguiente:

/* tsconfig.json */
{
  "compilerOptions": { },
  "awesomeTypescriptLoaderOptions": {
    "ignoreDiagnostics": [7005]
  }
}

tomado de aquí

Si, funciona. Ya estaba usando esta solución alternativa antes, pero estaba buscando una manera sin ella.

De todos modos, gracias por las ayudas que he apreciado mucho y feliz año nuevo 🎉

Gracias @esakal, tu solución es la mejor (para mí) hasta ahora. Solía ​​configurar transpileOnly: true para solucionar los problemas de TypeScript, pero eso tuvo el efecto de permitir que más errores de TypeScript pasaran desapercibidos.

Mi configuración actual, bastante mínima ( presets.js ) se ve así:

const path = require("path");

module.exports = [
    {
        name: "@storybook/preset-typescript",
        options: {
            tsLoaderOptions: {
                configFile: path.resolve(__dirname, "../tsconfig.json"),
                ignoreDiagnostics: [7005],
            },
        },
    },
    {
        name: "@storybook/addon-docs/preset",
        options: {
            configureJSX: true,
        },
    },
];

¡Gracias!