Vite import works on dev but not on build

Question

I have just generated a project (typescript based) using npm init vue@2. I have a component like this

<script lang="ts">
import $ from 'jquery';
import 'devextreme/integration/jquery';
import 'devextreme/ui/data_grid';

export default({
  data() {
    return {
      msg: 'Hello there!',
    }
  },
  mounted() {
    $('#testIt').dxDataGrid({
      dataSource: [
        {
          test1: '1',
          test2: '2',
        },
        {
          test1: '3',
          test2: '4',
        },
        {
          test1: '5',
          test2: '6',
        },
      ],
      columns: [
        {
          dataField: 'test1'
        },
        {
          dataField: 'test2'
        },
      ]
    });
  }
})
</script>

<template>
  <div class="greetings">
    <h1>My Grid</h1>
    <div id="testIt" />
  </div>
</template>

It works fine and show the datagrid, when I m running yarn dev command. But when its build via command yarn build it does not work. I deployed the /dist folder via live-server and it throws error on chrome's console

TypeError: kh(...).dxDataGrid is not a function

Full code can be get from https://github.com/coure2011/ext_code/blob/main/vite-jquery-datagrid.zip