Next.js迁移至CSS Modules出现Element type is invalid错误如何解决？

问题根源 #

该报错核心是JSX语法中使用了值为undefined的变量作为组件渲染，结合你迁移CSS Modules后才触发问题的特征，问题和CSS模块解析规则、旧配置冲突或批量修改时的语法失误直接相关，你提供的_document.js代码不存在语法问题。

排查与解决步骤 #

• 清理next.config.js配置：删除所有和@zeit/next-css、@zeit/next-sass相关的引用、withCSS/withSASS包装逻辑。Next.js 10及以上版本原生支持CSS、SASS和CSS Modules，已弃用的@zeit系列包和原生能力冲突会导致模块解析异常，出现组件导入为undefined的问题。如果你的Next.js版本低于10，先升级到10及以上的稳定版本。
• 检查全局CSS导入位置：Pages Router规则下，非.module.css/.module.scss后缀的全局CSS文件，只能在_app.js中导入。如果在其他普通组件、页面文件中导入了全局CSS，会触发模块解析失败，连带导致组件导出为undefined。
• 校验CSS Modules的使用逻辑：
  • 确认所有.module.css/.module.scss的导入格式为import styles from './xxx.module.css'，不要混用默认导入和命名导入
  • 逐一排查是否存在误将样式对象作为组件渲染的失误，比如手误写成<styles.container />而非<div className={styles.container} />，该类失误会直接触发本次报错
• 检查导入命名冲突：如果存在组件文件和CSS Modules文件重名的情况，确认批量修改导入路径时没有误导入CSS文件替代组件，导致样式对象被当做组件渲染。
• 清理缓存重启服务：执行rm -rf .next node_modules/.cache删除构建缓存，再重新启动开发服务，排除旧缓存导致的异常。

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