stories dir is not being type checked during Storybook build
See original GitHub issueCurrent 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 |
Issue Analytics
- State:
- Created 3 years ago
- Comments:8 (3 by maintainers)
Top Results From Across the Web
Configure Storybook
By default, Storybook will load stories from your project based on a glob (pattern matching string) in .storybook/main.js that matches all files in...
Read more >Images, fonts, and assets - Storybook - JS.ORG
Components often rely on images, videos, fonts, and other assets to render as the user expects. There are many ways to use these...
Read more >Publish Storybook
Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and...
Read more >Webpack - Storybook
Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and...
Read more >Storybook error when using Webpack5 with Next.JS app + ...
Interestingly, when following the steps to reproduce with a non-typescript next.js app, everything seems to work fine and the 'HomePage' story ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Ah! Looks like it does work! You just need to adjust the config in
.storybook/main.js
, such thatcheck
istrue
.https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration
@agilgur5 my coworker @yhy-vertex will be investigating this in the next week or two. We’ll update you on our findings. 😃