Stories not showing up in start mode, but show up in build mode
amcdnl opened this issue · comments
Issue
Some stories do not show up when you run the start mode, however, they do show up when you run the build mode.
I've tried downgrading / upgrading various different things and can't seem to pinpoint the breaking point. I'm thinking its related to maybe a circular dependency, however, no errors are thrown by babel or ts or webpack ( even in debug mode ).
Command
"storybook": "start-storybook -p 6006 -s public",
Custom Config
main.js:
module.exports = {
stories: ['../src/**/*.story.@(ts|tsx|mdx)'],
addons: [
'@storybook/preset-create-react-app',
'@storybook/addon-storysource',
'@storybook/addon-docs/preset',
'@storybook/addon-knobs',
{
name: '@storybook/addon-essentials',
options: {
controls: false
}
}
],
typescript: {
check: true,
reactDocgen: 'react-docgen-typescript'
},
webpackFinal: async (config) => {
config.module.rules = config.module.rules.map(r => {
if (r.oneOf) {
for (const o of r.oneOf) {
if (o.use) {
for (const u of o.use) {
if (u.loader && u.loader.indexOf('postcss') > -1) {
u.options = {
...u.options,
plugins: [
require('postcss-nested'),
require('postcss-focus-visible'),
require('postcss-preset-env')({ stage: 1 })
]
}
}
}
}
}
}
return r;
});
return config;
}
};
Versions
"@mdx-js/react": "1.6.22",
"@storybook/addon-docs": "6.1.21",
"@storybook/addon-essentials": "6.1.21",
"@storybook/addon-knobs": "6.1.21",
"@storybook/addon-storysource": "6.1.21",
"@storybook/addons": "6.1.21",
"@storybook/preset-create-react-app": "3.1.7",
"@storybook/react": "6.1.21",
"@storybook/theming": "6.1.21",
and the other stuff:
"@craco/craco": "^6.1.1",
"babel-loader": "8.1.0",
"typescript": "4.2.3",
"react-scripts": "4.0.3",
"postcss": "^7",
"chromatic": "^5.7.0",
"postcss-focus-visible": "^5.0.0",
"postcss-nested": "^4",
"postcss-preset-env": "^6.7.0",
"autoprefixer": "^9",
Do you have a repro repo you can share?
I don't have anything that would be easy to reproduce - is there any debug outputs I could post to help?
Try upgrading to the latest prerelease:
npx sb@next upgrade --prerelease
Does that fix it?
- Upgrading did not fix it
- Related to issue w/ webpack using something before it loaded it. Re-arranging some imports resolved the issue.
- We should add better logging for when this happens in the core apis.
I have a related issue when adding the latest Storybook 6.2.0 for the first time with npx sb init - my start-storybook doesn't work, but build-storybook does work.
start-storybook yields the Cannot Get / error (so none of the stories display) with no build errors, but build-storybook works (all of the default stories + my 1 custom new story) display correctly.
I'm not sure how to debug the issue further, so I'm leaving it alone for now.
Details for the project (private repository for nycvaccinelist.com )
- Uses Preact
- Uses next.js 10
- Uses tailwind CSS
- Uses typescript
- No custom
webpack.config.js
Here is our main.js and package.json in case it helps.
module.exports = {
stories: [
"../stories/**/*.stories.mdx",
"../stories/**/*.stories.@(js|jsx|ts|tsx)",
"../components/**/*.stories.@(js|jsx|ts|tsx)",
],
typescript: {
reactDocgen: "none",
},
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
{
name: "@storybook/addon-postcss",
options: {
postcssLoaderOptions: {
implementation: require("postcss"),
},
},
},
]
};"dependencies": {
"@datadog/browser-rum": "^2.5.1",
"@jsdevtools/rehype-toc": "^3.0.2",
"@mapbox/mapbox-gl-geocoder": "^4.7.0",
"@mdx-js/loader": "^1.6.22",
"@next/mdx": "^10.0.6",
"@tailwindcss/typography": "^0.4.0",
"@turf/bbox": "^6.3.0",
"@turf/buffer": "^6.3.0",
"@types/simple-oauth2": "^4.1.0",
"crypto": "^1.0.1",
"d3-array": "^2.11.0",
"humanize-plus": "^1.8.2",
"js-cookie": "^2.2.1",
"mapbox-gl": "^2.1.1",
"next": "^10.0.5",
"next-compose-plugins": "^2.2.1",
"next-plugin-preact": "^3.0.3",
"papaparse": "^5.3.0",
"preact": "^10.5.12",
"preact-render-to-string": "^5.1.12",
"react": "npm:@preact/compat",
"react-dom": "npm:@preact/compat",
"react-select": "^4.0.2",
"react-seo-meta-tags": "^1.2.1",
"react-ssr-prepass": "npm:preact-ssr-prepass",
"rehype-autolink-headings": "^5.0.1",
"rehype-slug": "^4.0.1",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^2.0.3",
"simple-oauth2": "^4.2.0",
"swr": "^0.4.0"
},
"devDependencies": {
"@babel/core": "^7.13.14",
"@datadog/build-plugin": "^0.4.0",
"@datadog/datadog-ci": "^0.10.2",
"@storybook/addon-actions": "^6.2.0",
"@storybook/addon-essentials": "^6.2.0",
"@storybook/addon-links": "^6.2.0",
"@storybook/addon-postcss": "^2.0.0",
"@storybook/react": "^6.2.0",
"@svgr/webpack": "^5.5.0",
"@types/node": "^14.14.22",
"@types/react": "^17.0.0",
"@typescript-eslint/eslint-plugin": "^4.15.2",
"@typescript-eslint/parser": "^4.15.2",
"autoprefixer": "^10.2.3",
"babel-loader": "^8.2.2",
"eslint": "^7.20.0",
"eslint-config-preact": "^1.1.3",
"husky": "^4.3.8",
"lint-staged": "^10.5.4",
"nextjs-sitemap-generator": "^1.3.0",
"postcss": "^8.2.4",
"prettier": "^2.2.1",
"raw-loader": "^4.0.2",
"sass": "^1.32.6",
"sass-loader": "10.1.1",
"tailwindcss": "^2.0.2",
"typescript": "^4.1.3"
},Update
-
I tried forking a minimal starter repo that uses TS, Tailwind, React, and Storybook 6.2, made a few changes to bump it from Storybook 6.0 to 6.2 but it works. Unfortunately this doesn't help my private repository's situation, but sharing it in case someone needs it as a starting point:
@hydrosquall please open a new issue. i went through this with @amcdnl yesterday and it was something specific to his project.
To close the loop on this - it was a strange thing that was ultimately resolved by removing node_modules/.cache/storybook, so no action was needed :) . We're now happily deployed at https://nycvl-storybook.vercel.app/ .