React報錯之Element type is invalid

chuck發表於2022-12-18
React

總覽

產生"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 Modules和CommonJS語法。

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

從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:後面的錯誤資訊，因為它可能表明是什麼原因導致的錯誤。

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

相關文章