React報錯之Element type is invalid

chuck發表於2022-12-18

總覽

產生"Element type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got"錯誤有多個原因:

  1. 在匯入元件時,將預設匯入和命名匯入混淆。
  2. 忘記從檔案中匯出元件。
  3. 不正確地定義了一個React元件,例如,作為一個變數而不是一個函式或類。

type-is-invalid-expected-string-but-got.png

為了解決該錯誤,確保使用大括號來匯入命名匯出而不是預設匯出,並且只使用函式或類作為元件。

這裡有個示例來展示錯誤是如何發生的。

// ?️ must be function or class (NOT variable)
const Button = <button>Click</button>;

export default function App() {
  // ⛔️ Warning: React.jsx: type is invalid -- expected a string
  // (for built-in components) or a class/function
  // (for composite components) but got:
  return (
    <div>
      <Button />
      <h1>hello world</h1>
    </div>
  );
}

上述程式碼問題在於,我們宣告瞭Button變數,該變數返回了JSX程式碼。

函式元件

為了解決該錯誤,我們必須使用函式元件來代替。

// ?️ is now function
const Button = () => {
  return <button>Click</button>;
};

export default function App() {
  return (
    <div>
      <Button />
      <h1>hello world</h1>
    </div>
  );
}

現在,Button是一個函式,並返回JSX程式碼。可以作為一個React元件使用。

混淆匯入匯出

另一個常見的錯誤原因是混淆了預設和命名的匯入和匯出。

當元件使用預設匯出來匯出時,你必須確保匯入的時候沒有使用大括號。

// Header.js

// ?️ default export
export default function Header() {
  return <h2>Hello world</h2>;
}

現在,它必須不帶大括號匯入。

// ?️ default import
import Header from './Header';

export default function App() {
  return (
    <div>
      <Header />
    </div>
  );
}

另一方面,如果你的元件使用命名匯出來匯出的話,它必須使用大括號匯入。

// Header.js

// ?️ named export
export function Header() {
  return <h2>Hello world</h2>;
}

現在,當元件被匯入時,它必須包裹在大括號內。

// ?️ named import
import {Header} from './Header';

export default function App() {
  return (
    <div>
      <Header />
    </div>
  );
}

確保你沒有將一個元件作為預設匯出,並試圖將其作為命名匯入(用大括號包裹),或者反過來。因為這是導致錯誤的一個常見原因。

如果錯誤尚未解決,確保重啟你的開發服務以及IDE。

檢查路徑

你還應該確保指向模組的路徑拼寫正確,大小寫正確以及指定匯出元件的檔案。

確保路徑正確的最好方法是刪除它,開始輸入路徑,讓你的IDE用自動補全來幫助你。

如果你開始輸入路徑後沒有得到自動補全,很可能是你的路徑不正確。

使用ESM

確保你沒有混淆ES ModulesCommonJS語法。

你應該在你的React.js應用程式中只使用import/export語法,而不是module.exportsrequire()語法。

react-router-dom匯入

當我們從react-router而不是react-router-dom匯入東西時,有時也會出現這個錯誤。

// ⛔️ BAD
// import {Link} from 'react-router';

// ✅ GOOD
import {Link} from 'react-router-dom';

如果你使用react router,請確保從react-router-dom匯入,而不是從react-router中。

當我們試圖使用不是函式或類的東西作為一個元件時,會產生"Element type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got:"錯誤資訊。

錯誤資訊

你應該看一下got:後面的錯誤資訊,因為它可能表明是什麼原因導致的錯誤。

當我們使用一個元件時,我們必須確保它是一個函式或一個類。如果你使用任何其他的值作為一個元件,就會引起錯誤。

相關文章