[plugin:vite:import-analysis] vite 提示jsx语法报错问题？

Question

依赖及环境：

• vue3 + ts
• vite: 4.1.0
• @vitejs/plugin-vue: 4.0.0

报错：[plugin:vite:import-analysis] Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.

代码：
BsSubMenu.tsx

let createDropdownTransition = () => {
  return (<Teleport to="body" disabled={!this.submenuTeleported}>
    <BsDropdownTransition
      placement={this.dropdownTransitionPlacement}
      reference-ref={this.bsSubmenuTitleRef}
      try-all-placement={false}
      set-width={this.menuRootProps.mode == 'horizontal'}
      set-min-width={false}
      will-visible={this.submenuWillVisible}
      // @ts-ignore
      onAfterEnter={ () => this.$emit('expand', this.comId) }>
      <ul
        v-show={this.submenuVisible}
        id={this.comId + '--content'}
        data-submenu-path={this.submenuPath}
        class={['bs-submenu-content', 'bs-submenu-content-dropdown', this.dropdownClass]}>
        { slots.default && slots.default() }
      </ul>
    </BsDropdownTransition>
  </Teleport>);
};

BsMenuItem.tsx

let content = (<li
  class={['bs-menu-item', {
    'has-icon': !!$slots.icon,
    'is-disabled': this.disabled,
    'is-selected': this.isSelected
  }]}
  style={{
    paddingLeft: this.paddingLeft.value ? (this.paddingLeft.value + this.paddingLeft.unit) : ''
  }}
  role="menuitem"
  aria-level={this.keyIndexPath.length}
  aria-disabled={this.disabled}
  onClick={ this.handleClick }
  onMouseenter={ this.handleMouseenter }>
  { $slots.icon ? <span
    class="bs-menu-item-icon"
    role="img">
    { $slots.icon ? $slots.icon() : null }
  </span> : null }
  <span class="bs-menu-item-title">
    { $slots.default ? $slots.default() : this.title }
  </span>
  { $slots.content ? $slots.content() : null }
</li>);

请问以上2段tsx代码哪里的语法不对？在vite环境下就报错，在webpack环境是可以运行的

Answer 1

问题已解决，原因是未使用@vitejs/plugin-vue-jsx插件。
解决办法：

1. 安装@vitejs/plugin-vue-jsx插件

2. 在vite.config.js中使用插件

   import { defineConfig } from 'vite';
   import vue from '@vitejs/plugin-vue';
   import vueJsx from '@vitejs/plugin-vue-jsx';
   
   // https://vitejs.dev/config/
   export default defineConfig({
     plugins: [
    vue(),
    vueJsx({
      // options are passed on to @vue/babel-plugin-jsx
    })
     ]
   });