使用next-compose-plugins时next.config.js报错，求排查解决

问题描述 #

在Next.js项目中，next.config.js 使用 next-compose-plugins 时抛出以下错误，重装node包后问题仍未解决：

• "The root value has an unexpected property, webpackDevMiddleware"
• "The root value has an unexpected property, configOrigin"
• "The root value has an unexpected property, target"
• "The root value has an unexpected property, webpack5"
• "TypeError: Cannot set property 'styles' of undefined"

当前配置代码：

/** @type {import('next').NextConfig} */ const nextConfig = {   
reactStrictMode: true,   swcMinify: true, };
 
const withCSS = require("@zeit/next-css");    
const withFonts =require("next-fonts");    
const withImages = require("next-images"); 
const withPlugins = require("next-compose-plugins");

module.exports = withPlugins([withCSS, withFonts, withImages], nextConfig);

解决方法 #

这些问题核心是插件版本与当前Next.js版本不兼容，具体解决步骤如下：

1. 移除过时插件
   删除 @zeit/next-css、next-fonts、next-images：

   • CSS支持：Next.js 12+ 已内置全局CSS和CSS模块支持，无需额外插件
   • 字体：改用Next.js官方的 next/font 模块替代 next-fonts
   • 图片：使用Next.js内置的 next/image 组件替代 next-images

2. 简化配置文件
   无需 next-compose-plugins 时，直接导出基础配置即可：

   /** @type {import('next').NextConfig} */
   const nextConfig = {
     reactStrictMode: true,
     swcMinify: true,
     // 如需配置图片，可添加以下示例内容
     images: {
       domains: ['your-image-domain.com'], // 允许加载的图片域名
     },
   };
   
   module.exports = nextConfig;
   

3. 若仍需使用 next-compose-plugins
   先安装最新版本：

   npm install next-compose-plugins@latest
   

   同时确保所有引入的插件都适配当前Next.js版本，替换为仍在维护的插件。

错误原因 #

• @zeit/next-css 是旧版Next.js插件，现已被弃用，引入后会和内置CSS处理逻辑冲突，导致styles未定义的错误。
• next-fonts、next-images 这类第三方插件的内部配置属性（如webpackDevMiddleware、target等）不符合新版本Next.js的配置规范，因此抛出属性不匹配的报错。

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