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

javascript ecmascript-6 phpstorm webstorm commonjs
AndreKR picture AndreKR · Mar 2, 2016 · Viewed 13k times · Source

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.

Answer

jubalm picture jubalm · Nov 6, 2016

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.

Related questions

Import not working with JavaScript in PhpStorm/Webstorm

I'm trying to run a piece of JavaScript code written in a tutorial that looks like this: main.js import Vue from 'Vue'; import Alert from './components/Alert.vue'; new Vue({ el: 'body', components: { Alert } }) However, PhpStorm is giving …

Read More
What's the difference between using "let" and "var"?

ECMAScript 6 introduced the let statement. I've heard it that it's described as a local variable, but I'm still not quite sure how it behaves differently than the var keyword. What are the differences? When should let be used instead of …

Read More
"Uncaught SyntaxError: Cannot use import statement outside a module" when importing ECMAScript 6

I'm using ArcGIS JSAPI 4.12 and wish to use Spatial Illusions to draw military symbols on a map. When I add milsymbol.js to the script, the console returns error Uncaught SyntaxError: Cannot use import statement outside a module` so I …

Read More