stories dir is not being type checked during Storybook build

Current Behavior

If I have bad typescript code in /stories/button.stories.tsx (like the following code) I will not get a typescript build error when I’m either watching storybook or building storybook:

const falseAlways = false;
falseAlways = true; // <-- shouldn't able to reassign a const & also a false literal can't be set to true.

Expected behavior

I should get a build error when running build-storybook that says: Cannot assign to 'falseAlways' because it is a constant.ts(2588)

Suggested solution(s)

Modify the .storybook/main.js in the templates and or the tsconfig.json so that ts-loader knows that it should be type checking the files.

Additional context

This might be a problem due to the noEmit flag in tsconfig.json; however, I’ve tried turning file emitting back on and just simple directing it (via outDir) to a different directory.

I’ve used the default main.js but I’ve also tried adding to it to see if I can get better feedback:

const WebpackNotifierPlugin = require('webpack-notifier');
const WarningsToErrorsPlugin = require('warnings-to-errors-webpack-plugin');

module.exports = {
  stories: ['../stories/**/*.stories.(ts|tsx)'],
  addons: [
    '@storybook/addon-actions',
    '@storybook/addon-links',
    '@storybook/addon-docs',
  ],
  webpackFinal: async config => {

    console.log(`#####################################
      Please forgive the wait. The startup time is slow but the watcher time should be quite quick.
    #####################################`);

    const compilerOptions = require("../tsconfig.build.json").compilerOptions;

    if(!compilerOptions){
      throw new Error("Could not find tsconfig.json");
    }

    // include the stories so we can get type checking
    compilerOptions.rootDirs = compilerOptions.rootDirs || [];
    if(compilerOptions.rootDir){
      console.warn("Modifying rootDir to be a rootDirs array so we can get type checking for the stories");
      compilerOptions.rootDirs.push(compilerOptions.rootDir);
      compilerOptions.rootDir = "..";
    }
    compilerOptions.rootDirs.push("./stories");
    compilerOptions.outDir = "./storybook-static";
    compilerOptions.isolatedModules = false;
    // When building for storybook we need to override this setting or we'd get an error
    delete compilerOptions.moduleResolution;


    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      use: [
        {
          loader: require.resolve('ts-loader'),
          options: {
            compilerOptions
          }
        },
        {
          loader: require.resolve('react-docgen-typescript-loader'),
          options: {
            compilerOptions
          }
        },
      ],
    });
    config.module.rules.push({
      test: /\.s[ac]ss$/i,
      use: [
        // Creates `style` nodes from JS strings
        'style-loader',
        // Translates CSS into CommonJS
        'css-loader',
        // Compiles Sass to CSS
        'sass-loader',
      ],
    });

    config.resolve.extensions.push('.ts', '.tsx');

    config.plugins = config.plugins || [];
    config.plugins.push(
      new WebpackNotifierPlugin({ title: 'Custom Storybook Webpack' })
    );
    config.plugins.push(new WarningsToErrorsPlugin());

    return config;
  },
};

Your environment

Software	Version(s)
TSDX	0.13.1
TypeScript	3.8.3
Browser	n.a. but Chrome
npm/Yarn	npm 6.13.4
Node	12.15.1
Operating System	Windows 10

[kylemh]

Ah! Looks like it does work! You just need to adjust the config in .storybook/main.js, such that check is true.

https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration

[dgreene1]

@agilgur5 my coworker @yhy-vertex will be investigating this in the next week or two. We’ll update you on our findings. 😃