【问题标题】:PhpStorm can't resolve package import even though it exists (react-router-dom)即使存在,PhpStorm 也无法解析包导入(react-router-dom)
【发布时间】:2020-05-17 19:13:51
【问题描述】:

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

我要导入的包是 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-domSwitch.js 在那里。

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

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

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

编辑: 我意识到这可能是因为 PhpStorm 在导入 commonJS 模块时遇到了困难。

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

我还尝试为 react-router-dom 导入一些构建库,这可以奇怪地识别 Route 导入,但不能识别 Switch

我也尝试过使 PhpStorm 缓存无效并重新启动应用程序,但这也没有用。

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

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

我也已经安装了@types/react-router-dom。也许我还缺少另一个?

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

【问题讨论】:

    标签: phpstorm webstorm node-modules react-router-dom jetbrains-ide


    【解决方案1】:

    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 就成功了!
    • 以上答案不完整。你必须安装两个@types。 react-router 和 react-router-dom 以便进行完整的类型解析。对于来自 react-route 的 Route 等组件
    • 我不知道 Mac 的 Alt+Enter 等价物是什么,所以我在首选项窗口中下载了软件包并解决了问题。
    猜你喜欢
    • 2022-11-04
    • 2021-03-30
    • 2019-11-03
    • 2017-11-09
    • 2020-10-13
    • 2022-06-23
    • 1970-01-01
    • 2022-10-05
    • 2018-01-27
    相关资源
    最近更新 更多