Use antd build resource error in Next@12.0.2?

[luojinghui]

Init new nextjs project, import antd , then Run yarn start is right，but when i run yarn build, has error:

info  - Creating an optimized production build
info  - Compiled successfully

> Build error occurred
/Users/luojinghui/work/xylink/pratice/test-next-antd/node_modules/antd/lib/style/index.less:1
@import './themes/index';
^

SyntaxError: Invalid or unexpected token
    at wrapSafe (internal/modules/cjs/loader.js:988:16)
    at Module._compile (internal/modules/cjs/loader.js:1036:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12)
    at Module.require (internal/modules/cjs/loader.js:961:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at Object.<anonymous> (/Users/luojinghui/work/xylink/pratice/test-next-antd/node_modules/antd/lib/button/style/index.js:3:1)
    at Module._compile (internal/modules/cjs/loader.js:1072:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10) {
  type: 'SyntaxError'
}

This is my next.config.js:

// next.config.js
const withAntdLess = require('next-plugin-antd-less');

module.exports = withAntdLess({
  // optional
  modifyVars: {},
  // optional
  lessVarsFilePath: './src/styles/variables.less',
  // optional
  lessVarsFilePathAppendToEndOfContent: false,
  // optional https://github.com/webpack-contrib/css-loader#object
  cssLoaderOptions: {},

  webpack(config) {
    return config;
  },

  // ONLY for Next.js 10, if you use Next.js 11, delete this block
  future: {
    webpack5: true,
  },
});

[Vsion]

the same wrong with my project, have you resolve this issue?

[jeffdrumgod]

Hi guys... Please, provide some details to help you, for example:

• Version of node
• Version of Nextjs
• version of next-plugin-antd-less

Perhaps to help, here I using Next12 and my configs are (I have configured few minutes ago):

my next.config.js

/* eslint-disable */
const withPlugins = require("next-compose-plugins");
const withAntdLess = require("next-plugin-antd-less");

const pluginAntdLess = withAntdLess({
  modifyVars: {
    hack: `true;@import "${require.resolve(
      "./src/style/vendor-theme/less/theme.less"
    )}";`,
  },
  lessVarsFilePath: "./src/style/vendor-theme/less/variables.less",
});

module.exports = withPlugins([[pluginAntdLess]], {
  images: {
    formats: ["image/avif", "image/webp"],
  },
});

and in my _app.tsx

//...
require('../style/vendor-theme/less/theme.less');
// ...

and in ../style/vendor-theme/less/theme.less we have:

//...
@import "~antd/dist/antd.less";
//...

[Vsion]

import React from "react";
import "../styles/index.css";
import { ConfigProvider, Spin } from "antd";
import Layout from "@/components/Layout";
import { useRouter } from "next/router";
import zhCN from "antd/lib/locale/zh_CN";

export default function App({ Component, pageProps }) {
  return (
    <ConfigProvider locale={zhCN}>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </ConfigProvider>
  );
}

config

const withPlugins = require("next-compose-plugins");
const withAntdLess = require("next-plugin-antd-less");
const modifyVars = require("./public/utils/theme");
const path = require("path");
const { configs } = require("./configs");

module.exports = withPlugins([ withAntdLess ], {
  lessVarsFilePath: './styles/core/index.less',
  modifyVars,
  typescript: {
    ignoreBuildErrors: true,
  },
  async rewrites() {
    return [
      {
        source: "/api/:path*",
        destination: `${configs.faasApiUrl}/:path*`, // Proxy to Backend
      },
    ];
  },
  webpack(config, options) {
    config.resolve.alias = Object.assign(config.resolve.alias, {
      "@": path.resolve("./"),
    });
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"],
    });
    return config;
  },
});

[AndyJinSS]

I change the version of less to 3.x.x，It works.