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

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

Ouverte
#25 14 commentaires 17 réactions 0 personnes assignées Voir sur GitHub
bug
Langage dominant
JavaScript
Étoiles
2k
Forks
159
Métriques de merge des PR
Aucune PR mergée en 30 j

Description

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.

Guide de contribution

Aucun guide de contribution indexé pour ce dépôt

Piste de recherche

Commencez par src/index.js et src/requireCssModule.js, en suivant le chemin ImportDeclaration indiqué dans la stack trace ; comparez son comportement avec la configuration webpack du rapport. Utilisez app/component/Page.js ainsi que les imports de normalize.scss, flexboxgrid.scss et ui.scss comme entrées de reproduction, le problème étant résolu lorsque webpack peut toujours localiser ces modules.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
babel, javascript, scss, webpack
Domaine
build-system, tooling
Type d'issue
Bug
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
42/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.