无法解析模块“反应”的路径。 (进口/无未解决)

时间:2018-04-27 16:06:46

标签: reactjs babeljs eslint eslint-config-airbnb

似乎我在这里遗漏了一些东西,它应该没有错误,但 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

感谢。

6 个答案:

答案 0 :(得分:1)

我使用npm i -E react react-dom安装了反应 react-dom ,试图安装没有正确安装的确切版本。

npm i react react-dom -D解决了这个问题。

答案 1 :(得分:0)

我认为它会抱怨,因为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"
  }
}

答案 2 :(得分:0)

如果您使用的是React Native,则可以在您的.native.js文件中添加.eslintrc作为允许的扩展名。
另外,如果您使用的是Typescript,那么.ts.tsx也会有所帮助。

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

答案 3 :(得分:0)

我遇到过同样的问题。

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

为了解决这个问题,我只需使用 npm install

安装该依赖项

答案 4 :(得分:0)

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

答案 5 :(得分:0)

这也发生在我身上。就我而言,这是因为我运行的是 npm 版本 6,但团队成员通过 npm 版本 7 安装了一个新库。版本 7 使用新版本的锁定文件格式。

我们的解决方案是确保每个人都运行相同的 npm 版本,以便我们的 package-lock.json 文件保持一致。