vitejs / vite-plugin-vue2-jsx

Vite plugin for Vue 2.7 JSX support
MIT License
58 stars 6 forks source link

Why do errors occur when using JSX during installation using PNPM? #22

Open seafronthu opened 9 months ago

seafronthu commented 9 months ago

package.json

{
  "name": "business-ui",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "dayjs": "^1.8.29",
    "lodash": "^4.17.21",
    "qs": "^6.11.2",
    "vue": "^2.7.10",
    "vue-router": "^3.5.1",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue2": "^2.3.1",
    "@vitejs/plugin-vue2-jsx": "^1.1.1",
    "sass": "^1.69.5",
    "sass-loader": "^13.3.2",
    "vite": "^5.0.10"
  }
}

vite.config.js

import { defineConfig } from 'vite'
import path from 'node:path'
import vue from '@vitejs/plugin-vue2'
import vueJsx from '@vitejs/plugin-vue2-jsx'
import devConfig from './build/dev.config'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx({
    jsx: true
    // options are passed on to @vue/babel-preset-jsx
  })],
  resolve: {
    alias: [
      {
        find: /\/@src\//,
        replacement: path.join(process.cwd(), "src/")
      },
      {
        find: /\/@packages\//,
        replacement: path.join(process.cwd(), "packages/")
      },
      {
        find: /\/@lib\//,
        replacement: path.join(process.cwd(), "lib/")
      },
      {
        find: /\/@examples\//,
        replacement: path.join(process.cwd(), "examples/")
      },
      {
        find: /\/@\//,
        replacement: path.join(process.cwd(), "examples/")
      },
    ]
  },
  ...devConfig
})

error

[vite] Internal server error: Failed to resolve import "@vue/babel-helper-vue-jsx-merge-props" from "packages/CustomConfigSearch/src/components/SearchConditionResult/components/ConfirmDialog.vue?vue&type=script&lang.jsx". Does the file exist?
  Plugin: vite:import-analysis
import _mergeJSXProps from "@vue/babel-helper-vue-jsx-merge-props";
     |                              ^
  2  |  import { h } from "vue";
  3  |  const p = () => new Promise(r => r(true));

It was installed using pnpm.But it works well when installed using npm.