reactjs / reactjs/react-docgen
Can't reuse Babel plugins from Storybook
Nadie ha tomado este issue todavía.
- Lenguaje dominante
- TypeScript
- Estrellas
- 3.8k
- Forks
- 316
- Merge medio
- 5 h 7 min
- PR fusionados (30 d)
- 4
Descripción
I'm trying hard to add Storybook to a CRA(CO) app with some custom Babel plugins, but no matter what I do, I get complaints from react-docgen, stating there's no proposal for the pipeline operator:
WARN Failed to parse [...]/src/utils/Alerts.js with react-docgen. Please use the below error message and the content of the file which causes the error to report the issue to the maintainers of react-docgen. https://github.com/reactjs/react-docgen
SyntaxError: ./src/utils/Alerts.js: Topic reference is used, but the pipelineOperator plugin was not passed a "proposal": "hack" or "smart" option. (21:60)
19 | }
20 |
> 21 | static #find = id => store.getState() |> getAlerts |> find(#, { id })
| ^
22 |
Unfortunately, this is a private project, so I can't provide reproducible examples :(
But I hope someone can find some jarring issue on the config files below, or any other idea brighter than Perplexity Pro could give me through the whole afternoon and night of this day.... 😞
I couldn't find a way to try to feed Babel configs directly to react-docgen without duplicating the Babel plugins and causing other issues.
Storybook version is 7.6.20 (because we're stuck in Node v16 for a while), but react-docgen is 7.1.1.
//craco.config.js
const webpack = require('webpack')
module.exports = {
babel: { loaderOptions: { configFile: true } },
webpack: {
configure: (webpackConfig) => {
webpackConfig.module.rules.push({
test: /\.pem$/i,
type: 'asset/source',
})
return webpackConfig
},
plugins: {
add: [
new webpack.DefinePlugin({ __SENTRY_DEBUG__: false })
],
},
},
}
//.storybook/main.js
/** @type { import('@storybook/react-webpack5').StorybookConfig } */
export default {
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/preset-create-react-app",
"@storybook/addon-onboarding",
"@storybook/addon-interactions",
],
framework: {
name: "@storybook/react-webpack5",
options: {
builder: { useSWC: false },
},
},
// typescript: { reactDocgen: false }, //no clue why, but this can't get the correct pipelineOperator settings from Babel
babel: config => ({
...config,
loaderOptions: {
...config.loaderOptions,
configFile: true
},
}),
docs: {
autodocs: "tag",
},
staticDirs: ["../public"],
};
//.babel.config.js
module.exports = {
'plugins': [
'@babel/plugin-proposal-do-expressions',
'@babel/plugin-transform-class-static-block',
['@babel/plugin-proposal-pipeline-operator', { proposal: 'hack', topicToken: '#' }],
//future ideas in case they seem useful
// "@babel/plugin-proposal-throw-expressions"
// "@babel/plugin-proposal-export-default-from"
],
}
Guía de contribución
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Línea de trabajo
Comienza comparando .storybook/main.js, .babel.config.js y craco.config.js para determinar qué configuración de Babel recibe react-docgen. Reproduce el fallo de análisis del operador pipeline en una configuración pública o mínima y, después, verifica que la generación de documentación de Storybook respete la propuesta configurada y el token de tópico sin conflictos de configuración.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- javascript, typescript, webpack
- Área
- documentation, tooling
- Tipo de issue
- Error
- Dificultad
- 4/5
- Tiempo estimado
- 3-5 días
- Estado de actividad
- Estancado
- Claridad
- Necesita aclaración
- Aptitud para principiantes
- 25/100