Using aliases with composes and babel-plugin-module-resolver does not works
まだ誰も着手していません。
評価
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 初心者へのやさしさ
- 45/100
- issue の種類
- バグ
- 明瞭さ
- おおむね明確
- 活発さ
- 停滞
- 技術スタック
- babel, javascript, react
調査の方向性
.babelrc の module-resolver 設定と compose の例から始め、次に getTokens と fetch における requireCssModule.js、および stack trace に示されている postcss-modules-parser の呼び出しを調べます。エイリアスと相対パスのケースを再現し、compose の解決で設定済みのエイリアスを使用すべきか判断します。エイリアスのケースが ENOENT エラーなしで解決され、既存の相対インポートが引き続き動作すれば完了です。
索引モデルが issue の本文から書いたものです。
説明
I'm trying to replace react-css-modules with this plugin. Most things work or have a simple solution, except for our use of aliases when composing classes. Previously we've used webpack and postcss-import to resolve the aliases, I don't expect that to work with a babel plugin.
@imports still work with aliases, even if I can't compose classes from a file loaded with @import. I can still do composes: button from '../button.css as long as the path is relative.
I've tried to set up the babel module-resolver by this comment https://github.com/gajus/babel-plugin-react-css-modules/issues/46#issuecomment-414130223
My config in .babelrc looks like this:
{
"presets": [
"@babel/preset-react"
],
"plugins": [
[
"module-resolver",
{
"root": [
"../apps"
],
"alias": {
"@constants": "../shared/constants",
"@shared": "../shared",
"@common": "./common",
}
}
],
["react-css-modules", {
"exclude": "node_modules",
"handleMissingStyleName": "warn",
"filetypes": {
".pcss": {
"syntax": ""
}
}
}],
],
If I compose a class like this:
.button {
composes: reset-button from '@common/styles/elements/button.css';
}
I get this error, as it tries to load the path as relative.
ERROR in ./src/app/components/Panel/Participants/Participant/Participant.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: ENOENT: no such file or directory, open '/[rootpath]/apps/src/app/components/Panel/Participants/Participant/@common/styles/elements/button.css'
at Object.openSync (fs.js:443:3)
at readFileSync (fs.js:343:35)
at getTokens (/[rootpath]/apps/node_modules/babel-plugin-react-css-modules/dist/requireCssModule.js:74:58)
at fetch (/[rootpath]/apps/node_modules/babel-plugin-react-css-modules/dist/requireCssModule.js:100:12)
at /[rootpath]/apps/node_modules/postcss-modules-parser/lib/index.js:74:20
Am I mistaken when I expect babel-plugin-react-css-modules to respect rules set with babel-plugin-module-resolver in compose statements?
- 主要言語
- JavaScript
- スター
- 2k
- フォーク
- 159
- PR マージ指標
- 30日以内にマージされた PR はありません
環境構築
このプロジェクトの環境構築ファイルはまだ確認していません。まず README を読み、一般的な手順ははじめてのコントリビューションガイドを参照してください。
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
gajus/babel-plugin-react-css-modules のほかの issue
-
難易度 3/5 1〜2日 初心者へのやさしさ 35/100
-
難易度 3/5 1〜2日 初心者へのやさしさ 35/100
gajus/babel-plugin-react-css-modules#309 · リアクション 1 件 ·
-
難易度 3/5 1〜2日 初心者へのやさしさ 35/100
-
難易度 3/5 1〜2日 初心者へのやさしさ 20/100
gajus/babel-plugin-react-css-modules#306 · コメント 1 件 ·
-
難易度 3/5 1〜2日 初心者へのやさしさ 35/100
gajus/babel-plugin-react-css-modules#304 · コメント 7 件 · リアクション 1 件 ·
gajus/babel-plugin-react-css-modules の issue をすべて見る
似ている issue
-
Add: Digi 4K Logoオープンcheck:passed logos:add
難易度 1/5 1時間未満 初心者へのやさしさ 82/100
メンテナーはふだん 1 日以内に返信
-
component/administration domain/framework needs-triage Platform(Default) priority/low
難易度 2/5 1〜3時間 初心者へのやさしさ 88/100
メンテナーはふだん 1 日以内に返信
-
難易度 1/5 1時間未満 初心者へのやさしさ 90/100
semantic-release/gitlab#1032 ·
-
agent/guide documentation hive/hosted-available-lke648397-260827-5n31
難易度 1/5 1時間未満 初心者へのやさしさ 92/100
メンテナーはふだん 1 日以内に返信
-
agentic-workflows
難易度 1/5 1時間未満 初心者へのやさしさ 85/100
githubnext/gh-aw-workshop#3933 ·
メンテナーはふだん 1 日以内に返信