reactjs / reactjs/react-docgen

Can't reuse Babel plugins from Storybook

Ouverte
#982 2 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Langage dominant
TypeScript
Étoiles
3.8k
Forks
316
Merge moyen
5 h 7 min
PR mergées (30 j)
4

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"
	],
}

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Commencez par comparer .storybook/main.js, .babel.config.js et craco.config.js afin de déterminer quelle configuration Babel reçoit react-docgen. Reproduisez l’échec d’analyse de l’opérateur pipeline dans une configuration publique ou minimale, puis vérifiez que la génération de documentation de Storybook respecte la proposition configurée et le jeton de topic sans configuration contradictoire.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
javascript, typescript, webpack
Domaine
documentation, tooling
Type d'issue
Bug
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
À clarifier
Accessibilité débutants
25/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.