无法解析模块“react”的路径。 （导入/没有-未解决）

Question

似乎我在这里遗漏了一些东西，它应该可以正常工作，但eslint不断抛出以下内容：

无法解析模块“react”的路径。 （导入/无未解决）

缺少“react”的文件扩展名（导入/扩展）

当尝试

import React from 'react'

这是一些调试信息：

package.json

{
  "dependencies": {},
  "devDependencies": {
    "react": "16.3.2",
    "react-dom": "16.3.2",
    "@storybook/addon-actions": "^3.4.2",
    "@storybook/addon-links": "^3.4.2",
    "@storybook/addons": "^3.4.2",
    "@storybook/react": "^3.4.2",
    "babel-core": "^6.26.3",
    "babel-eslint": "^8.2.3",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-runtime": "^6.26.0",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-config-prettier": "^2.9.0",
    "eslint-plugin-import": "^2.11.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.7.0"
  }
}

.eslintrc

{
  "parser": "babel-eslint",
  "extends": ["airbnb", "prettier"],
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  }
}

.babelrc

{
  "presets": ["env", "react"]
}

编辑器：atom v1.26.1

谢谢。

Answer 1

如果您使用 React Native，则在

.native.js

文件中添加

.eslintrc

作为允许的扩展可能会有所帮助。
另外，如果您使用 Typescript，那么

.ts

和

.tsx

也会有帮助。

"settings": {
  "import/resolver": {
    "node": {
      "extensions": [".ts", ".tsx", ".native.js"]
    }
  }
}

Answer 2

我遇到了一些问题，我从项目中删除了 nodo_modules 目录并运行yarn install / npm install

Answer 3

我认为它抱怨是因为

react

应该在

dependencies

:

{
  "dependencies": {
    "react": "16.3.2",
    "react-dom": "16.3.2",
  },
  "devDependencies": {
    "@storybook/addon-actions": "^3.4.2",
    "@storybook/addon-links": "^3.4.2",
    "@storybook/addons": "^3.4.2",
    "@storybook/react": "^3.4.2",
    "babel-core": "^6.26.3",
    "babel-eslint": "^8.2.3",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-runtime": "^6.26.0",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-config-prettier": "^2.9.0",
    "eslint-plugin-import": "^2.11.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.7.0"
  }
}

Answer 4

我使用 npm i -E react react-dom 安装了 react 和

react-dom

，试图安装未正确安装的确切版本。

npm i react react-dom -D

解决了问题。

Answer 5

这也发生在我身上。就我而言，这是因为我运行的是

npm

版本 6，但团队成员通过

npm

版本 7 安装了新库。版本 7 使用新版本的锁定文件格式。

我们的解决方案是确保每个人都运行相同的

npm

版本，以便我们的

package-lock.json

文件保持一致。

Answer 6

尝试添加eslintrc：

"rules": {
   "import/no-unresolved": [2, { "devDependencies": true }],
   ...
} 

Answer 7

我有同样问题的经验。

就我而言，出现此错误是因为我从远程存储库中提取了新的更新，并且它带来了新的依赖项。

为了解决这个问题，我只需使用

npm install

安装该依赖项

Answer 8

只需注释掉导入并运行即可。然后再次删除评论。这对我有用。

Answer 9

检查你的路由路线并根据文档进行更正https://reactrouter.com/start/library/installation