How to allow storybook to build even with TypeScript (type) errors?

user_3555262 0
Viewed 3487

I've set up CRA typescript template and integrated storybook into the app. I'm using Chakra-UI which lacks typescript support for a few components right now. When I run yarn storybook, the app runs and serves up the storybook app and all the component stories work fine. When I build though, with the command yarn build-storybook, the TypeScript errors show up in the console and the command exits with exit code 1 and the build never happens. How do I set a configuration such that even thought there are TS errors, storybook still proceeds with the build?

Sample error below.

enter image description here

storybook create-react-app typescript reactjs
3 Answers
user_43967300

If you are using Create React App the Filip's answer will not work.

Instead, just remove the ForkTsCheckerWebpackPlugin plugin that does the TypeChecking.

This isn't ideal as you won't see any type checking at all - but you could always do that as a seperate step.

  //.storybook/main.js
module.exports = {
  //..snip 


  webpackFinal: async (config, {configType}) => {
    const tsConfigIndex = config.plugins.findIndex(v => v.constructor.name === "ForkTsCheckerWebpackPlugin")
    config.plugins.splice(tsConfigIndex, 1); 
    return config; 
    
  }
}
user_10684460

There are plenty of strict type checking options in your tsconfig which may be disabled to prevent those errors.

/* Strict Type-Checking Options */
    // "strict": true,                        /* Enable all strict type-checking options. */
    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
    // "strictNullChecks": true,              /* Enable strict null checks. */
    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
    // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */

For your specific case you may just type the following above the failing line. (Incl. '//')

// @ts-ignore
user_112426680
Related