0
515
Vistas¿Cómo solucionar problemas de Storybook que no carga historias?
Estoy tratando de cargar las historias del libro de cuentos de demostración ( withText , withIcon ), usando esta guía de reacción , pero no puedo ejecutar ninguna de las historias de ejemplo.
Para evitar dudas, aquí está el archivo de código (Histogram.stories.js):
import React from 'react'; import { Button } from '@storybook/react/demo'; export default { title: 'Button' }; export const withText = () => <Button>Hello Button</Button>; export const withEmoji = () => ( <Button> <span role="img" aria-label="so cool"> 😀 😎 👍 💯 </span> </Button> ); Y mi main.js
module.exports = { stories: ['../src/**/*.stories.jsx?'], }; Cuando ejecuto npm run storybook obtengo esta página:
Esta es la salida en la devconsole:
vendors~main.9bf87aec509ee033c0f8.bundle.js:135070 Download the React DevTools for a better development experience: https://fb .me/react-devtools DevTools failed to parse SourceMap: chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/include.preload.js.map DevTools failed to parse SourceMap: chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/include.postload.js.map DevTools failed to parse SourceMap: http://localhost:60923/unfetch.mjs.mapLo que no muestra lo que salió mal.
Del mismo modo, no puedo ver qué está mal con la configuración en la línea de comando
> start-storybook info @storybook/react v5.3.18 info info => Loading presets info => Loading presets info => Adding stories defined in ".storybook\main.js". info => Using default Webpack setup. info => Using base config because react-scripts is not installed. webpack built 618e1f89c3579e851a85 in 52146ms ╭────────────────────────────────────────────────────╮ │ │ │ Storybook 5.3.18 started │ │ 1.37 min for manager and 1.37 min for preview │ │ │ │ Local: http://localhost:60923/ │ │ On your network: http://192.168.0.15:60923/ │ │ │ ╰────────────────────────────────────────────────────╯ La única opción de CLI que puedo encontrar, que parece relevante, es --debug-webpack pero esto no produce más resultados en mi caso.
¿Qué puedo hacer para seguir solucionando este problema?
5 Respuestas
Responde la pregunta0
El main.js en su carpeta ./storybook contiene la línea stories: ['../src/**/*.stories.jsx?'], dado que su historia se llama Histogram.stories.js , debería ser como se muestra a continuación.
module.exports = { stories: ['../src/**/*.stories.js'] }; Intenté replicar esto en mi código usando tu main.js y también me pasó exactamente lo mismo. También agregando el ? como estas stories: ['../src/**/*.stories.js?'] da el mismo error
Editar: puede verificar tanto .js como .jsx modificando la línea como esta stories: ['../src/**/*.stories.js(x)?']
Editar (24/7/2021): a partir de hoy, al instalar Storybook con npx sb init y elegir reaccionar como plantilla, agrega automáticamente el siguiente fragmento en el archivo main.js
module.exports = { "stories": [ "../stories/**/*.stories.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)" ], "addons": [ "@storybook/addon-links", "@storybook/addon-essentials" ] }que resuelve este problema
0
Tuve el mismo problema de "historias que no aparecen en la interfaz de usuario del libro de cuentos" que me trajo aquí. Resulta que había pegado un código de prueba que establecía un regEx en "excludeStories" para filtrar cualquier función de historia con la palabra "Data" en él. Por supuesto, mi historia de desaparición se llamó "StoryWithData", por lo que fue excluida.
Esto me tomó demasiado tiempo para resolver esto, así que publicar aquí en caso de que ayude a alguien más.
export default { component: Footer, title: "App/Footer", excludeStories: /.*Data$/, // -> this will filter out functions named like "*Data" }0
Vuelva a guardar el archivo de la historia. Hace que el componente vuelva a aparecer en el panel lateral y luego puede ver los errores.
start-storybook parece fallar silenciosamente. Pero puede solucionar los errores volviendo a guardar los archivos uno por uno.
0
deberías usar como
module.exports = { stories: ['../src/**/*.stories.(ts|js|mdx)'] };básicamente manejar todo tipo de historias.
0
Eliminar la carpeta node_modules/.cache/storybook y reiniciar Storybook es lo que funcionó para mí.