React import are not resolved in WebStrom and Intellij 2016.2

As in above, unable to resolve Component, ProperTypes, InfoBar components, etc..

I have installed the latest IntelliJ, and have run npm install hence node_modules contain all the react folder.

The project I am working is 

https://github.com/erikras/react-redux-universal-hot-example

I am suspecting require.js issue  as 

react.js contains

'use strict';

module.exports = require('./lib/React');

I have installed require.js plugin for Intellij but still the same issue.

How to make sure Intellij IDE understand 

{Component, PropTypes}
18 comments
Comment actions Permalink

`npm install @types/react --save`

After that it all worked for me :)

6
Comment actions Permalink

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

5
Comment actions Permalink

>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

2
Comment actions Permalink

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

1
Comment actions Permalink

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.

1
Comment actions Permalink

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

import * as React from 'react';
import {Component, PropTypes} from 'react';
0
Comment actions Permalink

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).

0
Comment actions Permalink

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

0
Comment actions Permalink

+1

 

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

0
Comment actions Permalink

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

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

0
Comment actions Permalink

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

0
Comment actions Permalink

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

0
Comment actions Permalink

"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?

0
Comment actions Permalink

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

0
Comment actions Permalink

Tried updating to 16.x and it worked. Thanks

0
Comment actions Permalink

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!


0
Comment actions Permalink

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

-2

Please sign in to leave a comment.