NextJS12配置@zeit/next-less报Cannot set properties of undefined错误

问题根本原因 #

你使用的@zeit/next-less/@zeit/next-css属于已经废弃的官方插件，仅支持 Next.js 9.1 及更早版本。从 Next.js 9.2 开始框架已经内置 CSS、Sass 原生支持，12 版本的 webpack 配置结构和旧版完全不兼容，因此哪怕仅引入插件不做额外配置也会触发你遇到的属性设置报错。

解决方案 #

步骤1：卸载废弃依赖 #

先移除所有旧的不兼容包：

npm uninstall @zeit/next-less @zeit/next-css @zeit/next-sass
# 用yarn的话执行
yarn remove @zeit/next-less @zeit/next-css @zeit/next-sass

步骤2：安装所需依赖 #

安装less和less-loader来支持Less编译：

npm install less less-loader next-plugin-antd-less --save-dev
# 或者yarn
yarn add less less-loader next-plugin-antd-less --dev

其中next-plugin-antd-less是专门适配 Next.js 10+ 版本的 Ant Design Less 主题处理插件，不需要依赖旧版@zeit系列插件。

步骤3：修改next.config.js配置 #

以下是适配 Next.js 12 + Ant Design 自定义主题的可用配置：

const withPlugins = require('next-compose-plugins')
const withAntdLess = require('next-plugin-antd-less')
const fs = require('fs')
const path = require('path')
const lessToJS = require('less-vars-to-js')

// 读取自定义主题变量
const themeVariables = lessToJS(
  fs.readFileSync(path.resolve(__dirname, './assets/themes/default.less'), 'utf8')
)

const plugins = [
  [
    withAntdLess({
      modifyVars: themeVariables,
      lessLoaderOptions: {
        javascriptEnabled: true,
      },
      webpack(config) {
        config.resolve.alias['@'] = path.resolve(__dirname)
        return config
      },
    })
  ]
]

const nextConfig = {
  reactStrictMode: true,
}

module.exports = withPlugins(plugins, nextConfig)

修改完成后重新启动项目即可正常运行。

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