gajus / gajus/babel-plugin-react-css-modules

This plugin should not take over webpack's native module resolve

オープン
#25 コメント 14 件 リアクション 17 件 担当者 0 名 GitHub で見る
bug
主要言語
JavaScript
スター
2k
フォーク
159
PR マージ指標
30日以内にマージされた PR はありません

説明

one of my webpack property looks like this

```js
resolve: {
modulesDirectories: [
"app",
"app/test",
"app/component",
"app/css"
"app/css/custom"
]
},
```

I set up webpack config like that, so I can do this

```js
import React from 'react'
import 'normalize.scss' // locates app/css folder
import 'flexboxgrid.scss' // locates app/css folder
import 'ui.scss' // locates app/css/custom folder

export default class Page extends React.Component {
render() {
return (


{React.cloneElement(this.props.children, {...this.props})}

)
}
}
```

It was perfect for my need. Until I installed `babel-plugin-react-css-modules` to my project.

Now When I do this

```js
import React from 'react'
import a from 'normalize.scss' // locates app/css folder
import b from 'flexboxgrid.scss' // locates app/css folder
import d from 'ui.scss' // locates app/css/custom folder

export default class Page extends React.Component {
render() {
return (


{React.cloneElement(this.props.children, {...this.props})}

)
}
}
```

I got a bunch of errors like below

```
./app/component/Page.js
Module build failed: Error: /Users/craigcosmo/Desktop/clean 2/app/component/Page.js: ENOENT: no such file or directory, open '/Users/craigcosmo/Desktop/clean 2/app/component/normalize.scss'
at Error (native)
at Object.fs.openSync (fs.js:640:18)
at fs.readFileSync (fs.js:508:33)
at getTokens (/Users/craigcosmo/Desktop/clean 2/node_modules/babel-plugin-react-css-modules/src/requireCssModule.js:34:14)
at exports.default (/Users/craigcosmo/Desktop/clean 2/node_modules/babel-plugin-react-css-modules/src/requireCssModule.js:77:10)
at PluginPass.ImportDeclaration (/Users/craigcosmo/Desktop/clean 2/node_modules/babel-plugin-react-css-modules/src/index.js:86:71)
at newFn (/Users/craigcosmo/Desktop/clean 2/node_modules/babel-traverse/lib/visitors.js:276:21)
at NodePath._call (/Users/craigcosmo/Desktop/clean 2/node_modules/babel-traverse/lib/path/context.js:76:18)
at NodePath.call (/Users/craigcosmo/Desktop/clean 2/node_modules/babel-traverse/lib/path/context.js:48:17)
at NodePath.visit (/Users/craigcosmo/Desktop/clean 2/node_modules/babel-traverse/lib/path/context.js:105:12)
at TraversalContext.visitQueue (/Users/craigcosmo/Desktop/clean 2/node_modules/babel-traverse/lib/context.js:150:16)
at TraversalContext.visitMultiple (/Users/craigcosmo/Desktop/clean 2/node_modules/babel-traverse/lib/context.js:103:17)
at TraversalContext.visit (/Users/craigcosmo/Desktop/clean 2/node_modules/babel-traverse/lib/context.js:190:19)
at Function.traverse.node (/Users/craigcosmo/Desktop/clean 2/node_modules/babel-traverse/lib/index.js:114:17)
at NodePath.visit (/Users/craigcosmo/Desktop/clean 2/node_modules/babel-traverse/lib/path/context.js:115:19)
at TraversalContext.visitQueue (/Users/craigcosmo/Desktop/clean 2/node_modules/babel-traverse/lib/context.js:150:16)
at TraversalContext.visitSingle (/Users/craigcosmo/Desktop/clean 2/node_modules/babel-traverse/lib/context.js:108:19)
at TraversalContext.visit (/Users/craigcosmo/Desktop/clean 2/node_modules/babel-traverse/lib/context.js:192:19)
at Function.traverse.node (/Users/craigcosmo/Desktop/clean 2/node_modules/babel-traverse/lib/index.js:114:17)
at traverse (/Users/craigcosmo/Desktop/clean 2/node_modules/babel-traverse/lib/index.js:79:12)
at File.transform (/Users/craigcosmo/Desktop/clean 2/node_modules/babel-core/lib/transformation/file/index.js:558:35)
at /Users/craigcosmo/Desktop/clean 2/node_modules/babel-core/lib/transformation/pipeline.js:50:19
@ ./app/component/MainContainer.js 15:12-27
```

As you can see now, webpack doesn't know where my modules are.

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

このリポジトリのコントリビューションガイドは索引されていません

調査の方向性

src/index.js と src/requireCssModule.js から始め、スタックトレースに示された ImportDeclaration のパスをたどります。報告にある webpack の設定とその動作を比較してください。app/component/Page.js と normalize.scss、flexboxgrid.scss、ui.scss の import を再現用の入力として使用し、webpack がそれらのモジュールを引き続き見つけられれば、issue は解決です。

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

評価

技術スタック
babel, javascript, scss, webpack
領域
build-system, tooling
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
42/100

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

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