Antd Import on Demand get error: Variable @import is undefined by less-loader

Question

I want to config antd Import on Demand.But I get the error: Variable @import is undefined The error screenshots

Why less parse @import as a variable?

This is my package.json:

"dependencies": {
    "@babel/preset-typescript": "^7.16.0",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
    "antd": "^4.17.0-alpha.0",
    "babel-loader": "^8.2.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.1",
    .......
  },
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/plugin-proposal-class-properties": "^7.14.5",
    "@babel/plugin-proposal-decorators": "^7.14.5",
    "@babel/plugin-transform-runtime": "^7.15.0",
    "@babel/preset-env": "^7.15.0",
    "@babel/preset-react": "^7.14.5",
    "babel-plugin-import": "^1.13.3",
    "babel-plugin-lodash": "^3.3.4",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "css-loader": "^6.2.0",
    "less": "^4.1.1",
    "less-loader": "^10.0.1",
    "style-loader": "^3.2.1",
    "thread-loader": "^3.0.4",
    "ts-loader": "^9.2.5",
    "typescript": "4.3.2",
    "url-loader": "^4.1.1",
    "webpack": "^5.51.1",
  }

This is my webpack config:

{
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        use: [
          'thread-loader',
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
            },
          },
        ],
        exclude: /node_modules/,
      },
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.less$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'less-loader',
            options: {
              lessOptions: {
                javascriptEnabled: true,
                paths: [
                  path.resolve(__dirname, 'node_modules'),
                  path.resolve(__dirname, 'src', 'styles'),
                ],
                modifyVars: {
                  'root-entry-name': 'default'
                },
              },
            },
          },
        ],
      },
    ],
  }

And this is my .babelrc.js

module.exports = (api) => {
  return {
    presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
    plugins: [
      'lodash',
      [
        'import',
        {
          libraryName: 'antd',
          libraryDirectory: 'es',
          "style": true
        }
      ],
      ['@babel/plugin-proposal-decorators', { legacy: true }],
      '@babel/plugin-proposal-class-properties',
      '@babel/plugin-transform-runtime',
      !api.env('production') && 'react-refresh/babel',
    ].filter(Boolean),
  };
};

I also had try "ts-import-plugin" with "ts-loader", finally i get same error.

Can anyone give any tips?

Thanks!

Answer 1

I found the reason. this is a antd bug, https://github.com/ant-design/ant-design/pull/32063 when i change antd version,the problem solved.