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.

• Diptangsu Goswami: What version did you change it to?