無法在 React.js 中解析模塊（未找到）

Question

我不敢相信我在問一個明顯的問題，但我仍然在控制台日志中收到錯誤。

控制台說它無法在目錄中找到該模塊，但我至少檢查了 10 次錯別字。 無論如何，這是組件代碼。

我想在 root 中渲染Header

import React, { Component } from 'react'
import Header from './src/components/header/header'
import logo from './logo.svg'
import './App.css'

class App extends Component {
  render() {
    return (
      <Header/>
    );
  }
}

export default App;

這是Header組件

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import navBar from './src/components/header/navBar'
import './src/css/header.css'

class Header extends Component {
    render() {
        return {
            <div>
             <div id="particles-js"></div>
             <navBar/>
             <Title/>
          </div>
        };
    }
}

ReactDOM.render(<Header/>, document.getElementById('header'));

我至少檢查了 10 次該模塊位於此位置./src/components/header/header ，它是（文件夾“header”包含“header.js”）。

然而，React 仍然會拋出這個錯誤：

編譯失敗

./src/App.js Module not found: Can't resolve './src/components/header/header' in '/home/wiseman/Desktop/React_Components/github-portfolio/src'

npm 測試說同樣的事情。

Answer 1

我們通常使用import的方式是基於相對路徑。

. 和..類似於我們用來在terminal導航的方式，如cd ..離開目錄和mv ~/file . 將file移動到當前目錄。

my-app/
  node_modules/
  package.json
  src/
    containers/card.js
    components/header.js
    App.js
    index.js

在你的情況， App.js在src/目錄下，而header.js在src/components 。 要import您可以import Header from './components/header' 。 這大致翻譯為在我當前的目錄中，找到包含頭文件的組件文件夾。

現在，如果從header.js ，你需要從card import一些東西，你會這樣做。 import Card from '../containers/card' 。 這轉換為，移出我的當前目錄，查找具有卡文件的文件夾名稱容器。

至於import React, { Component } from 'react' ，這不以./或../或/開頭，因此節點將開始以特定順序在node_modules中查找模塊，直到找到react 。 更詳細的理解，可以在這里閱讀。

Answer 2

如果您使用 react-create-app 創建應用程序，請不要忘記設置環境變量：

NODE_PATH=./src

或者將.env文件添加到您的根文件夾；

Answer 3

刪除了 package-lock.json 文件然后運行

npm install

進一步閱讀

Answer 4

加入NODE_PATH如環境變量中.env已被棄用，通過加入取代"baseUrl": "./src" ，以compilerOptions在jsconfig.json或tsconfig.json 。

參考

Answer 5

就我而言，錯誤消息是

Module not found: Error: Can't resolve '/components/body

雖然一切都在正確的目錄中。

我發現將body.jsx重命名為body.js解決問題！

所以我加入這個代碼webpack.config.js解決jsx為js

 module.exports = {
  //...
  resolve: {
    extensions: ['.js', '.jsx']
  }
};

然后構建錯誤消失了！

Answer 6

我認為這是標題的雙重用途。 我只是自己嘗試了類似的東西，也引起了問題。 我將我的組件文件大寫以匹配其他文件並且它起作用了。

import Header from './src/components/header/header';

應該是

import Header from './src/components/header/Header';

Answer 7

我有一個類似的問題。

原因：

import HomeComponent from "components/HomeComponent";

解決方法：

import HomeComponent from "./components/HomeComponent";

注意： ./在組件之前。 您可以閱讀上面@Zac Kwan 關於如何使用import的帖子

Answer 8

當我創建一個新的 React 應用程序時，我遇到了同樣的問題，我嘗試了https://github.com/facebook/create-react-app/issues/2534 中的所有選項，但沒有幫助。 我不得不更改新應用程序的端口，然后它才起作用。 默認情況下，應用程序使用端口 3000。我在 package.json 中將端口更改為 8001，如下所示：

  "scripts": {
    "start": "PORT=8001 react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Answer 9

有一種更好的方法可以處理 React 應用程序中模塊的導入。 考慮這樣做：

將jsconfig.json文件添加到您的基本文件夾。 這是包含您的 package.json 的同一個文件夾。 接下來在其中定義您的基本 URL 導入：

//jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./src"
  }
}

現在，而不是調用../../你可以輕松地做到這一點：

import navBar from 'components/header/navBar'
import 'css/header.css'

請注意，'components/' 與 '../components/' 不同

這樣更整潔。

但是如果你想在同一目錄中導入文件，你也可以這樣做：

import logo from './logo.svg'

Answer 10

我通過放置文件擴展名解決了

import MyComponent from "src/components/MyComponent";

至

import MyComponent from "src/components/MyComponent.tsx";

Answer 11

您可以嘗試在應用程序文件夾中執行“npm install”。 這也可能解決問題。 它對我有用。

Answer 12

您需要在項目文件夾中，如果您在src或public ，則必須從這些文件夾中出來。 假設你的反應項目名稱是 'hello-react' 然后cd hello-react

Answer 13

您應該從 ' 更改導入標題。 /src/components/header/header' 到

進口頭從“.. / SRC /組件/報頭/報頭”

Answer 14

我遇到了同樣的問題，我解決了它。 查看您的index.js文件是否在src文件夾中，然后您要導入的任何文件，包含該文件的文件夾也必須在 src 文件夾中。

這意味着如果您的 components 文件夾在src文件夾之外，只需將其拖到編輯器中的src文件夾中，因為src文件夾之外的文件不會被導入。

然后你應該能夠使用./components/header/header導入（在這種情況下）

Answer 15

對我來說，我的輸入是正確的，但npm start可能有問題（至少在 Windows 和 Linux 上的 Hyper 終端上使用它）。 如果我將文件移動到不同的文件夾， npm start 不會接受這些更改。 我需要取消 npm start 進程，進行移動，保存然后運行npm start ，它現在會看到文件。

Answer 16

替換ReactDOM.render(<Header/>, document.getElementById('header')); 通過在 Header.js 中export default Header

Answer 17

我剛剛遇到了自動導入組件的問題，沒有類型或 webpack 配置問題。

修復它的原因是將導入從相對於應用程序根目錄更改為相對於文件：

import MyComponent from "src/components/MyComponent";

至

import MyComponent from "../components/MyComponent";

如果您通過最短路徑從 Visual Studio Code 自動導入中獲得此信息，則可以更改它，使其相對導入 . 通過去這里：

菜單文件→首選項→設置→用戶設置，

"typescript.preferences.importModuleSpecifier": "relative"

Answer 18

如果您使用的是 create-react-app，並且剛剛添加了 typescript，請檢查是否為您自動生成了tsconfig.json 。 CRA 文檔說它應該是，但目前似乎有一個錯誤，它沒有被生成。

如果缺少tsconfig.json ，有幾種方法可以自己創建。

• 從互聯網上或從另一個倉庫復制一個
• npx tsc --init
• 使用npx create-react-app my-ts-proj --template typescript在其他地方創建一個新項目，然后從那里復制 tsconfig

Answer 19

它只對我有用 (./) 這里不需要 src

從“./components/header/header”導入 Header

Answer 20

您可能在 .js 文件中導入 .tsx 文件。 如果您正在處理 javascript 源，請確保您有 extensions.js 或 .jsx 而不是 .tsx:)

Answer 21

檢查導入語句。它應該以分號結束。 如果您錯過任何一個，您將收到此錯誤。

還要檢查您的組件中是否添加了以下導入語句。

從'worker_threads'導入{threadId}；

如果是這樣，請刪除該行。 它對我有用。

Answer 22

就我而言，我重命名了一個組件文件，VS Code 為我添加了以下代碼行：

import React, { Component } from "./node_modules/react";

所以我通過刪除： ./node_modules/

import React, { Component } from "react";

干杯！

Answer 23

我想它可以幫助你-

仔細閱讀你的錯誤 - ./src/App.js Module not found: Can't resolve './src/components/header/header' in '/home/wiseman/Desktop/React_Components/github-portfolio/src'

只需在 App.js 中寫入 ./header/header 而不是 ./src/components/header/header

如果它不起作用嘗試更改頭文件名可能是頭