Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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:

Cannot resolve symbol 'ModalDialog'

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.

like image 648
AndreKR Avatar asked Mar 02 '16 08:03

AndreKR


2 Answers

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.

enter image description here

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

like image 105
jubalm Avatar answered Nov 11 '22 14:11

jubalm


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.

like image 6
hegfirose Avatar answered Nov 11 '22 15:11

hegfirose