Not working with React.StatelessComponent about react-docgen-typescript-loader

[strothj]

Sorry for the long delay.

The following change in your Storybook configuration should allow this to work. From my testing it seems to work fine:

  const compilerOptions = {
    ...require("../tsconfig.json").compilerOptions,
    // For allowSyntheticDefaultImports/esModuleInterop, a target of "es6" or
    // above is required. ts-loader will load the project tsconfig.json normally
    // with its compilation settings.
    target: "esnext",
  };
  // If you have the compiler option "moduleResolution", delete it. You'll get
  // an error otherwise.
  delete compilerOptions.moduleResolution;

  config.module.rules.push({
    test: /\.tsx?$/,
    include: path.resolve(__dirname, "../src"),
    use: [
      require.resolve("ts-loader"),
      {
        loader: require.resolve("react-docgen-typescript-loader"),
        // Pass along our customized compiler options to enable synthetic
        // default imports.
        options: { compilerOptions },
      },
    ],
  });

The base package react-docgen-typescript has a default config that it uses when no options are supplied:

const defaultOptions: ts.CompilerOptions = {
  jsx: ts.JsxEmit.React,
  module: ts.ModuleKind.CommonJS,
  target: ts.ScriptTarget.Latest
};

You might be able to just use the loader option: tsconfigPath. I haven't tested it yet.

[strothj]

Can you please provide the source for the Storybook story? Thank you.

[teddybradford]

@strothj Sure thing! Here's the story for the Heading component:

import { select, text, withKnobs } from "@storybook/addon-knobs";
import { storiesOf } from "@storybook/react";
import React from "react";
import { Heading } from "../../src/components/heading";

const stories = storiesOf("Components|Text", module);
stories.addDecorator(withKnobs);

stories.add("Heading", () => (
  <Heading level={select("level", ["1", "2", "3"], "1")}>
    {text("text", "My heading")}
  </Heading>
));

[teddybradford]

@strothj Thank you! I can confirm that this was the issue with my setup. The default compilerOptions were conflicting with the settings in my tsconfig.json file. Aligning the loader config with tsconfig.json fixed the issue. 🙂