[Bug report] Customize Cell Renderer Virtualized Table CAN NOT running in this webpack template.

[Serendipity96]

Hi. I clone this webpack5-starter, it's very helpful, thanks for all your work. But when I try to test customize cell renderer virtualized table in this webpack template, I got an error when compiling.

App.vue(it's pasted from the offical example):

<template>
  <el-table-v2
    :columns="columns"
    :data="data"
    :width="700"
    :height="400"
    fixed
  />
</template>

<script lang="tsx" setup>
import { ref } from 'vue'
import dayjs from 'dayjs'
import {
  ElButton,
  ElIcon,
  ElTag,
  ElTooltip,
  TableV2FixedDir,
} from 'element-plus'
import { Timer } from '@element-plus/icons-vue'

import type { Column } from 'element-plus'

let id = 0

const dataGenerator = () => ({
  id: `random-id-${++id}`,
  name: 'Tom',
  date: '2020-10-1',
})

const columns: Column<any>[] = [
  {
    key: 'date',
    title: 'Date',
    dataKey: 'date',
    width: 150,
    fixed: TableV2FixedDir.LEFT,
    cellRenderer: ({ cellData: date }) => (
      <ElTooltip content={dayjs(date).format('YYYY/MM/DD')}>
        {
          <span class="flex items-center">
            <ElIcon class="mr-3">
              <Timer />
            </ElIcon>
            {dayjs(date).format('YYYY/MM/DD')}
          </span>
        }
      </ElTooltip>
    ),
  },
  {
    key: 'name',
    title: 'Name',
    dataKey: 'name',
    width: 150,
    align: 'center',
    cellRenderer: ({ cellData: name }) => <ElTag>{name}</ElTag>,
  },
  {
    key: 'operations',
    title: 'Operations',
    cellRenderer: () => (
      <>
        <ElButton size="small">Edit</ElButton>
        <ElButton size="small" type="danger">
          Delete
        </ElButton>
      </>
    ),
    width: 150,
    align: 'center',
  },
]

const data = ref(Array.from({ length: 200 }).map(dataGenerator))
</script>

webpack.config.ts:

import { resolve } from 'path'
import HtmlWebpackPlugin from 'html-webpack-plugin'
import { VueLoaderPlugin } from 'vue-loader'
import type { Configuration } from 'webpack'

const mode: 'production' | 'development' =
  (process.env.MODE as any) ?? 'development'

const config: Configuration = {
  mode,
  entry: {
    app: resolve('src', 'main.ts'),
  },
  resolve: {
    extensions: ['.ts', '.js', '.mjs', '.json'],
  },
  module: {
    rules: [
      {
        test: /\.mjs$/i,
        resolve: { byDependency: { esm: { fullySpecified: false } } },
      },
      { test: /\.vue$/, loader: 'vue-loader' },
      {
        test: /\.m?[tj]s$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin(),  // I removed ElementPlusResolver, because I was already full import the element-plus.
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'public/index.html',
    })
  ],
}

export default config

And then I get an error:

ERROR in ./src/App.vue?vue&type=script&lang=tsx&setup=true (./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[7].use[0]!./src/App.vue?vue&type=script&lang=tsx&setup=true) 13:12
Module parse failed: Unexpected token (13:12)
File was processed with these loaders:
 * ./node_modules/vue-loader/dist/index.js
You may need an additional loader to handle the result of these loaders.
| import { Timer } from '@element-plus/icons-vue'
| 
> import type { Column } from 'element-plus'
| 
| 
 @ ./src/App.vue?vue&type=script&lang=tsx&setup=true 1:0-143 1:0-143 1:144-276 1:144-276
 @ ./src/App.vue 2:0-66 3:0-61 3:0-61 6:49-55
 @ ./src/main.ts 4:0-28 5:22-25

It seems like there is not loader to handle(or compile) tsx, so I try to add a loader to work well with tsx:

      {
        test: /\.m?[tj]sx$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: [
            "@babel/preset-env",
            "@vue/babel-preset-app",
            "babel-preset-typescript-vue3",
            "@babel/preset-typescript"
          ],
        }
      },

Unfortunately, I still got an error:

SyntaxError: /Users/Code/element-plus-webpack5-starter-main/src/App.vue: Unexpected token, expected "from" (13:12)

  11 | import { Timer } from '@element-plus/icons-vue'
  12 |
> 13 | import type { Column } from 'element-plus'
     |             ^
  14 |
  15 |
  16 | export default /*#__PURE__*/_defineComponent({

Could you help me?