babel-plugin-module-resolver: ver 2.6.0 broken - aliases not recognized

Hello!

After your newest release (2.6.0) my react application stopped building because of few errors. The main problem is that aliases stopped working, for example logs from building:

Error
    at /Users/i319388/knowledgehub_react/app/node_modules/webpack/lib/Compilation.js:229:38
    at onDoneResolving (/Users/i319388/knowledgehub_react/app/node_modules/webpack/lib/NormalModuleFactory.js:29:20)
    at /Users/i319388/knowledgehub_react/app/node_modules/webpack/lib/NormalModuleFactory.js:85:20
    at /Users/i319388/knowledgehub_react/app/node_modules/webpack/node_modules/async/lib/async.js:726:13
    at /Users/i319388/knowledgehub_react/app/node_modules/webpack/node_modules/async/lib/async.js:52:16
    at done (/Users/i319388/knowledgehub_react/app/node_modules/webpack/node_modules/async/lib/async.js:241:17)
    at /Users/i319388/knowledgehub_react/app/node_modules/webpack/node_modules/async/lib/async.js:44:16
    at /Users/i319388/knowledgehub_react/app/node_modules/webpack/node_modules/async/lib/async.js:723:17
    at /Users/i319388/knowledgehub_react/app/node_modules/webpack/node_modules/async/lib/async.js:167:37
    at /Users/i319388/knowledgehub_react/app/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:24:19
    at onResolved (/Users/i319388/knowledgehub_react/app/node_modules/enhanced-resolve/lib/Resolver.js:38:18)
    at innerCallback (/Users/i319388/knowledgehub_react/app/node_modules/enhanced-resolve/lib/Resolver.js:94:11)
    at loggingCallbackWrapper (/Users/i319388/knowledgehub_react/app/node_modules/enhanced-resolve/lib/createInnerCallback.js:21:19)
    at /Users/i319388/knowledgehub_react/app/node_modules/tapable/lib/Tapable.js:134:6
    at /Users/i319388/knowledgehub_react/app/node_modules/enhanced-resolve/lib/ModulesInDirectoriesPlugin.js:54:23
    at /Users/i319388/knowledgehub_react/app/node_modules/enhanced-resolve/lib/Resolver.js:191:15
    at /Users/i319388/knowledgehub_react/app/node_modules/enhanced-resolve/lib/ModulesInDirectoriesPlugin.js:45:26
    at loggingCallbackWrapper (/Users/i319388/knowledgehub_react/app/node_modules/enhanced-resolve/lib/createInnerCallback.js:21:19)
    at /Users/i319388/knowledgehub_react/app/node_modules/tapable/lib/Tapable.js:134:6
    at Resolver.<anonymous> (/Users/i319388/knowledgehub_react/app/node_modules/enhanced-resolve/lib/ModuleAsDirectoryPlugin.js:30:12)
    at Storage.finished (/Users/i319388/knowledgehub_react/app/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
    at /Users/i319388/knowledgehub_react/app/node_modules/graceful-fs/polyfills.js:284:29
    at FSReqWrap.oncomplete (fs.js:114:15)
resolve module components/3-pages/App in /Users/i319388/knowledgehub_react/app/src/containers
  looking for modules in /Users/i319388/knowledgehub_react/app/node_modules
    /Users/i319388/knowledgehub_react/app/node_modules/components doesn't exist (module as directory)
  looking for modules in /Users/i319388/knowledgehub_react/app/bower_components
    /Users/i319388/knowledgehub_react/app/bower_components/components doesn't exist (module as directory)
  looking for modules in /node_modules
    /node_modules/components doesn't exist (module as directory)

Version 2.5.0 works as expected.

My babelrc:

{
  "presets": ["es2015", "stage-0", "react"],
  "plugins": ["react-hot-loader/babel",
    ["module-resolver", {
        "root": ["./src"],
        "alias": {
          "basic": "components/1-basic",
          "atoms": "components/1-basic/1-atoms",
          "molecules": "components/1-basic/2-molecules",
          "organisms": "components/2-organisms",
          "pages": "components/3-pages",
          "hoc":  "components/hoc",
          "components": "components",
          "containers": "containers",
          "store": "store",
          "services": "services",
          "utils": "utils",
          "styles": "styles"
        }
      }]
    ]
}

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 4
Comments: 34 (18 by maintainers)

Commits related to this issue

Quickfix for #144; regExps.find undefined — committed to tleunen/babel-plugin-module-resolver by deleted user 7 years ago

Most upvoted comments

I have just released babel-plugin-module-resolve@3.0.0-beta.0, if you’d like to give it a try. We changed quite a few things internally so hopefully all (or most) of your issues will be resolved.

If you have issue with this beta version, please let me and @fatfisz know 😃

Note: If you’re using it with eslint, please ugrade the import plugin to its v4.0.0-beta.0.

tleunen on Apr 23, 2017

I’ve managed to reproduce the error in Expo, will track the cause now.

fatfisz on Mar 29, 2017

The revert seems like the safest solution for now then.

fatfisz on Mar 30, 2017

@fatfisz I’ve made a 2.6.2 with your fix.

Lets see if a full rollback is still needed.

tleunen on Mar 30, 2017

Ok, I’ve pinpointed that to manipulateOptions.

Let’s take a look at where it is called:

for (const ref of plugins) {
  const [plugin, pluginOpts] = ref;

  currentPluginVisitors.push(plugin.visitor);
  currentPluginPasses.push(new PluginPass(this, plugin, pluginOpts));

  if (plugin.manipulateOptions) {
    plugin.manipulateOptions(opts, this.parserOpts, this);
  }
}

Because babel-plugin-module-resolver is using manipulateOptions to modify the plugin options, and pluginOpts is not passed to manipulateOptions, this code is used instead to find the plugin options:

let findPluginOptions = babelOptions.plugins.find(plugin => plugin[0] === this)[1];

This has a flaw - if the same plugin is included twice in the plugin list, only the first one will have the options modified. And this is indeed the cause of the error in create-react-native-app.

My suggestion is to get rid of manipulateOptions completely - it is not even documented AFAIK. Using the pre method and modifying this.opts inside it seems like a better option. I’ve prepared a fix here: #146.

On a side note, I don’t think this bug is related to the original one - so if OP or others could please send a bigger example, I’ll debug that.

fatfisz on Mar 30, 2017

I bet that our error messages are very similar, for example from mine stack trace: looking for modules in /node_modules /node_modules/components doesn't exist (module as directory)

It just means that plugin stopped working and doesnt replace aliases thus webpack is trying to find modules called same as our aliases (in my case ‘components’ for example).

mjasinski5 on Mar 29, 2017