Storybook: Addon-docs：ソースドキュメントブロックTypescriptのサポート

ありがとう@ enagy27！ ここには少なくともいくつかのオプションがあります。

1） source-loaderはtypescriptに適したコードを出力できます
2）ユーザーはtypescriptを別の方法で構成できます（これは私たちのモノリポジトリでは見ていません）
3） source-loaderは回避策として@ts-ignoreを出力できます

私は、3番目のオプションが最も簡単に開始できると考えています。最初のオプションはおそらく長期的に最適です。

グレートシーザーの幽霊!! この問題を参照するPR＃7831を含むhttps://github.com/storybookjs/storybook/releases/tag/v5.2.0-beta.39をリリースしました。 今すぐアップグレードしてお試しください！

このプレリリースは@next NPMタグにあります。

この問題を解決します。 まだやることが残っていると思われる場合は、再度開いてください。

@ enagy27には

@shilman絶対に！ 今それを試してみてください。 ありがとうございました！

@shilmanはまだ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'.

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

これがソースローダーにあるとすると、それを個別にインストールしてからプリセットに取り込む必要がありますか、それともプリセットの新しいリリースが必要ですか？

@ enagy27ここの手順を使用してロードされたソースを確認し、ロードされたソースに＃7831の変更が含まれているかどうかを確認できますか？ （ .mdxを.tsx置き換えれば、残りが適用されます）

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

@shilman sourceLoaderOptions: nullが有効な場合にのみサーバーを起動できます😞それ以外の場合、ビルドが失敗するとサーバーの起動が停止し、ブラウザー内のソースを検査できません。 最初に失敗したビルドでサーバーをバイパスして起動するコマンドラインオプションはありますか？

おっと！ この問題を参照するPR＃7845を含むhttps://github.com/storybookjs/storybook/releases/tag/v5.2.0-beta.40をリリースしました。 今すぐアップグレードしてお試しください！

このプレリリースは@next NPMタグにあります。

@ enagy27変更をマージしてリリースしました。 試してみる？

@shilmanそのような運はありません😞私はローカルで実験していて、コツをつかむことができないようです。 私はそれらすべてをだましてas anyとしてマークしましたが、変数parameters重複について不平を言っているようです。これにより、 __STORY__が適切にエスケープされていないのではないかと思います。 しかし、それがTSではなくJSでどのように機能するかわかりません...私は困惑しています

私もこの問題を経験していますが、残念ながら追加のコンテキストはあまりありません。

ここでのもう1つの解決策は、ストーリーブックがロードするtsconfig.jsファイル（プロジェクトのtsconfigまたは.storybook/tsconfig.js （私は思う））のすべての「厳密な」タイプチェックルールをオーバーライドすることです。

これらは、有効になっていないことを確認するためのものだと思います。

@libetlあなたが本当に忙しいのは知っていますが、これを見ていただければ素晴らしいと思います。

@JonKroneを実行すると、[ドキュメント]タブにソースコードが表示されますか？ これらの変更を行いましたが、まだソースが表示されていません😞

awesome-typescript-loaderを使用する場合の一時的な解決策：

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

理想的ではありませんが、機能します。

@shilmanこれはあなたが探しているものですか？ 参考までに、これはTS7005を無視せずに構築することはできません（暗黙的なものはありません）。

  // @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試してみます、ありがとうございます！ 現在、これらの行をすべて無視していますが、 tsconfig.jsonも変更することは考えていませんでした🤔

storybook-react-routerを1.0.6に更新した後、ここでエラーが発生しました。これには問題があります：gvaldambrini / storybook-router＃42ここではエラーが発生しません（storybook-routerエラーはおそらく関連していませんでした。以下のコメントを参照してください） ）

TSXストーリーで「利用可能なコードがありません」、MDXは正常に動作し、結果は@ 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がdocs: DocsPageだったので更新しました

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

プリセット：

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

Webpackの設定、おそらく必要ありませんか？

    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には"noImplicitAny": true含まれ、 ignoreDiagnosticsは含まれません😕

rc.4問題は発生しなくなりましたが、ソースはありません😞これも＃6641でマークされているように見えますが、エラーが発生しなくなったため、この問題は重複している可能性があります

回避策を見つけました！

• 代わりに使用したのsourceLoaderOptions: null私が使用し、 transpileOnly: true私にtsLoaderOptions
• トップレベルのparameters変数が存在できない＃8055の回避策に従ってください
• 何らかの理由で、 as 'optionA' | 'optionB'などの右側のステートメントの使用はここでは失敗し、左側の型宣言に変換する必要がありました。

これは失敗します：

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

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

これは機能します：

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

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

後から考えると、これは型推論に関する理解できるsource-loader問題のようです🤔とにかく、これが役立つことを願っています！

@ enagy27あなたはこれを理解するために@libetlが5.3のある時点でオンラインに戻ることを期待しています。これらの回避策が不要になるように、 source-loaderアップグレードするだけです。 成功を祈っている！ 🤞

やあ。 誰かがreacttypescriptとドキュメントを含むストーリーブックが機能しているサンプルリポジトリを提供できますか？

@simonhossこれは素晴らしいアイデアです、私はこれを機能させるのに本当に苦労しています。

私も😄

TS命令にあなたを指すreact-docgen-typescript-loaderインストールすると言うどのaddon-infoしかし、ドキュメントの以前はそれが言うはありませんaddon-docsのための代替であるaddon-info ？ TSでこれが機能するセットアップを確認するか、TSでaddon-docsをセットアップするための明確な手順を1か所で確認すると非常に役立ちます。

貢献して助けてくれてうれしいですが、最初にこれらの部分がどのように組み合わされるかを理解する必要があります！ 👍

ドキュメントがリリースされたので、cra -ts-kitchen-sinkを更新して、構成のためにすべて同じページにいることを確認するのに少し時間がかかるかもしれません🙂それは1週間かそこらかもしれません...今のところ設定を提供します：

.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 / prefixs.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

これは社内にあるため共有できませんが、 config.js参照されています。

.storybook / tsconfig.json

このファイルは、ストーリーブックでは意味をなさないルートtsconfig.json構成を削除するためだけに使用されます。

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

こんにちは@ enagy27-これをありがとう。 私はこれをカスタムwebpack構成で動作させました。 奇妙な理由でtypescriptプリセットを使用すると、ストーリーブックにアセットをインポートできなくなります。つまり、-cssファイルです。

私が直面している小さな問題の1つは、私の小道具テーブルが次のような型を推測できないことです。

SomeType['property']現在、テーブルにユニオンではなくanyれていますが、これを回避する方法があるのではないかと思います。

こんにちは、@ enagy27。 これをありがとう。 私はあなたが共有した設定でこれを動作させました。しかし、まだいくつかの問題があります。 tsxでコンポーネントを作成すると、コンポーネントの説明と小道具の説明を生成できません。 しかし、それはjsxで動作します。

こんにちは@zerofront。 私はこの正確なコメントパターンに従わなければなりませんでした

コンポーネントの説明：

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

支柱の説明：

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

@ enagy27実際、私はあなたが私の最初の写真に示したコメントパターンに従っていました

@zerofrontでは、コンポーネントにexport const Button: React.FC<BaseButtonProps> = props => {...}使用できます

👆TSとdocgenを使用したセットアップが何らかの理由でジェネリックで機能しないため、ここで問題が発生しました＃8143

@zerofront私はまさにあなたの問題を抱えています。 Buttonドキュメントの小道具セクションで、StorybookはBaseButtonPropsインターフェイスの代わりにdefaultProps印刷しています。 そして、私も説明が恋しいです。 字幕については、次のようにストーリーファイルに追加できます。

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

@zerofront @ enagy27が言ったことに加えて。
* .stories.tsxを操作するには、次の構成のようなものを追加する必要があります。

.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では、コンポーネントにexport const Button: React.FC<BaseButtonProps> = props => {...}使用できます

@zerofront @ enagy27昨日、私の問題（@zerofrontと明らかに同じ）が関数のreturn型によって正確に引き起こされていることを発見しました。

これは私のために修正されました：

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

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

ソース：
https://github.com/strothj/react-docgen-typescript-loader/issues/42#issuecomment -535090697
そして部分的にこのメモは関連している可能性があります：
https://github.com/strothj/react-docgen-typescript-loader#react -component-class-import

これがお役に立てば幸いです。

@sergiop @ enagy27ありがとう！ 最終的に、小道具テーブルは機能します。
しかし、まだいくつかの問題があります。

defaultPropsが文字列型でない場合、生成できません。

@zerofront同じ問題があることを確認できます。 修正するために管理する問題の私のやることリストにあります。 ;-)
原因を調べたい場合は、ストーリーブック自体に関連しているのか、 react-docgen-typescript-loader関連しているのかを理解しようとする必要があります。

@zerofrontは、専用の問題を開く方が良いかもしれません。 ;-)

小道具を分解しながら、デフォルトの小道具を設定することができました。 文字列以外の値でも機能することは間違いありません。

NS：

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

小道具を分解しながら、デフォルトの小道具を設定することができました。 文字列以外の値でも機能することは間違いありません。

NS：

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

@ sami616私はあなたと同じデフォルトの小道具を使用しますが、私はすでに報告さ@zerofrontなどの非文字列のデフォルト値が表示されません。

私のコメントを無視してください、はい私は同じ問題を抱えています。

@ sami616 、すでに述べたように、これに関するバグレポートを開きたいのですが、その前に、コードベースで少し調査して、問題の原因がstorybookかreact-docgen-typescript-loaderかを理解する必要があります。

@ sami616 @sergiop
react-docgen-typescript-loaderバージョン3.2.1をインストールします
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'

この条件は、defaultPropsのタイプを制限します。

そして、最新バージョン3.3.0のreact-docgen-typescript-loaderでは、文字列、数値、ブール値をサポートします。

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 、知ってよかった。 私も3.2.1を持っています。 今朝遅くに3.3.0に更新して、これで問題が解決するかどうかを確認します。 ありがとう。

@zerofront react-docgen-typescript-loaderを3.3.0に更新すると問題が解決することを確認できます。 ありがとう。

awesome-typescript-loaderを使用する場合の一時的な解決策：

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

理想的ではありませんが、機能します。

今日、5.1から5.2.5にアップデートしたところ、addon-docsをまだインストールせずに、このエラーが発生し始めました。 この解決策は私にとってはうまくいきましたが、私の理由ははっきりしていません。

皆さんこんにちは！ 最近、この問題はあまり進んでいないようです。 それでも質問、コメント、バグがある場合は、遠慮なく議論を続けてください。 残念ながら、すべての問題に取り組む時間がありません。 私たちはいつでも寄付を受け付けていますので、サポートが必要な場合はプルリクエストを送信してください。 非アクティブな問題は30日後にクローズされます。 ありがとう！

バージョン"@storybook/react": "5.2.6"と"react-docgen-typescript-loader": "3.6.0"について、この問題で説明されているエラーが引き続き発生します。 それは、関連するのですが、追加されたファイルのみがわからない場合は// @ts-ignore秒__MODULE_DEPENDENCIES__ここで参照のPRにあるのsrc /サーバー/ build.jsそれはまだしていない-無視だながらSRC /client/preview.js 。

@ jalooc5.3ベータ版をチェックしてください。 小道具テーブルの大幅な改善。

@shilmanこれを最後にbeta.6で試しましたが、回避策がないと機能しませんでした。 最新のものでもう一度やり直します😄

ストーリーブック5.3でもこの問題が発生します。 [email protected]およびreact-docgen-typescript-loader3.6.0。

私にとってそれを修正する唯一の方法"noImplicitAny": false 、 tsconfig.json "noImplicitAny": falseを設定することでしたが、これは本当にやりたくないことです。

私が得ているエラーはこれです：
TS7005: Variable '__MODULE_DEPENDENCIES__' implicitly has an 'any[]' type.

ストーリーにタイプを追加しても、問題が完全に修正されるわけではありません。

フォローアップ、@ enagy27で言及されているtranspileOnlyオプションを使用して動作させました。 完全なwebpack構成の代わりにプリセットを使用しています。これは現在、私のpresets.jsです。 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,
        },
    },
];

これに関する更新はありますか？ TSでストーリーブックアドオンを使用しようとしていますが、回避策を使用してもこれを乗り越えることはできません。 受け取り続ける
「変数 '__MODULE_DEPENDENCIES__'は暗黙的に 'any []'型を持っています。」

現在、ストーリーブックを5.3.0-beta.16に更新し、ここに記載されている他の回避策を試しました。 ありがとう

タイプスクリプトで小道具テーブルを表示するストーリーブックアドオンドキュメントを取得できません。 「コンポーネントが見つかりません」とだけ表示されます。

addons.js

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

prefixs.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
}

ストーリーブック5.2.8
アドオンドキュメント5.2.8
react-docgen-typescript-loader 3.6.0
バベルローダー8.0.6
@ storybook / source-loader 5.2.8

また、Component Story Formatを使用すると、ストーリーブックはコンポーネントをまったく検出しません（キャンバス、ドキュメント、メニューは空白です）が、storiesOfを使用すると表示されます。

回避策として、厳密なルールをオフにして、ドキュメントの生成をtsconfig.jsonに向けることができます。 今のところこのように解決したと思います。 興味のある方は来週再確認できます。

これらは私の構成です、役立つかもしれません。
gititは完全に機能しています。

++その
constAccordionItemをエクスポートします
そして私はwebpack.config.jsを持っていません

まだ苦労している他の人のために、react-docgen-typescript-loaderのいくつかの苦痛なデバッグの後、私はついにそれを機能させることができました。

React-docgen-typescript-loaderは、コンポーネント名ではなくフォルダー名を使用して__docgeninfoを割り当てるため、コンポーネントを同じ名前のフォルダーに配置する必要があります（大文字と小文字が区別されます）。

|__
  CTALink
    |___index.tsx

CSF形式を機能させることができませんでした（常に空白）が、 storiesOf構文を使用する場合、小道具テーブルを取得するには、ストーリーブックのaddParameters関数を使用するコンポーネントを含める必要があります。

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

皆さんこんにちは！ 最近、この問題はあまり進んでいないようです。 それでも質問、コメント、バグがある場合は、遠慮なく議論を続けてください。 残念ながら、すべての問題に取り組む時間がありません。 私たちはいつでも寄付を受け付けていますので、サポートが必要な場合はプルリクエストを送信してください。 非アクティブな問題は30日後にクローズされます。 ありがとう！

Typescriptは5.3のソースブロックで機能しているはずです。 閉鎖。

@storybook/reactと@storybook/addon-docs両方を5.3.0-rc.4に更新しましたが、エラーメッセージTS7005: Variable '__MODULE_DEPENDENCIES__' implicitly has an 'any[]' type.表示され続けます

プリセットを使用しておらず、webpackも初めてなので、間違いを犯した可能性があります。
これが私のwebpack.config.jsです：
`` `const path = require（ 'path'）;

module.exports = {
ノード：{
fs： '空'、
child_process： '空'
}、
解決： {
モジュール：[
'node_modules'、
]、
拡張子：["。ts"、 "。tsx"]、
シンボリックリンク：true
}、
モジュール：{
ルール：[
{{
テスト：/。（ts | tsx）$ /、
使用する： [
{{
ローダー：require.resolve（ 'awesome-typescript-loader'）
}、
{{
ローダー：require.resolve（ 'react-docgen-typescript-loader'）
}、
]
}、
{{
テスト：/。（stories | story）。[tj] sx？$ /、
ローダー：require.resolve（ '@ storybook / source-loader'）
}
]
}、
外観：{
'class-transformer'： 'class-transformer'
}
};
`` `

ヨホホ!! この問題を参照するPR＃9272を含むhttps://github.com/storybookjs/storybook/releases/tag/v5.3.0-rc.5をリリースしました。 今すぐアップグレードしてお試しください！

このプレリリースは@next NPMタグにあります。

@JacopoBonta最新リリース5.3.0-rc.5を試すことができますか？

こんにちは@shilmanストーリーブックと組み合わせたドキュメントの素晴らしいサポートに感謝します。
5.3.0-rc.5に更新しましたが、それでもエラーTS7005: Variable '__MODULE_DEPENDENCIES__' implicitly has an 'any[]' type.

以下に示すように、 ignoreDiagnostics: [7005]をts-loader構成に追加した場合にのみ機能します。

ファイル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最新リリース5.3.0-rc.5を試すことができますか？

申し訳ありませんが、 5.3.0-rc.5へのアップグレードは機能しません
@storybook/reactと@storybook/addon-docs両方を更新しましたが、同じエラーが発生し続けます。

AcJacopoBonta @ esakalの回避策を確認できます

@JacopoBonta awesome-typescript-loaderを使用しているようです。 現在、他のローダーを使用していますが、1か月前にそれを使用したときに、同様の回避策を実行しました。 awesome-typescript-loader場合、次のことを行う必要があります。

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

ここから取っ

はい、動作します。 私は以前にこの回避策をすでに使用していましたが、それなしの方法を探していました。

とにかく、私がたくさん感謝している助けに感謝し、新年あけましておめでとうございます🎉

ありがとう@esakalあなたの解決策はこれまでのところ（私にとって）最高です。 私はTypeScriptの問題を修正するためにtranspileOnly: trueを設定していましたが、そのofcには、より多くのTypeScriptエラーが気付かれずに通過できるようにする効果がありました。

私の現在のかなり最小限の構成（ presets.js ）は次のようになります。

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,
        },
    },
];

ありがとうございました！