NextJS 图像错误 - React.jsx：类型无效

Question

我最近更新了我的应用程序，通过将“type:module”添加到我的 package.json 来强制执行 ES6。此外，我更改了以下内容以适应此更改。

next.config.js -> next.config.cjs

tailwind.config.js -> tailwind.config.cjs

postcss.config.js -> postcss.config.cjs

问题是，自从这样做以来，我的所有图像组件都出现以下错误：

警告：React.jsx：类型无效——需要一个字符串（对于内置的 组件）或类/函数（对于复合组件）但得到： 不明确的。您可能忘记从文件中导出组件 它是在中定义的，或者您可能混淆了默认导入和命名导入。

我用来渲染的图像组件示例

  <Image
      src="/next.svg"
      fill
      style={{
        objectFit: "contain",
      }}
      alt="Your Company"
   />

它是像

import Image from "next/image";

一样导入的

如果我从我的应用程序中删除所有图像组件，它将正常加载。需要注意的是，在实施 ES6 之前我从未遇到过问题。

Answer 1

您遇到的错误或警告通常与导入/导出中的错误有关，例如使用不正确的路径或使用变量作为 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;