After compiling with Vite, drag-and-drop doesn't work, but it works with rspack.

[jongwong]

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
import monacoEditorPlugin from 'vite-plugin-monaco-editor';
// 可选：自定义 Babel 插件
const babel = require('@rollup/plugin-babel');
import Buffer from 'buffer';
import * as fs from 'fs';

function rawTxtPlugin() {
	return {
		name: 'vite-plugin-raw-txt',
		transform(src, id) {
			if (id.endsWith('.txt')) {
				const filePath = path.resolve(id);
				const content = fs.readFileSync(filePath, 'utf-8');
				return {
					code: `export default ${JSON.stringify(content)}`,
					map: null, // 如果需要源映射，可以生成源映射
				};
			}
		},
	};
}

export default defineConfig({
	mode: 'development',
	optimizeDeps: {
		include: ['react-arborist'], // 替换成依赖的包名
	},

	server: {
		port: 3000,
		host: '0.0.0.0',
		proxy: {
			// Proxy all requests starting with `/api` to `http://localhost:5000`
			'/preview': {
				target: 'http://localhost:3001',
				changeOrigin: true, // Change the origin to match the target server
				rewrite: path => path,
			},
			'/api': {
				target: 'http://localhost:3001',
				changeOrigin: true, // Change the origin to match the target server
				rewrite: path => path.replace(/^\/api/, ''),
			},
		},
	},

	plugins: [
		react(), // 代替 ReactRefreshWebpackPlugin
		monacoEditorPlugin({
			// 代替 MonacoWebpackPlugin
			languageWorkers: ['editorWorkerService', 'typescript'],
		}),
		rawTxtPlugin(),
	],
	resolve: {
		alias: {
			'@': path.resolve(__dirname, './src'),
			'@containers': path.resolve(__dirname, './src/containers'),
			'@public': path.resolve(__dirname, './public'),
		},
	},
	css: {
		preprocessorOptions: {
			less: {
				javascriptEnabled: true, // 支持 JS
			},
		},
	},
	build: {
		outDir: 'dist',
		assetsDir: 'static', // 资源文件目录
		rollupOptions: {
			output: {
				assetFileNames: 'static/[name].[hash][extname]',
				chunkFileNames: 'static/js/[name].[hash].js',
				entryFileNames: 'static/js/[name].[hash].js',
			},
		},
		commonjsOptions: {
			include: [/node_modules\/react-arborist/], // 强制将 node_modules 里的依赖转换为 ESM
		},
	},
	define: {
		// 如果需要使用 process.env 变量，可以在这里添加
		'process.env': JSON.stringify(process.env),
		global: {},
		Buffer: Buffer, // 提供 Buffer
	},
});

import { defineConfig } from '@rspack/cli';
import { DefinePlugin, ProvidePlugin, rspack } from '@rspack/core';
import * as RefreshPlugin from '@rspack/plugin-react-refresh';
import * as path from 'path';

const { ModuleFederationPlugin } = require('@module-federation/enhanced/rspack');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

const isDev = process.env.NODE_ENV === 'development';
// Target browsers, see: https://github.com/browserslist/browserslist
const targets = ['chrome >= 87', 'edge >= 88', 'firefox >= 78', 'safari >= 14'];

export default defineConfig({
	context: __dirname,
	entry: {
		main: './src/index.tsx',
	},
	stats: {
		warnings: false, // 禁止显示警告
	},
	experiments: {
		css: true,
	},
	output: {
		globalObject: 'self',
		filename: '[name].bundle.js',
		path: path.resolve(__dirname, 'dist'),
	},
	externals: {
		LowCodeDragItem: 'LowCodeDragItem',
		LowCodeItemContainer: 'LowCodeItemContainer',
	},
	resolve: {
		extensions: ['.js', '.tsx', '.ts', '.json', '.css', '.less'],
		alias: {
			'@': path.resolve(__dirname, 'src'),
			src: path.resolve(__dirname, 'src'),
			'@containers': path.resolve(__dirname, 'src/containers'),
			'@public': path.resolve(__dirname, 'public'),
			'worker-loader': require.resolve('worker-rspack-loader'),
		},
	},
	module: {
		parser: {
			'css/auto': {
				namedExports: false,
				auto: true,
				localIdentName: '[name]__[local]___[hash:base64:5]',
			},
		},
		rules: [
			{
				test: /\.ttf$/,
				use: ['file-loader'],
			},
			{
				test: /\.svg$/,
				type: 'asset',
			},
			{
				test: /\.txt$/,
				use: [
					{
						loader: 'raw-loader',
					},
				],
			},
			{
				test: /\.(jsx?|tsx?)$/,
				use: [
					{
						loader: 'builtin:swc-loader',
						options: {
							jsc: {
								parser: {
									syntax: 'typescript',
									tsx: true,
								},
								transform: {
									react: {
										runtime: 'automatic',
										development: isDev,
										refresh: isDev,
									},
								},
							},
							env: { targets },
						},
					},
				],
			},
			{
				test: /\.module\.(less|css)$/,
				type: 'css/auto', // 👈
				use: ['less-loader'],
			},
			{
				test: /\.less$/,
				type: 'css/auto', // 👈
				use: ['less-loader'],
			},
		],
	},
	plugins: [
		new rspack.HtmlRspackPlugin({
			template: './public/index.html',
		}),

		new ProvidePlugin({
			process: [require.resolve('process/browser')],
			Buffer: ['buffer', 'Buffer'],
		}),
		new MonacoWebpackPlugin({
			languages: ['typescript', 'javascript', 'json'],
			globalAPI: true,
		}),
		isDev ? new RefreshPlugin() : null,
	].filter(Boolean),
	optimization: {
		minimizer: [
			new rspack.SwcJsMinimizerRspackPlugin(),
			new rspack.LightningCssMinimizerRspackPlugin({
				minimizerOptions: { targets },
			}),
		],
	},
	devServer: {
		port: 3000,
		hot: true,
		liveReload: true,
		proxy: [
			{
				context: ['/preview'], // 代理路径
				target: 'http://localhost:3001',
				changeOrigin: true, // 修改请求头中的 Origin
			},
			{
				context: ['/api'], // 代理路径
				target: 'http://localhost:3001',
				changeOrigin: true, // 修改请求头中的 Origin
				pathRewrite: { '^/api': '' }, // 重写路径，将 `/api` 替换为空字符串
			},
		],
		historyApiFallback: true,
	},
});