"Cannot resolve symbol" when using ES6 `import` syntax

Question

Here an example is given how to import certain classes from a module:

import {ModalContainer, ModalDialog} from 'react-modal-dialog';

However, PhpStorm (latest EAP) gives me an error:

I installed the package with npm install react-modal-dialog and it is present in node_modules.

The equivalent var {ModalContainer, ModalDialog} = require('react-modal-dialog'); works fine.

Answer 1

I encountered this when setting up a React project and all i did was download the import's typescript definition, in my case just searched for react.

Instructions for adding libraries to your project can be found on webstorm's help page.

Answer 2

I think it caused by PHPStorm. The IDE can't understand the import syntax when import a CommonJS module.

I got this warning when using WebStorm 2016.1.2, too.

Taking react and react-router as example:

• react is a CommonJS module, developed with ES5 syntax;
• react-router is developed with ES2015 syntax, and compiled by Babel.

WebStorm 2016.1.2 can resolve Link exported by react-router module, but can't resolve createClass exported by react module.

Update:

browser-sync is a CommonJS module developed with ES5, too. But it works well on WebStorm, WebStorm can resolve all API exported by browser-sync.

It baffled me that WebStorm can't resolve react exported API.