reactjs / reactjs/react-docgen
Can't reuse Babel plugins from Storybook
Nessuno ha ancora preso questa issue.
- Lingua principale
- TypeScript
- Stelle
- 3.8k
- Fork
- 316
- Merge medio
- 5h 7m
- PR unite (30g)
- 4
Descrizione
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"
],
}
Guida per i contributori
Apri la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Direzione di ricerca
Inizia confrontando .storybook/main.js, .babel.config.js e craco.config.js per determinare quale configurazione Babel riceve react-docgen. Riproduci il fallimento del parsing dell’operatore pipeline in una configurazione pubblica o minima, quindi verifica che la generazione della documentazione di Storybook rispetti la proposta configurata e il token del topic senza configurazioni in conflitto.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- javascript, typescript, webpack
- Ambito
- documentation, tooling
- Tipo di issue
- Bug
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Stato di attività
- Ferma
- Chiarezza
- Da chiarire
- Idoneità per principianti
- 25/100