您遇到的错误或警告通常与导入/导出中的错误有关，例如使用不正确的路径或将变量用作JSX组件。请确保使用正确的路径并遵循正确的导入/导出约定以避免此问题。

• （检查您的图像组件此组件导入/导出是否正确？阅读所有这些内容并简单使用图像组件）*
  1.混淆默认和命名导入和导出：-

当我们导出默认值时，意味着只有一个组件导出，然后使用import simple_component名称。如果导出component_named，则import {Component_named}

示例：-
Header.js

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

字符串

App.js

import Header from './Header';
    export default function App() {
      return (
        <div>
          <Header />
        </div>
      );
    }

型

2.用JSX代码声明变量，而不是函数

下面的代码将抛出错误。

function App() {
    // This line throws error: 
    // Element type is invalid: expected a string (for built-in components) 
    // or a class/function (for composite components) but got: object.
    const Message = <label>Hello world!</label>;
    return (
        <div>
            <Message/>      
        </div>
    );
}

export default App;

型
但是，Message变量不能用作组件，除非它不是函数。React组件应该是返回HTML的函数或类。要解决此错误，请将Message变量更改为返回JSX代码的函数，如下所示。

function App() {
    const Message = () => <label>Hello world!</label>;
    return (
        <div>
            <Message/>      
        </div>
    );
}

export default App;

型

原来这是NextJS Image组件的问题。目前，似乎Image组件不支持ES模块。因此，我得到了上述错误。
而不是像import Image from "next/image";那样导入它，而是将其导入为

import ImageModule from 'next/image';
const Image = ImageModule.default;

字符串
您可以在https://github.com/vercel/next.js/issues/54777上找到有关此问题的更多详细信息