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

[applemate]

one of my webpack property looks like this

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

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

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 (
			<div className="page">
				{React.cloneElement(this.props.children, {...this.props})}
			</div>
		)
	}
}

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

Now When I do this

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 (
			<div className="page">
				{React.cloneElement(this.props.children, {...this.props})}
			</div>
		)
	}
}

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.

[gajus]

Can you please fork the demo and reproduce the issue?

https://github.com/gajus/babel-plugin-react-css-modules/tree/master/demo

This plugin does not rewrite the imports and it is not aware of webpack at all. Something else is breaking.

I am closing this until there is a fork reproducing the issue.

[applemate]

I can't get the demo to work. Can you check out the error below?

[clessg]

This issue appears to be caused by this line. Specifically, require.resolve(path.node.source.value) results in a call such as require.resolve('home.css'), which has no knowledge of webpack.

I'm not sure this can be fixed by the plugin unless there's a new configuration option.

You should be able to set NODE_PATH to fix this, but I'm not sure how robust of a solution it is: NODE_PATH=src:src/components:src/sass webpack-dev-server (or, if I recall correctly, NODE_PATH=src;src/components;src/sass webpack-dev-server on Windows).

[gajus]

I'm not sure this can be fixed by the plugin unless there's a new configuration option.

It can. It should simply lookup the resolve.modulesDirectories configuration and respect it when attempting to resolve the paths.

[clessg]

Is it possible for a Babel plugin to read the webpack config without the user explicitly passing it in?

[gajus]

Oh, sorry – I got lost between projects. I thought I am looking at an issue of https://github.com/gajus/isomorphic-webpack. Please ignore me.

[clessg]

No problem. 😹 On the bright side, that project looks like exactly what I was looking for.