總覽

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

• 在導入組件時，將默認導入和命名導入混淆。
• 忘記從文件中導出組件。
• 不正確地定義了一個React組件，例如，作為一個變量而不是一個函數或類。

為了解決該錯誤，確保使用大括號來導入命名導出而不是默認導出，并且只使用函數或類作為組件。

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

// ??? 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:后面的錯誤信息，因為它可能表明是什么原因導致的錯誤。

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