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

Question

我想在 Demand.But 上配置 antd Import 我收到错误消息：变量 @import 未定义 The error screenshots

为什么少将@import 解析为变量？

这是我的 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",
  }

这是我的 webpack 配置：

{
    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'
                },
              },
            },
          },
        ],
      },
    ],
  }

这是我的。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),
  };
};

我也试过用“ts-loader”使用“ts-import-plugin”，最后我得到了同样的错误。

有人可以给点提示吗？

谢谢！

Answer 1

找到原因了。这是一个 antd 错误，https://github.com/ant-design/ant-design/pull/32063 当我更改antd版本时，问题解决了。

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

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

webpack

babeljs

less

antd

less-loader