PhpStorm无法解决软件包导入，即使它存在(react-router-dom) [英] PhpStorm can't resolve package import even though it exists (react-router-dom)

问题描述

我在PhpStorm(2019.3.1)中使用React(16.12.0).

我要导入的软件包是react-router-dom(5.1.2)

我将编写以下导入:

import { NavLink, Switch } from "react-router-dom";

这两个软件包都可以通过webpack/babel正确导入，并且当我同时使用Switch和NavLink时，页面可以正确呈现.

但是，仅从IDE角度来看，我会收到有关Switch的警告:Cannot resolve symbol 'Switch'

这很奇怪，因为它显然在那儿，我签入了/node_modules/react-router-dom并且Switch.js在那儿.

奇怪的是，在PhpStorm的早期版本中(在进行了几次更新和插件导入以及其他更改之前)，PhpStorm准确地找到了Switch导入.

我最近尚未更新react-router-dom，并且正在使用其最新的稳定版本.

关于为什么它可能会丢失Switch的任何想法?

我已经意识到这可能是因为PhpStorm在导入commonJS模块时遇到了困难.

我尝试将JavaScript编译方法从React JSX更改为ECMA 6.

我还尝试导入一些用于react-router-dom的构建库，并且该库用于识别Route导入很奇怪，但不能识别Switch.

我还尝试了使PhpStorm缓存无效并重新启动应用程序，但这也不起作用.

每个答案，我试图在光标位于react-router-dom内时使用option + enter(在Windows上为Alt + enter)来尝试安装打字稿包，但是我没有得到与JetBrains上所示的相同建议操作网站: https://www.jetbrains.com/help/webstorm/配置-javascript-libraries.html

所建议的只是将单引号转换为双引号.

我还已经安装了@ types/react-router-dom.也许我还想念另一个人?

正确的答案是安装@types/react-router.由于某些原因，@types/react-router-dom显然不是解决此问题的方法.

解决方案

node_modules/react-router-dom/esm/react-router-dom.js导出BrowserRouter，HashRouter，Link和NavLink，但不导出Switch，未明确定义那里. 为了更好地完成/提示类型，可以为该软件包安装Typescript存根:将光标放在import语句中的"react-router-dom"上，单击Alt+Enter，选择安装TypeScript定义以获取更好的类型信息::

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

I am using React (16.12.0) with PhpStorm (2019.3.1).

The package I am importing is react-router-dom (5.1.2)

I will write the following import:

import { NavLink, Switch } from "react-router-dom";

Both packages are imported properly by webpack/babel and the page renders properly when I use both Switch and NavLink.

However purely from the IDE-perspective, I get a warning about Switch: Cannot resolve symbol 'Switch'

It is weird because it is obviously there, and I checked in /node_modules/react-router-dom and Switch.js is there.

Strangely on previous versions of PhpStorm (before several updates and plugin imports and other changes), the Switch import was accurately found by PhpStorm.

I have not updated react-router-dom recently and am using its latest stable build.

Any ideas as to why it might be missing Switch?

EDIT: I have realized it may be because PhpStorm is having difficulty importing a commonJS module.

I tried changing the Javascript compilation method from React JSX to ECMA 6. That didn't work.

I also tried importing some build libraries for react-router-dom, and that worked for recognizing the Route import strangely but not Switch.

I also tried invalidating the PhpStorm cache and restarting the app, but that didn't work either.

EDIT 2: Per an answer, I have tried to use option+enter (alt+enter on windows) while my cursor is within react-router-dom to try to install a typescript package, but I don't get the same suggested action as shown on the JetBrains website: https://www.jetbrains.com/help/webstorm/configuring-javascript-libraries.html

All it suggests is switching single quotes to double quotes.

Also I have already installed @types/react-router-dom. Perhaps there is another one that I am missing?

EDIT 3: The correct answer was to install @types/react-router. For some reason @types/react-router-dom is deceivingly NOT what solves this.

解决方案

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

这篇关于PhpStorm无法解决软件包导入，即使它存在(react-router-dom)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！