NextJS/antd/Less: Module parse failed: Unexpected character '@' (1:0)

[coolbeatz71]

Hey good people, I installed the version "^0.3.0"

But I am getting this error when trying to build:

next.config.js

const withAntdLess = require("next-plugin-antd-less");

const withPWA = require("next-pwa");
const runtimeCaching = require("next-pwa/cache");
const withPlugins = require("next-compose-plugins");
const optimizedImages = require("next-optimized-images");

const isProduction = process.env.NODE_ENV === "production";

module.exports = withPWA({
  pwa: {
    disable: !isProduction,
    dest: "public",
    register: true,
    runtimeCaching,
  },
});

module.exports = withAntdLess({
  lessVarsFilePath: "./theme/less/theme.less",
  webpack(config) {
    config.module.rules.push({
      test: /\.(png|jpg|jpeg|gif|svg|eot|ttf|woff|woff2)$/,
      use: {
        loader: "url-loader",
      },
    });

    return config;
  },
});

module.exports = withPlugins([optimizedImages]);

.babelrc

{
  "env": {
    "development": {
      "presets": ["next/babel"]
    },
    "production": {
      "presets": ["next/babel"]
    },
    "test": {
      "presets": [
        [
          "next/babel",
          {
            "preset-env": {
              "modules": "commonjs"
            }
          }
        ]
      ],
      "plugins": ["istanbul"]
    }
  },
  "plugins": [
    "react-optimized-image/plugin",
    [
      "import",
      {
        "libraryName": "antd",
        "style": true
      }
    ]
  ]
}

[SolidZORO]

https://github.com/SolidZORO/next-plugin-antd-less/issues/22

[coolbeatz71]

Do you have any idea on why I'm getting this error?

[SolidZORO]

try yarn install --force？

look missing less or less-loader?

[coolbeatz71]

I solved the problem. I think it's better to show the solution for anyone facing this type of issues when using next-compose-plugins

You should export all plugins alongside their config all inside the withPlugins() function as follow:

module.exports = withPlugins([
  [optimizedImages],
  [
    withPWA,
    {
      pwa: {
        disable: !isProduction,
        dest: "public",
        register: true,
        runtimeCaching,
      },
    },
  ],
  [
    withAntdLess,
    {
      lessVarsFilePath: "./theme/less/theme.less",
    },
  ],
]);