Skip to content

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

Open
@seafronthu

Description

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.

  • node: v16.14.2
  • pnpm: v8.10.4
  • npm: v8.3.1

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions