無法解析模塊“反應”的路徑。 （導入/未解決）

Question

好像我在這里遺漏了一些東西，它應該可以正常工作但eslint不斷拋出以下內容：

無法解析模塊“反應”的路徑。 （導入/未解決）

缺少“反應”的文件擴展名（導入/擴展）

嘗試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，在你的.eslintrc文件中添加.native.js作為允許的擴展名可能會有所幫助。
此外，如果您使用的是 Typescript，那么.ts和.tsx也會有所幫助。

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

Answer 2

我認為它會抱怨，因為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 3

我使用npm i -E react react-dom安裝了react和react-dom嘗試安裝未正確安裝的確切版本。

npm i react react-dom -D解決了這個問題。

Answer 4

只需注釋掉導入並運行即可。 然后再次刪除評論。 它對我有用。

Answer 5

我有同樣問題的經驗。

就我而言，出現此錯誤是因為我從遠程存儲庫中提取了新更新並帶來了新的依賴項。

為了解決這個問題，我只需使用npm install安裝該依賴項

Answer 6

我遇到了一些問題，我從項目中刪除了 nodo_modules 目錄並運行 yarn install / npm install

Answer 7

這也發生在我身上。 就我而言，這是因為我運行的是npm版本 6，但是團隊成員通過npm版本 7 安裝了一個新庫。版本 7 使用新版本的鎖文件格式。

我們的解決方案是確保每個人都運行相同的npm版本，以便我們的package-lock.json文件保持一致。