patternfly / patternfly/patternfly-react
Bug - react-icons 6.6.1- invalid ESM module
まだ誰も着手していません。
- 主要言語
- TypeScript
- スター
- 862
- フォーク
- 392
- 平均マージ
- 4日 8時間
- マージ済み PR(30日)
- 9
説明
Describe the problem
Webpack build fails with error:
ERROR in ./node_modules/@patternfly/react-icons/dist/esm/createIcon.js 2:0-63
Module not found: Error: Can't resolve 'react/jsx-runtime' in '/home/xxx/repos/pf_modules/node_modules/@patternfly/react-icons/dist/esm'
Did you mean 'jsx-runtime.js'?
BREAKING CHANGE: The request 'react/jsx-runtime' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
How do you reproduce the problem?
minimal code to recreate the issue: https://github.com/rszwajko/pf-icons-esm-bug
Initially encountered while updating libraries on older branches of https://github.com/openshift/networking-console-plugin
Expected behavior
Webpack build should work without relaxing import rules.
Is this issue blocking you?
No. Workaround exists i.e. as used here https://github.com/openshift/networking-console-plugin/commit/e4ed48dabced60f949d4af09559996b131c93fba
{
test: /\.m?js/,
include: /node_modules\/@patternfly\/.*/,
resolve: {
fullySpecified: false,
},
},
What is your environment?
React 17
react-icons 6.6.1
What is your product and what release date are you targeting?
https://github.com/openshift/networking-console-plugin
Jira Issue: PF-4648
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
調査の方向性
https://github.com/rszwajko/pf-icons-esm-bug の最小再現から始め、Webpack 上で @patternfly/react-icons/dist/esm/createIcon.js に生成される react/jsx-runtime の import を調査してください。React 17 と react-icons 6.6.1 で失敗を再現します。Webpack のビルドが import ルールを緩和せずに動作すれば完了です。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- react, typescript, webpack
- 領域
- build-system, frontend
- issue の種類
- バグ
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 活発さ
- 活発
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 64/100