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};

Answer 2

Hard to say if this is directly related, but for Webstorm to know how to resolve your imports, you can also go to Preferences > Directories and set folders as Resource Root (or right/context-click on a folder and set it that way)

This might need to be done, for example, when you've configured Webpack to resolve certain sub-directories, where your project structure might be:

/
  /docs
  /src
    /containers
      /app
        App.js
    /components
      /header
        Header.js

In which case Webstorm would expect an import in App.js to look like the following:

import Header from '../../../components/header/Header'

Whereas with Webpack, if you've added src as a module to resolve, you can do the following, which Webstorm doesn't currently understand, hence adding it as a Resource Root resolves the issue

import Header from 'components/header/Header'

Reference: Path aliases for imports in Webstorm