Can't reuse Babel plugins from Storybook
Nobody has claimed this yet.
Assessment
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Newbie friendliness
- 25/100
- Issue type
- Bug
- Clarity
- Needs clarification
- Activity status
- Stale
- Tech stack
- javascript, typescript, webpack
- Domain
- documentation, tooling
Research direction
Start by comparing .storybook/main.js, .babel.config.js, and craco.config.js to determine which Babel configuration react-docgen receives. Reproduce the pipeline-operator parsing failure in a public or minimal setup, then verify that Storybook documentation generation honors the configured proposal and topic token without conflicting configuration.
Written by the indexing model from the issue text.
Description
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"
],
}
- Dominant language
- TypeScript
- Stars
- 3.8k
- Forks
- 316
- Avg merge
- 5h 7m
- Merged PRs (30d)
- 4
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from reactjs/react-docgen
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
reactjs/react-docgen#1102 ·
-
Difficulty 3/5 1-2 days Newbie friendliness 58/100
reactjs/react-docgen#1134 ·
-
Typescript Status Open
Difficulty 5/5 Over a week Newbie friendliness 20/100
reactjs/react-docgen#1005 · 4 reactions ·
-
Difficulty 3/5 1-2 days Newbie friendliness 48/100
reactjs/react-docgen#997 ·
-
Difficulty 3/5 1-2 days Newbie friendliness 42/100
reactjs/react-docgen#994 · 1 comment ·
All issues in reactjs/react-docgen
Similar issues
-
clawsweeper:fix-shape-clear clawsweeper:queueable-fix clawsweeper:source-repro impact:ux-friction issue-rating: 🦞 diamond lobster no-stale P3
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
-
community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs
Difficulty 1/5 Under an hour Newbie friendliness 76/100
-
code-quality refactoring
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
github/gh-aw-firewall#8816 ·
-
integration:quickjs org:external priority:backlog topic:code-interpreter topic:middleware type:feature
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
langchain-ai/deepagents#6450 ·
-
Difficulty 1/5 Under an hour Newbie friendliness 88/100
vercel/react-tweet#225 ·