javascript - TypeError：无法设置未定义的属性（设置“样式”）+在 next.config.js NextJS 中使用 withLess/withSass/withCSS

Question

我正在尝试使用自定义 Ant Design 配置 NextJS 12 项目，根据我发现的一些示例，我必须next.config.js使用库@zeit/next-sass/ @zeit/next-less/配置我的文件，@zeit/next-css但是当我这样做时，我在控制台中收到以下错误：

$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
TypeError: Cannot set properties of undefined (setting 'styles')
    at module.exports (/Users/overmartinez/Projects/OMA/omawarehouse/node_modules/@zeit/next-css/css-loader-config.js:25:56)
    at Object.webpack (/Users/overmartinez/Projects/OMA/omawarehouse/node_modules/@zeit/next-css/index.js:15:36)
    at Object.getBaseWebpackConfig [as default] (/Users/overmartinez/Projects/OMA/omawarehouse/node_modules/next/dist/build/webpack-config.js:1364:32)
    at async Promise.all (index 0)
    at async Span.traceAsyncFn (/Users/overmartinez/Projects/OMA/omawarehouse/node_modules/next/dist/trace/trace.js:74:20)
    at async Span.traceAsyncFn (/Users/overmartinez/Projects/OMA/omawarehouse/node_modules/next/dist/trace/trace.js:74:20)
    at async HotReloader.start (/Users/overmartinez/Projects/OMA/omawarehouse/node_modules/next/dist/server/dev/hot-reloader.js:321:25)
    at async DevServer.prepare (/Users/overmartinez/Projects/OMA/omawarehouse/node_modules/next/dist/server/dev/next-dev-server.js:289:9)
    at async /Users/overmartinez/Projects/OMA/omawarehouse/node_modules/next/dist/cli/next-dev.js:126:9
error Command failed with exit code 1.

我已经尝试了很多方法，但它们都不适合我，只是通过添加库的使用而没有任何其他配置我得到了错误，

这是推荐的配置next.config.js

const withLess = require('@zeit/next-less')
const lessToJS = require('less-vars-to-js')
const withPlugins = require('next-compose-plugins')

const fs = require('fs')
const path = require('path')

// Where your antd-custom.less file lives
const themeVariables = lessToJS(
    fs.readFileSync(
        path.resolve(__dirname, './assets/themes/default.less'),
        'utf8',
    ),
)

const plugins = [
    [
        withLess({
            lessLoaderOptions: {
                javascriptEnabled: true,
                modifyVars: themeVariables, // make your antd custom effective
            },
            webpack: (config, { isServer }) => {
                if (isServer) {
                    const antStyles = /antd\/.*?\/style.*?/
                    const origExternals = [...config.externals]
                    config.externals = [
                        (context, request, callback) => {
                            if (request.match(antStyles)) return callback()
                            if (typeof origExternals[0] === 'function') {
                                origExternals[0](context, request, callback)
                            } else {
                                callback()
                            }
                        },
                        ...(typeof origExternals[0] === 'function'
                            ? []
                            : origExternals),
                    ]

                    config.module.rules.unshift({
                        test: antStyles,
                        use: 'null-loader',
                    })
                }

                const builtInLoader = config.module.rules.find(rule => {
                    if (rule.oneOf) {
                        return (
                            rule.oneOf.find(deepRule => {
                                return (
                                    deepRule.test &&
                                    deepRule.test.toString().includes('/a^/')
                                )
                            }) !== undefined
                        )
                    }
                    return false
                })

                if (typeof builtInLoader !== 'undefined') {
                    config.module.rules.push({
                        oneOf: [
                            ...builtInLoader.oneOf.filter(rule => {
                                return (
                                    (rule.test &&
                                        rule.test
                                            .toString()
                                            .includes('/a^/')) !== true
                                )
                            }),
                        ],
                    })
                }

                config.resolve.alias['@'] = path.resolve(__dirname)
                return config
            },
        }),
    ],
]

const nextConfig = {
    reactStrictMode: true,
}

module.exports = withPlugins(plugins, nextConfig)

但即使使用这个最小的配置它也会失败

const withLess = require('@zeit/next-less')
const lessToJS = require('less-vars-to-js')
const withPlugins = require('next-compose-plugins')

const plugins = [[withLess()]]

const nextConfig = {
    reactStrictMode: true,
}

module.exports = withPlugins(plugins, nextConfig)

我的脚手架

仅在没有插件的情况下有效

const withPlugins = require('next-compose-plugins')

const nextConfig = {
    reactStrictMode: true,
}

module.exports = withPlugins([], nextConfig)

module.exports = {
    reactStrictMode: true,
}

我究竟做错了什么？如果有人可以帮助我，我将不胜感激。

标签： javascriptnode.jsreactjsnext.jsantd