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

Question

我正在尝试使用自定义 Ant Design 配置 NextJS 12 项目，根据我发现的一些示例，我必须使用库@zeit/next-sass / @zeit/next-less / 配置我的next.config.js文件@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,
}

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

Answer 1

使用新版本的 Next.js (>=12)，您可以将*.scss/*.less文件的导入直接放在_app.js文件中，所以！ 您无需在next.config.js文件中执行任何特殊操作即可处理此特定情况。

就我而言，我能够通过以下方式解决它：

我的next.config.js

const withLess = require('next-with-less')
const withPlugins = require('next-compose-plugins')
const nextTranslate = require('next-translate')

const plugins = [[withLess, {}], [nextTranslate]]

module.exports = withPlugins(plugins, {
    reactStrictMode: true,
    swcMinify: true, // <- To enable SWC compiler
    images: {
        domains: ['i2.wp.com'], // <- To allow use images from this domain
    },
})

我的_app.js

import 'bootstrap/dist/css/bootstrap.min.css'
import '@fortawesome/fontawesome-svg-core/styles.css'

import App from 'next/app'
import { wrapper } from '~/redux/store'
import { AppContextProvider } from '~/context/index'
import(`~/assets/less/themes/${process.env.NEXT_PUBLIC_SKIN}-antd.less`) // <- antd theme

class MyApp extends App {
    render() {
        const { Component, pageProps } = this.props

        return (
            <AppContextProvider>
                <Component {...pageProps} />
            </AppContextProvider>
        )
    }
}

export default wrapper.withRedux(MyApp)

我的脚手架

默认 Ant Design 少变量

antd 少变量

我的tcp-antd.less主题文件

@import '~antd/lib/style/themes/default.less';
@import '~antd/dist/antd.less';
@import './tcp.less'; // <- Replace the antd's default styles
@import './custom.less';

Answer 2

我有同样的错误，但就我而言，我尝试从 NextJs v9 迁移到 v12。 你是如何解决这个错误的？