reactjs / reactjs/react-docgen

Can't reuse Babel plugins from Storybook

オープン
#982 コメント 2 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

主要言語
TypeScript
スター
3.8k
フォーク
316
平均マージ
5時間 7分
マージ済み PR(30日)
4

説明

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

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

まず .storybook/main.js、.babel.config.js、craco.config.js を比較し、react-docgen がどの Babel 設定を受け取るのかを特定します。公開されている構成または最小構成でパイプライン演算子のパース失敗を再現し、その後、Storybook のドキュメント生成が、設定された proposal と topic token を、設定の競合なしに尊重することを確認します。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
javascript, typescript, webpack
領域
documentation, tooling
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
説明が足りない
初心者へのやさしさ
25/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。