After modifying the bundling tool from webpack to vite in vue2, the dragging and resizing functions of vue-grid-layout do not work

[Park-min-hyoung]

As the title suggests, dragging and resizing worked normally in the webpack environment, but after migrating to Vite, these two functions do not work. I would appreciate it if you could let me know the solution.

package veresion

"vue": "2.7.0" "vue-grid-layout": "^2.3.7" "vite": "^3.2.8"

Code

// vite.config.js

  /**
   * @description Plugin
   */
  const generatePlugins = () => {
    const vitePluginSvgSpritemap = () => {
      const include = path.join(__dirname, './src/icons/svg/*.svg')
      console.log('SVG_PATH : ', include)
      return createSvgSpritePlugin({
        include,
        symbolId: 'icon-[name]'
      })
    }

    return [
      vue(),
      vueJsx(),
      vitePluginSvgSpritemap(),
      svgLoader(),
      eslint({
        exclude: ['/virtual:/**', 'node_modules/**']
      })
    ]
  }

  return defineConfig({
    server,
    resolve,
    esbuild: {
      loader: 'jsx'
    },
    plugins: generatePlugins()
  })

// Where to use vue-grid-layout

    <grid-layout
      :layout.sync="dashboardTemplate.content"
      :col-num="12"
      :row-height="10"
      :is-draggable="isEditMode"
      :is-resizable="isEditMode"
      :is-mirrored="false"
      :vertical-compact="true"
      :margin="[10, 10]"
      :use-css-transforms="true"
      class="grid-layout"
    >
      <grid-item
        v-for="item in dashboardTemplate.content"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
        :key="item.i"
        :min-w="dashboardConfig.gridItemMinW"
        :min-h="dashboardConfig.gridItemMinH"
        class="grid-item"
        @resized="resizedGridItem"
      >
        <span
          @mouseover="item.editVisible = true"
          @mouseleave="
            item.editVisible = false
            deleteConfirmVisible = false
          "
        >
          componets...
        </span>
    </grid-layout>

The class name is updated when an event occurs.

not event

Dragging

Resizing