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}
22 comments
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

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

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

`npm install @types/react --save`

After that it all worked for me :)

6
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

>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

"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

-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

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

0
Comment actions Permalink

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.

0
Comment actions Permalink

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

0
Comment actions Permalink

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

0

Please sign in to leave a comment.