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

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

Aperta
#25 14 commenti 17 reazioni 0 assegnatari Vedi su GitHub
bug
Lingua principale
JavaScript
Stelle
2k
Fork
159
Metriche di merge delle PR
Nessuna PR unita negli ultimi 30g

Descrizione

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.

Guida per i contributori

Nessuna guida per i contributori indicizzata per questo repository

Valutazione

Questa issue non è ancora stata valutata.

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.