即使存在,PhpStorm 也无法解析包导入 (react-router-dom)

fam*_*oes 3 jetbrains-ide phpstorm webstorm node-modules react-router-dom

我正在使用 React (16.12.0) 和 PhpStorm (2019.3.1)。

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

我将编写以下导入:

import { NavLink, Switch } from "react-router-dom";
Run Code Online (Sandbox Code Playgroud)

这两个包都由 webpack/babel 正确导入,并且当我同时使用 Switch 和 NavLink 时,页面会正确呈现。

然而,纯粹从 IDE 的角度来看,我收到了关于 Switch 的警告: Cannot resolve symbol 'Switch'

这很奇怪,因为它显然就在那里,我登记入住/node_modules/react-router-domSwitch.js在那里。

奇怪的是在之前版本的 PhpStorm 上(在几次更新和插件导入和其他更改之前),PhpStorm 准确地找到了 Switch 导入。

我最近没有更新 react-router-dom 并且正在使用其最新的稳定版本。

关于为什么可能缺少 Switch 的任何想法?

编辑: 我意识到这可能是因为 PhpStorm 难以导入 commonJS 模块。

我尝试将 Javascript 编译方法从 React JSX 更改为 ECMA 6。那没有用。

我还尝试为 react-router-dom 导入一些构建库,这有助于Route奇怪地识别导入但不是Switch.

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

编辑 2: 根据答案,当我的光标在其中时,我尝试使用 option+enter(Windows 上的 alt+enter)react-router-dom来尝试安装打字稿包,但我没有得到与 JetBrains 上显示的相同的建议操作网站:https : //www.jetbrains.com/help/webstorm/configuring-javascript-libraries.html

它所建议的只是将单引号切换为双引号。

在此处输入图片说明

另外我已经安装了@types/react-router-dom。也许还有另一个我想念的?

在此处输入图片说明

编辑 3: 正确答案是安装@types/react-router. 出于某种原因@types/react-router-dom,欺骗性地不是解决这个问题的方法。

len*_*ena 8

node_modules/react-router-dom/esm/react-router-dom.js出口BrowserRouterHashRouterLinkNavLink,但不出口Switch,它没有明确定义存在。为了更好的完成/类型提示,您可以为包安装 Typescript 存根:将光标放在"react-router-dom"导入语句中,点击Alt+Enter,选择安装 TypeScript 定义以获得更好的类型信息::

在此处输入图片说明

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

  • 上面的答案并不完整。您必须安装两种@types。React-router 和 React-router-dom 以便进行完整的类型解析。对于像 React-route 中的 Route 这样的组件 (2认同)