Resolve css files from context

[otakustay]

When this babel plugin is used from an external package, say we have a fe-tools package which configures babel itself and provides a fe-tools build command, and our source code imports a 3rd-party css file, the entire folder structure could be:

/src
  index.js <-- import 'reset-css/reset.css'
/node_modules
  /reset-css
    reset.less
  /fe-tools
    /node_modules
      /babel-plugin-react-css-modules

The require.resolve call inside getTargetResourcePath function tries to resolve reset-css/reset.css from node_modules/fe-tools/node_modules/babel-plugin-react-css-modules, fails to locate the correct file and throws an error

Since we have provided a context option to babel-plugin-react-css-modules, it could try to resolve modules from that location (using paths option of require.resolve) in order to successfully locate the correct css file

I have tried babel-plugin-module-resolver to solve this issue but it will also introduce other problems, so I think it's better to be supported from this plugin

I think this modification is backward compatable, if not, I can add a resolveInContext flag for it

[otakustay]

From the travis log I realized that only node > 8.9.0 supports paths option for require.resolve function, is there any possible solutions for this problem?

[ignatiusreza]

we're also facing the same issue when trying to import css with absolute path relative to webpack context even when this plugin already configured with the exact same context as webpack..

the error stacktrace are as follow:

ERROR in ./entries/app.jsx
Module build failed: Error: /path/to/project/src/entries/app.jsx: Cannot find module 'stylesheets/index.css'
    at Function.Module._resolveFilename (module.js:543:15)
    at Function.resolve (internal/module.js:18:19)
    at getTargetResourcePath (/path/to/project/node_modules/babel-plugin-react-css-modules/dist/index.js:112:20)
    at PluginPass.ImportDeclaration (/path/to/project/node_modules/babel-plugin-react-css-modules/dist/index.js:140:36)
    at newFn (/path/to/project/node_modules/babel-traverse/lib/visitors.js:276:21)
    at NodePath._call (/path/to/project/node_modules/babel-traverse/lib/path/context.js:76:18)
    at NodePath.call (/path/to/project/node_modules/babel-traverse/lib/path/context.js:48:17)
    at NodePath.visit (/path/to/project/node_modules/babel-traverse/lib/path/context.js:105:12)
    at TraversalContext.visitQueue (/path/to/project/node_modules/babel-traverse/lib/context.js:150:16)
    at TraversalContext.visitMultiple (/path/to/project/node_modules/babel-traverse/lib/context.js:103:17)
    at TraversalContext.visit (/path/to/project/node_modules/babel-traverse/lib/context.js:190:19)
    at Function.traverse.node (/path/to/project/node_modules/babel-traverse/lib/index.js:114:17)
    at NodePath.visit (/path/to/project/node_modules/babel-traverse/lib/path/context.js:115:19)
    at TraversalContext.visitQueue (/path/to/project/node_modules/babel-traverse/lib/context.js:150:16)
    at TraversalContext.visitSingle (/path/to/project/node_modules/babel-traverse/lib/context.js:108:19)
    at TraversalContext.visit (/path/to/project/node_modules/babel-traverse/lib/context.js:192:19)
    at Function.traverse.node (/path/to/project/node_modules/babel-traverse/lib/index.js:114:17)
    at traverse (/path/to/project/node_modules/babel-traverse/lib/index.js:79:12)
    at File.transform (/path/to/project/node_modules/babel-core/lib/transformation/file/index.js:548:35)
    at /path/to/project/node_modules/babel-core/lib/transformation/pipeline.js:50:19
    at File.wrap (/path/to/project/node_modules/babel-core/lib/transformation/file/index.js:564:16)
    at Pipeline.transform (/path/to/project/node_modules/babel-core/lib/transformation/pipeline.js:47:17)
    at transpile (/path/to/project/node_modules/babel-loader/lib/index.js:49:20)
    at Object.module.exports (/path/to/project/node_modules/babel-loader/lib/index.js:174:20)

manually applying the changes in this PR fix the issue

[ignatiusreza]

From the travis log I realized that only node > 8.9.0 supports paths option for require.resolve function, is there any possible solutions for this problem?

how about:

const getTargetResourcePath = (path: *, stats: *) => {
  const targetFileDirectoryPath = dirname(stats.file.opts.filename);
 
  if (path.node.source.value.startsWith('.')) {
    return resolve(targetFileDirectoryPath, path.node.source.value);
  }
 
  if (stats.opts.context) {
    return resolve(stats.opts.context, path.node.source.value);
  }
 	 
  return require.resolve(path.node.source.value);
};

[otakustay]

@ignatiusreza This may still introduce edge cases in lower version node, how about make getTargetResourcePath an option for this plugin, generateScopedName is another plugin option with type of function

[ignatiusreza]

hmm.. i'm not a maintainer, so can't decide.. but, as a user, I would expect getTargetResourcePath to by default be aware of both context and node_modules.. allowing to configure it could work in some advance cases.. but, being aware of those two things mentioned above should not be considered as advance..