React import are not resolved in WebStrom and Intellij 2016.2

Neither Component nor PropTypes modules are defined in node_modules/react/lib/React.js; they are defined in node_modules/react/lib/ReactIsomorphic.js and assigned to React module dynamically. WebStorm can't resolve dynamic references using static code analysis.

As a workaround you can try downloading react typescript stubs: Settings | Languages & Frameworks | JavaScript | Libraries, Download..., choose 'react' from the stubs list

This worked for Component and PropTypes, but not React is not found stating 'Default export is not declared in imported module'

Here is a workaround that I am using after installing the 'react' library.

import * as React from 'react';
import {Component, PropTypes} from 'react';

I have the same isse. Tried the thing from @Elena and it didn't work. Anyone have any other ideas?

BTW I'm on IntelliJ Ultimate 2016.3.4 EAP (went to EAP hoping it was more friendly to React Native).

please vote for https://youtrack.jetbrains.com/issue/WEB-24780

Ah I see. Done. Hope they do that soon.

+1

By the way I've downloaded React as instructed, but to no effect. The problem persists.

`npm install @types/react --save`

After that it all worked for me :)

I'm still having the same issue with:
import React, { Component } from ‘react’;

WebStorm gives the following warning:
Cannot resolve symbol ‘Component’

what WebStorm and React versions do you use? Is react installed locally and listed in the project's package.json file?

WebStorm 2017.2.4
Build #WS-172.4155.35, built on September 11, 2017
Licensed to WebStorm Evaluator
Expiration date: November 17, 2017
JRE: 1.8.0_152-release-915-b11 x86_64
JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
Mac OS X 10.11.6

Yes, react is installed locally and listed in package.json. Version 0.14.9

>Version 0.14.9

it is very age-old - current version is 16.0.0... see https://intellij-support.jetbrains.com/hc/en-us/community/posts/207725245/comments/207403745 for explanation.

Installing typescript stubs (npm install @types/react --save) helps

"very age-old" is subjective. The version I'm using was released 6 months ago. From npm info:

     '0.14.9': '2017-04-12T15:45:16.662Z',

So are you saying WebStorm will only work with the latest react version 16.0.0? It does not support a stable version released 6 months ago?

with more recent versions, it works out of the box. For your version, installing typings is required - see above

Tried updating to 16.x and it worked. Thanks

Hi,
I'm having the same issue in PHPStorm 2017.2.4.

Updating to React 16.0.0 didn't make a difference. Installing stubs in Javascript -> Libraries didn't change anything either.

Not sure if I need to create a separate issue in the PHPStorm community or keep the discussion here, please advise. 

Thank you!

Adding typescript stubs via Preferences | Languages & Frameworks | JavaScript | Libraries doesn't always help to resolve module imports, you need to have the required modules right in your project (added via `npm install`). in your case I can clearly see that react modules are not in your project - they are installed, but excluded from indexing, thus they can't be resolved

This is what resolved the issue for me.  I previously had the stubs installed using the ide and npm, however, neither resolved React.Component.

Hope the screenshot helps.

I know this is old, but what resolved is adding any modules to your modulesdirectories

modulesDirectories: [
    'src',
    'node_modules',
    'components',
    'containers',
    'redux',
    'theme',
    'helpers',
    'utils'
],

then npm install

then for good measure

in your webpack config, and then i pointed my Preferences> Languages&Frameworks> Webpack > dev.config.json

I am using React library in WebStorm. So, when I import Switch and Route from react-router-dom, then I have imports error. When I hover over Switch, it says, Cannot resolve symbol 'Switch'. Same is the case with Route. Here is a screenshot. This import works fine when I write the same react code in VS Code.

node_modules/react-router-dom/esm/react-router-dom.js exports BrowserRouter, HashRouter, Link and NavLink, but doesn't export Switch, it's not explicitly defined there. For better completion/type hinting, you can install Typescript stubs for the package: put cursor on "react-router-dom" in import statement, hit Alt+Enter, choose Install TypeScript definitions for better type information::

See https://www.jetbrains.com/help/webstorm/2019.3/configuring-javascript-libraries.html#ws_jsconfigure_libraries_ts_definition_files

Elena Pogorelova
Even after installing the Typescript stubs, it still doesn't work, I tried 'react-router-dom' alone, with 'react-router', and this last one alone, nothing worked...

I have the same issue.

everything I've tried did not work, still get the warning "Cannot resolve Symbol 'xyz'".
I get this warning also for react hooks e.g. useState, useEffect, useCallback..

Having the same issue - Webstorm can't resolve resolve Route from React Router, though the Route works fine.

I tried installing Typescript stubs for the package, explained here

https://intellij-support.jetbrains.com/hc/en-us/community/posts/207725245/comments/360001761600

 Tried downloading react typescript stubs, explained here

https://intellij-support.jetbrains.com/hc/en-us/community/posts/207725245/comments/207403745

My settings look like this but no effect.

Tested the app on VS Code - all look ok. That's disappointing that free IDE handles this better.

I opened node_modules and compared Route and Link elements - the way they're being exported looks the same, but there's no problems with importing and using Link in Webstorm. Route still gives an error though.

My IDE version:
WebStorm 2020.2.4
Build #WS-202.8194.6, built on November 24, 2020
Runtime version: 11.0.9+11-b944.49 x86_64
VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o.
macOS 10.16
GC: ParNew, ConcurrentMarkSweep

Any suggestions on how to fix that?

Looks like not all typings were installed (sometimes downloading typings through intention installs the main package but fails for dependent ones). I'd suggest removing both libraries from Preferences | Languages & Frameworks | JavaScript | Libraries and installing typings manually with npm install @types/react-router-dom

Please also make sure to invalidate caches once the downloading completes - File > Invalidate caches/Restart, Invalidate and restart

Elena Pogorelova that helped, thanks!