Search code examples
webstorm

WebStorm using ES6 import with CommonJS module


I'm using WebStorm and want to use ES6 import instead of require. However when using import with libraries that use CommonJS like lodash I get a warning from WebStorm "cannot resolve symbol".

The code work perfectly as babel transform the import to require, I just want WebStorm to play along and not showing any error. I don't want to partly use ES6 import and partly require.

I'm using WebStorm version 2016.2.2.

Cannot resolve symbol castArray


Solution

  • webstorm can resolve es6 imports from CommonJS modules, but just in cases when modules are exported explicitly, like module.exports = module_name; or similar; but lodash modules are exposed in a tricky way:

    var freeExports = typeof exports == 'object' && exports && !exports.nodeType && exports; 
    var freeModule = freeExports && typeof module == 'object' && module && !module.nodeType && module; 
    var moduleExports = freeModule && freeModule.exports === freeExports; 
    ...
    var _ = runInContext(); 
    ...
    if (freeModule) { (freeModule.exports = _)._ = _; freeExports._ = _; }
    

    that's why WebStorm can't find modules there...