Introducing a new antd component into the component will report an error

[799531161]

this is webpack.config :

import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin";
import HtmlWebpackPlugin from "html-webpack-plugin";
import theme from "./theme";
import { WebpackConfigType } from "./webpack";
const esbuild = require("esbuild");
const fs = require("fs");
const appDirectory = fs.realpathSync(process.cwd());
const path = require("path");
const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);
const paths = {
  resolveApp,
  appPublic: resolveApp("public"),
  appHtml: resolveApp("index.html"),
  appSrc: resolveApp("src"),
  appDist: resolveApp("dist"),
  appTsConfig: resolveApp("tsconfig.json"),
};

const devConfig: WebpackConfigType = {
  entry: {
    index: "./src/index.tsx",
  },
  output: {
    filename: "[name].bundle.js",
    path: paths.appDist,
    clean: true,
  },
  resolve: {
    alias: {
      "@": paths.appSrc,
      components: path.join(__dirname, "../src/components"),
    },
    extensions: [".tsx", ".ts", ".js", ".jsx"],
    modules: ["node_modules", paths.appSrc],
    symlinks: false,
  },
  plugins: [
    new ReactRefreshWebpackPlugin(),

    new HtmlWebpackPlugin({
      template: path.join(__dirname, "../src/pages/index.html"),
      filename: path.join(__dirname, "../dist/index.html"),
      inject: "body",
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        include: paths.appSrc,
        type: "asset/resource",
      },
      {
        test: /.(woff|woff2|eot|ttf|otf)$/i,
        include: paths.appSrc,
        type: "asset/resource",
      },
      //src css less 文件解析
      {
        test: /\.(le|c)ss$/,
        include: paths.appSrc,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: {
                localIdentName: "[local]",
              },
              // importLoaders: 2,
              // sourceMap: false,
              // importLoaders: 1,
              // modules: true,
            },
          },
          {
            loader: "postcss-loader",
          },
          {
            loader: "less-loader",
            options: {
              lessOptions: {
                javascriptEnabled: true,
                modifyVars: {},
              },
            },
          },
        ],
      },

      {
        //单独解析nodemodules css .less
        test: /\.(le|c)ss$/,
        include: /node_modules/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
              // modules: {
              //   localIdentName: "[name]",
              // },
            },
          },
          "postcss-loader",
          {
            loader: "less-loader",
            options: {
              lessOptions: {
                javascriptEnabled: true,
                modifyVars: {
                  ...theme,
                },
              },
            },
          },
        ],
      },
      {
        test: /\.(js|ts|jsx|tsx)$/,
        include: paths.appSrc,
        use: [
          {
            loader: "esbuild-loader",
            options: {
              loader: "tsx",
              target: "esnext",
              implementation: esbuild,
            },
          },
        ],
      },
    ],
  },
  cache: {
    type: "filesystem",
    buildDependencies: {
      config: [__filename],
    },
    name: process.env.NODE_ENV,
    version: "1.0.0",
  },

  target: "web",
  mode: "development",
  devtool: "eval-cheap-module-source-map",
  devServer: {
    open: true,
    hot: true, // hot,
    compress: true, // gzip
  },
  optimization: {
    splitChunks: {
      chunks: "all",
    },
  },

  stats: {
    assets: false,
    moduleAssets: false,
    runtime: false,
    runtimeModules: false,
    modules: false,
    entrypoints: false,
  },
};
export default devConfig;

[lmcgit1]

same error , Because of use React.lazy....

[pmmmwh]

Hi, can you create an reproduction so I can investigate?

[pmmmwh]

I believe this is a bug on antd/webpack's side - I am able to reproduce this, will try to raise an issue upstream.