Webstorm ES6 named import getting cannot resolve symbol error

Question

I have an error in Webstorm when using ES6 named import declaration:

import { nodes } from 'utils/dom';

I get "cannot resolve symbol" error on "nodes"

Also when I try to export as named export like this:

export {
  write: document.write.bind(document),
  node: document.querySelector.bind(document),
  nodes: document.querySelectorAll.bind(document)
};

I get errors too. I use eslint with babel-eslint parser. The thing is that this works in Sublime Text 3 as a charm, but for some reason fails error checking in Webstorm.

I assume that this is because except Eslint webstorm is doing other code checking.

Any Idea how I can suppress that and use only eslint with babel-eslint parser?

Any advice will be appreciated

Answer 1

I get "cannot resolve symbol" error on "nodes"

is because utils/dom in standard Node code means "find dom.js inside a module called 'utils'. You have overridden this behavior by using webpack's moduleDirectories property, but WebStorm doesn't know what that is. For WebStorm to properly resolve utils/dom, you'll need to add the utils folder as a library in your webstorm project configuration.

Your export syntax is incorrect. ES6 import/export syntax is 100% unrelated to objects, and in your example export, you are using object syntax. import { nodes } is asking for an export named nodes. There are multiple ways that you could write the exports that you have:

export const write = document.write.bind(document);
export const node = document.querySelector.bind(document);
export const nodes = document.querySelectorAll.bind(document);

or alternatively you could collapse them if you like multiline var/let/const

export const write = document.write.bind(document),
    node = document.querySelector.bind(document),
    nodes = document.querySelectorAll.bind(document);

or even

const write = document.write.bind(document);
const node = document.querySelector.bind(document);
const nodes = document.querySelectorAll.bind(document);


export {write, node, nodes};