Next.js触发Element type is invalid错误，组件导入失败如何解决？

问题排查方向 #

1. 导入导出语法不匹配 #

你写的LinkBoxModal是用export default默认导出的，主页面导入时不能加花括号，错误写法：

// 错误，默认导出不能用命名导入语法
import { LinkBoxModal } from './你的组件路径'

正确写法：

// 正确，对应默认导出的导入写法
import LinkBoxModal from './你的组件路径'

2. 导入路径错误 #

核对导入时写的相对路径和LinkBoxModal文件的实际存储位置是否一致，比如组件放在components/LinkBoxModal.jsx，主页面放在pages/deals.js，那导入路径应该写../components/LinkBoxModal，路径拼写错误、层级不对都会导致导入的组件为undefined。

3. LinkBoxModal组件内部依赖未导入 #

你的组件用到了Chakra UI的Popover、PopoverTrigger、Button等组件，要检查LinkBoxModal文件顶部是否正确导入了所有用到的Chakra组件，示例：

import { Popover, PopoverTrigger, PopoverContent, PopoverArrow, PopoverCloseButton, PopoverHeader, PopoverBody, Button } from '@chakra-ui/react'

只要有一个用到的组件没导入，就会触发该报错。

4. 文件名大小写不匹配 #

Windows、macOS系统默认对文件名大小写不敏感，本地开发没问题，但如果文件名大小写和导入时的拼写不一致，比如文件名为linkBoxModal.js、导入时写LinkBoxModal，部署到Linux环境就会报错，建议统一文件名和导入拼写的大小写。

验证方法 #

你可以在主页面导入LinkBoxModal之后加一行console.log(LinkBoxModal)，如果打印结果为undefined，就可以确定是上述导入相关的问题，挨个核对即可。

内容的提问来源于stack exchange，提问作者Sean