我最近更新了我的应用程序,通过在我的package.json中添加“type:module”来强制执行ES6。此外,我还更改了以下内容以适应此更改。
next.config.js -> next.config.cjs
tailwind.js.js-> tailwind.config.cjs
postcss.config.js -> postcss.config.cjs
问题是,因为这样做,我得到以下错误对我的所有图像组件:
警告:React.jsx:类型无效--应为字符串(对于内置组件)或类/函数(对于复合组件),但得到:undefined。您可能忘记从定义组件的文件中导出组件,或者您可能混淆了默认导入和命名导入。
我用来呈现的Image组件的示例
<Image
src="/next.svg"
fill
style={{
objectFit: "contain",
}}
alt="Your Company"
/>
字符串
它像import Image from "next/image";
一样导入
如果我从我的应用中删除所有的Image组件,它将正常加载。重要的是要注意,在强制执行ES6之前,我从未遇到过问题。
2条答案
按热度按时间3okqufwl1#
您遇到的错误或警告通常与导入/导出中的错误有关,例如使用不正确的路径或将变量用作JSX组件。请确保使用正确的路径并遵循正确的导入/导出约定以避免此问题。
1.混淆默认和命名导入和导出:-
当我们导出默认值时,意味着只有一个组件导出,然后使用
import simple_component
名称。如果导出component_named,则import {Component_named}
示例:-
Header.js
字符串
App.js
型
2.用JSX代码声明变量,而不是函数
下面的代码将抛出错误。
型
但是,Message变量不能用作组件,除非它不是函数。React组件应该是返回HTML的函数或类。要解决此错误,请将Message变量更改为返回JSX代码的函数,如下所示。
型
f4t66c6m2#
原来这是NextJS Image组件的问题。目前,似乎Image组件不支持ES模块。因此,我得到了上述错误。
而不是像
import Image from "next/image";
那样导入它,而是将其导入为字符串
您可以在https://github.com/vercel/next.js/issues/54777上找到有关此问题的更多详细信息