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}
12

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

6
Avatar
Permanently deleted user

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

1
Avatar
Permanently deleted user

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

import * as React from 'react';
import {Component, PropTypes} from 'react';
0
Avatar
Permanently deleted user

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
Avatar
Permanently deleted user

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

0
Avatar
Permanently deleted user

+1

 

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

0
Avatar
Permanently deleted user

`npm install @types/react --save`

After that it all worked for me :)

6
Avatar
Permanently deleted user

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

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

0

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

0
Avatar
Permanently deleted user

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

>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
Avatar
Permanently deleted user

"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

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

0
Avatar
Permanently deleted user

Tried updating to 16.x and it worked. Thanks

0
Avatar
Permanently deleted user

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

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
Avatar
Permanently deleted user

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

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

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

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

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
Avatar
Permanently deleted user

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

0

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?

0

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

0

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

0

请先登录再写评论。