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

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

Abierto
#25 14 comentarios 17 reacciones 0 asignados Ver en GitHub
bug
Lenguaje dominante
JavaScript
Estrellas
2k
Forks
159
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

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.

Guía de contribución

No hay ninguna guía de contribución indexada para este repositorio

Línea de trabajo

Comienza con src/index.js y src/requireCssModule.js, siguiendo la ruta de ImportDeclaration mostrada en el stack trace; compara su comportamiento con la configuración de webpack del informe. Usa app/component/Page.js y las importaciones de normalize.scss, flexboxgrid.scss y ui.scss como entradas de reproducción, y considera resuelto el problema cuando webpack pueda seguir localizando esos módulos.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
babel, javascript, scss, webpack
Área
build-system, tooling
Tipo de issue
Error
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
42/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.