next@12.0.1, next-with-less@2.0.2: Module parse failed: Unexpected character '@' (1:0)

[wang chenyu]

I got my _app.ts having

import 'antd/dist/antd.less';

at the top of the file.

My next.config (transpiled to commonjs):

/* eslint-disable import/no-extraneous-dependencies */
// @ts-ignore
import withLess from 'next-with-less';
import type { NextConfig } from 'next/dist/server/config-shared';

import tw from './tailwind.config';

const nextConfig: NextConfig = {
  experimental: {},
  future: {},
};

export default withLess({
  lessLoaderOptions: {
    lessOptions: {
      modifyVars: {
        'primary-color': tw.theme.extend?.colors?.primary,
        'layout-header-background': tw.theme.extend?.colors?.primary,
      },
    },
  },
  ...nextConfig,
});

Seems webpack isn't using less to parse *.less file. What might break things?

[wang chenyu]

Seems nextjs no longer takes exports.default. (which is what it is expected to transpile from esmodule). Adding modules.export = options resolves the problem