Addon-docs: Source doc block Typescript support #7829

enagy27 · 2019-08-20T19:03:10Z

Describe the bug
As documented in the Technical Preview guide, using typescript without passing sourceLoaderOptions: null into the docs preset causes the following error:

Variable '__MODULE_DEPENDENCIES__' implicitly has an 'any[]' type

This is unfortunately not fixed by updating the storybook tsconfig.json to use "noImplicitAny": false.

To Reproduce
Steps to reproduce the behavior:

Write a story for addon-docs using Typescript and the docs preset
Run storybook

Expected behavior
Docs page loads, as usual, and a code snippet is available for the story.

Screenshots
If applicable, add screenshots to help explain your problem.

Code snippets
presets.js:

{
  name: '@storybook/addon-docs/react/preset',
  options: {
    sourceLoaderOptions: null,
  },
}

System:
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.36 => 5.2.0-beta.38
@storybook/addon-actions: ^5.2.0-beta.36 => 5.2.0-beta.38
@storybook/addon-docs: ^5.2.0-beta.36 => 5.2.0-beta.38
@storybook/addon-knobs: ^5.2.0-beta.36 => 5.2.0-beta.38
@storybook/addon-links: ^5.2.0-beta.36 => 5.2.0-beta.38
@storybook/addon-viewport: ^5.2.0-beta.36 => 5.2.0-beta.38
@storybook/addons: ^5.2.0-beta.36 => 5.2.0-beta.38
@storybook/preset-scss: 1.0.2 => 1.0.2
@storybook/preset-typescript: 1.1.0 => 1.1.0
@storybook/react: ^5.2.0-beta.36 => 5.2.0-beta.38
@storybook/theming: ^5.2.0-beta.36 => 5.2.0-beta.38

The text was updated successfully, but these errors were encountered:

shilman · 2019-08-21T00:49:41Z

Thanks @enagy27! There are at least a few options here:

source-loader can output typescript-friendlier code
user can configure typescript differently (haven't seen this in our monorepo)
source-loader can output @ts-ignore to workaround

I'm thinking third option is the most straightforward to start, first is probably best long-term

shilman · 2019-08-22T03:39:14Z

Great Caesar's ghost!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.2.0-beta.39 containing PR #7831 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

shilman · 2019-08-22T03:40:59Z

@enagy27 don't have a repro, so it would be great if you could give this a try and let me know if it works

enagy27 · 2019-08-22T16:07:26Z

@shilman absolutely! Giving it a shot now. Thank you!

enagy27 · 2019-08-22T16:13:04Z

@shilman still seeing these errors on 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'.

Results of npx -p @storybook/cli@next 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 · 2019-08-22T16:16:23Z

Given that this is on the source loader, does that need to be installed separately and then it's taken up by the preset, or is a new release of the preset required?

shilman · 2019-08-22T16:18:04Z

@enagy27 can you take a look at the loaded source using the instructions here and see if the loaded source includes the change in #7831? (replace .mdx with .tsx and the rest of it should apply)

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

enagy27 · 2019-08-22T16:29:24Z

@shilman I'm only able to start the server when sourceLoaderOptions: null is in effect 😞 otherwise a failing build halts starting up the server and I'm unable to inspect the source in-browser. Is there maybe a command line option to by-pass and start the server anyway on first failing build?

shilman · 2019-08-23T15:02:21Z

Whoopee!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.2.0-beta.40 containing PR #7845 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

shilman · 2019-08-23T15:04:11Z

@enagy27 Merged & released your changes. Give it a try?

enagy27 · 2019-08-23T16:49:14Z

@shilman no such luck 😞 I'm experimenting locally and can't seem to get the hang of it. I even cheated and marked them all as as any but it looks like then it complains about duplicate variable parameters, which makes me wonder if __STORY__ isn't being escaped properly? But then I can't see how it would be working for JS and not TS... I'm stumped

JonKrone · 2019-08-29T16:07:54Z

I am also experiencing this issue but unfortunately don't have much additional context.

Another solution here is to override all of the "strict" typechecking rules in the tsconfig.js file that storybook loads (either your project's tsconfig or a .storybook/tsconfig.js (I think)).

I think these are the ones to make sure aren't enabled:

shilman · 2019-08-29T16:21:43Z

@libetl I know you're really busy but it would be awesome if you could take a look at this one.

enagy27 · 2019-08-29T16:27:28Z

@JonKrone when you do this do you see the source code in the docs tab? I've made these modifications and I'm still not seeing source 😞

0b10 · 2019-08-31T19:49:51Z

A temporary solution if you use awesome-typescript-loader:

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

Not ideal, but it works.

0b10 · 2019-08-31T20:14:14Z

@shilman Is this what you're looking for? FYI this wouldn't build without ignoring TS7005 (no implicit any).

  // @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>
));

enagy27 · 2019-09-02T02:02:30Z

@0b10 I'll give it a shot, thank you! We are currently ignoring all of those lines, but I hadn't thought to change my tsconfig.json as well 🤔

lemcii · 2019-09-02T13:29:19Z

~~I was getting errors here after updating storybook-react-router to 1.0.6, which has an issue open: gvaldambrini/storybook-router#42~~ I'm not getting errors here (storybook-router errors were probably not related, see below comment)

"No code avaliable" on my TSX stories, MDX works fine, result looks similar/exactly like @0b10's story

  // @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>);

lemcii · 2019-09-02T13:32:08Z

Updated config.js as it was just docs: DocsPage

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

Presets:

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

Webpack config, possibly not needed?

    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 includes "noImplicitAny": true and no ignoreDiagnostics 😕

enagy27 · 2019-09-03T15:36:14Z

No longer seeing issues with rc.4, but no source 😞 Though it looks like this is also marked in #6641, so now that the errors are no longer present, this issue may be a duplicate

enagy27 · 2019-09-12T17:13:49Z

I've found a workaround!

Instead of using sourceLoaderOptions: null, I used transpileOnly: true in my tsLoaderOptions
Follow the workaround in Addon-docs: Story source not shown when a variable named parameters is declared within CSF story #8055, where there cannot be a top-level parameters variable
For some reason, the use of right-hand statements such as as 'optionA' | 'optionB' failed here and had to be converted to left-hand type declarations.

This fails:

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

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

This works:

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

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

In hindsight this seems like an understandable source-loader issue with type inference 🤔 anyway, hope this helps!

shilman · 2019-11-28T16:42:32Z

@jalooc please check out 5.3 beta. Tons of improvements to the props table.

enagy27 · 2019-11-28T17:53:50Z

@shilman I believe I tried this last on beta.6 and it wasn’t functioning without the workaround. I’ll try again with the latest 😄

johot · 2019-12-03T12:02:24Z

I still get this problem with storybook 5.3.0@beta.14 and react-docgen-typescript-loader 3.6.0.

The only way to fix it for me was to set "noImplicitAny": false in tsconfig.json which I really don't want to do.

The error I am getting is this one:
TS7005: Variable '__MODULE_DEPENDENCIES__' implicitly has an 'any[]' type.

Even if I add a type to my stories it doesn't fix the problem fully.

johot · 2019-12-03T12:11:27Z

Follow up, I got it working using the transpileOnly option mentioned by @enagy27. I am using presets instead of full webpack configs, this is currently my presets.js. No changing in the 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,
		},
	},
];

justin-peterson-jdas · 2019-12-05T21:24:22Z

Any updates on this? We're trying to use storybook addons with TS and can't get past this even with the workarounds. Continue to receive
"Variable 'MODULE_DEPENDENCIES' implicitly has an 'any[]' type."

Currently have tried updating storybook to 5.3.0-beta.16 and tried the other workarounds mentioned here. Thanks

laij84 · 2019-12-06T11:04:47Z

I can't get storybook addon-docs to show the props table with typescript. It just says "No component found".

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
}

Storybook 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

Also, if I use Component Story Format storybook doesn't find the component at all (canvas and docs and menu are blank), but if I use storiesOf it displays them.

Oikio · 2019-12-06T11:22:34Z

As a workaround you can point doc generation towards tsconfig.json with strict rules turned off. I guess I solved it like this for now. Can recheck next week if anyone interested.

Zunaib · 2019-12-06T13:03:11Z

these are my configurations , might help.
git it working complete.

++ its
export const AccordionItem
and i have no webpack.config.js

laij84 · 2019-12-07T03:39:33Z

For anyone else still struggling, I've finally managed to get it to work after some painful debugging of react-docgen-typescript-loader.

React-docgen-typescript-loader assigns the __docgeninfo using the folder name, not the component name, so you must put your component in a folder of the same name (case sensitive).

components
|__
  CTALink
    |___index.tsx

I couldnt get CSF format to work (always blank), but when using the storiesOf syntax, you must include the component using the addParameters function from storybook in order for the props table to be picked up.

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

stale · 2019-12-28T03:59:18Z

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

shilman · 2019-12-28T12:46:10Z

Typescript should be working in the source block in 5.3. Closing.

JacopoBonta · 2019-12-30T15:19:48Z

I have update both @storybook/reactand @storybook/addon-docs to 5.3.0-rc.4 but keep getting the error message TS7005: Variable '__MODULE_DEPENDENCIES__' implicitly has an 'any[]' type.

I'm not using the preset and also I'm new to webpack so probably I made some mistakes.
Here is my webpack.config.js:


module.exports = {
    node: {
        fs: 'empty',
        child_process: 'empty'
    },
    resolve: {
        modules: [
            'node_modules',
        ],
        extensions: [".ts", ".tsx"],
        symlinks: true
    },
    module: {
        rules: [
            {
                test: /\.(ts|tsx)$/,
                use: [
                    {
                        loader: require.resolve('awesome-typescript-loader')
                    },
                    {
                        loader: require.resolve('react-docgen-typescript-loader')
                    },
                ]
            },
            {
                test: /\.(stories|story)\.[tj]sx?$/,
                loader: require.resolve('@storybook/source-loader')
            }
        ]
    },
    externals: {
        'class-transformer': 'class-transformer'
    }
};

shilman · 2019-12-30T19:51:41Z

Yo-ho-ho!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.0-rc.5 containing PR #9272 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

shilman · 2019-12-30T20:09:20Z

@JacopoBonta can you try the most recent release 5.3.0-rc.5?

esakal · 2019-12-30T23:04:24Z

Hello @shilman Thanks for the amazing support for docs combined with storybook.
I updated to 5.3.0-rc.5 and I still get the error TS7005: Variable '__MODULE_DEPENDENCIES__' implicitly has an 'any[]' type.

It works only if I add ignoreDiagnostics: [7005] to the ts-loader configuration as shown below.

file 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 · 2019-12-30T23:16:53Z

@JacopoBonta can you try the most recent release 5.3.0-rc.5?

I'm sorry but upgrading to 5.3.0-rc.5 didn't work.
I have updated both @storybook/react and @storybook/addon-docs but keep getting the same error.

shilman · 2019-12-31T00:27:38Z

@JacopoBonta can you verify @esakal's workaround?

esakal · 2019-12-31T06:39:43Z

@JacopoBonta I see that you are using awesome-typescript-loader. I'm currently using other loader but when I used that one a month ago I did a similar workaround. for awesome-typescript-loader you should do the following:

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

taken from here

JacopoBonta · 2019-12-31T08:23:26Z

Yes, it works. I was already using this workaround before but I was looking for a way without it.

Anyway, thanks for the helps I have appreciated a lot and happy new year 🎉

johot · 2020-01-07T10:35:11Z

Thank you @esakal you solution is the best (for me) so far. I used to set transpileOnly: true to fix the TypeScript issues but that ofc had the effect of allowing more TypeScript errors to go through unnoticed.

My current, pretty minimal configuration (presets.js) looks like this:

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

Thank you!

shilman added addon: docs addon: storysource bug labels Aug 21, 2019

shilman added this to the 5.2.0 milestone Aug 21, 2019

shilman added the typescript label Aug 21, 2019

shilman mentioned this issue Aug 21, 2019

Source-loader: Selectively ignore typescript errors in generated code #7831

Merged

shilman closed this as completed Aug 22, 2019

enagy27 mentioned this issue Aug 22, 2019

Source-loader: Selectively ignore typescript errors in generated code #7845

Merged

shilman reopened this Aug 23, 2019

stale bot removed the inactive label Nov 28, 2019

jeffryang24 mentioned this issue Dec 2, 2019

Docs tab shows 'no code available' when using CSF format #8104

Closed

hzhu mentioned this issue Dec 3, 2019

fix: update config to handle stories.tsx zendeskgarden/react-containers#139

Merged

1 task

shilman changed the title ~~Addon-docs: Typescript source support~~ Addon-docs: Source doc block Typescript support Dec 6, 2019

stale bot added the inactive label Dec 28, 2019

shilman closed this as completed Dec 28, 2019

shilman mentioned this issue Dec 30, 2019

Source-loader: Disable no-implicit-any linting #9272

Merged

rshen91 mentioned this issue Jan 21, 2020

docs: upgrade storybook to 5.2.8 and refactor stories to CSF elastic/elastic-charts#508

Merged

4 tasks

maxime-gendron mentioned this issue Apr 15, 2020

feat(ShowCode): Ajoute la fonctionnalité Show Code de storybook addon-docs kronostechnologies/design-elements#124

Merged

hzhu mentioned this issue Aug 6, 2020

chore(webpack): clean up ts-loader option zendeskgarden/react-containers#224

Merged

1 task

Addon-docs: Source doc block Typescript support #7829

Addon-docs: Source doc block Typescript support #7829

Comments

enagy27 commented Aug 20, 2019

shilman commented Aug 21, 2019 • edited

shilman commented Aug 22, 2019

shilman commented Aug 22, 2019

enagy27 commented Aug 22, 2019

enagy27 commented Aug 22, 2019

enagy27 commented Aug 22, 2019

shilman commented Aug 22, 2019 • edited

enagy27 commented Aug 22, 2019

shilman commented Aug 23, 2019

shilman commented Aug 23, 2019

enagy27 commented Aug 23, 2019

JonKrone commented Aug 29, 2019

shilman commented Aug 29, 2019

enagy27 commented Aug 29, 2019

0b10 commented Aug 31, 2019 • edited

0b10 commented Aug 31, 2019 • edited

enagy27 commented Sep 2, 2019

lemcii commented Sep 2, 2019 • edited

lemcii commented Sep 2, 2019 • edited

enagy27 commented Sep 3, 2019 • edited

enagy27 commented Sep 12, 2019

shilman commented Nov 28, 2019

enagy27 commented Nov 28, 2019

johot commented Dec 3, 2019

johot commented Dec 3, 2019

justin-peterson-jdas commented Dec 5, 2019

laij84 commented Dec 6, 2019 • edited

Oikio commented Dec 6, 2019

Zunaib commented Dec 6, 2019 • edited

laij84 commented Dec 7, 2019 • edited

stale bot commented Dec 28, 2019

shilman commented Dec 28, 2019

JacopoBonta commented Dec 30, 2019

shilman commented Dec 30, 2019

shilman commented Dec 30, 2019

esakal commented Dec 30, 2019

JacopoBonta commented Dec 30, 2019

shilman commented Dec 31, 2019 • edited

esakal commented Dec 31, 2019 • edited

JacopoBonta commented Dec 31, 2019

johot commented Jan 7, 2020

shilman commented Aug 21, 2019 •

edited

shilman commented Aug 22, 2019 •

edited

0b10 commented Aug 31, 2019 •

edited

0b10 commented Aug 31, 2019 •

edited

lemcii commented Sep 2, 2019 •

edited

lemcii commented Sep 2, 2019 •

edited

enagy27 commented Sep 3, 2019 •

edited

laij84 commented Dec 6, 2019 •

edited

Zunaib commented Dec 6, 2019 •

edited

laij84 commented Dec 7, 2019 •

edited

shilman commented Dec 31, 2019 •

edited

esakal commented Dec 31, 2019 •

edited