vitejs / vite-plugin-vue2-jsx Goto Github PK

因为插件强制匹配了去除?之后的**/.vue，导致无法在inlucde中设置正则仅匹配/**.vue，比如设置include: /.vue$/，依然会编译 /.vue?vue&type=style，导致报错

sorry, my english is pool,and hope you can understand.

use render function to create customElement;

<template>
  <div :style="{ '--node-height': height + 'px' }" class="c-page">
    <VTree ref="vtree" class="constraint-tree" :render="renderNode" :nodeMinHeight="height" />
  </div>
</template>

    renderNode(node: any) {
      let compName = 'CNodeCommon'
      if (isArray) {
        compName = 'CNodeArray'
      }
      return <compName class="contraint-node" info={info} />
    },

webpack use vm.$createElement，context is this

vite use h function, context is the ui-lib's component

vite will show this error; Tried jsx in setup or methods both has same problem

 Unknown custom element: <CNodeCommon> - did you register the component correctly?

In my case, webpack is more reasonable, because I cannot controll ui lib's component
vue-tree lib: https://github.com/wsfe/vue-tree

"vite": "^5.0.11",
"@vitejs/plugin-vue2": "^2.3.1",
"@vitejs/plugin-vue2-jsx": "^1.1.1",
"vue": "^2.7.16",

I'm facing this issue while building my project in vite. I'm using Vue 2.7. I have some components using the @Component syntax.

SyntaxError: unknown: Support for the experimental syntax 'decorators' isn't currently enabled

Is there any plan to support SSR?

@sodatea Hi there, sorry for bothering, I found an error recently when I migrated my project from vue2.7(webpack) to vue2.7(vite), due to the history reason, it breaks at runtime. for example:

<template>
  <button @click="testJsx">Click Me</button>
</template>

<script lang="jsx">
export default {
  methods: {
    testJsx() {
      console.log(<div>123</div>);
    },
  },
};
</script>

Click the button and the open the console, you'll find that JSX Element can not properly convert to VNode Element

May be this is a bug with @vitejs/plugin-vue2-jsx, because everything runs well with webpack workflow using the same version of @vue/[email protected] .

I made a minimal reproduction at stackblitz.com，looking forward to your reply, thanks!

npm create vue@2 ,After creating the project, upgrade vite 4, and the project cannot run

_{Sent from PPHub}

Hi there, I'm struggling to use the unified slot syntax in Vue 2.7. Reference usage here

Child component:

  setup(props, { slots }) {
    return () => <div>{slots.header}</div>
  },

Parent component:

<Child>
{{
  header: () => {
    return <div>My header</div>
  },
}}
</Child>

or

<Child v-slots={{ header: () => 'My header' }}></Child>

Is this supported?

同样的jsx代码，在babel下正常编译运行，在vite中报错

Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.

<script>
//App.vue
export default {
    render(){
        return <div>321</div>
   }
}
</script>

example: https://stackblitz.com/edit/vitejs-vite-dnqewx?file=src%2FApp.vue

vue2.7.16中setup jsx语法中vModel无法绑定ref

error log:
[vite] Internal server error: unknown file: Property left of AssignmentExpression expected node to be of a type ["LVal","OptionalMemberExpression"] but instead got "CallExpression"
Plugin: vite:vue2-jsx
File: /home/projects/vitejs-vite-dnqewx/src/App.vue?vue&type=script&setup=true&lang.jsx
at Object.validate (file:///home/projects/vitejs-vite-dnqewx/node_modules/@babel/types/lib/definitions/utils.js:105:11)
at validateField (file:///home/projects/vitejs-vite-dnqewx/node_modules/@babel/types/lib/validators/validate.js:21:9)
at validate (file:///home/projects/vitejs-vite-dnqewx/node_modules/@babel/types/lib/validators/validate.js:15:3)
at validateNode (file:///home/projects/vitejs-vite-dnqewx/node_modules/@babel/types/lib/builders/validateNode.js:12:27)
at Object.assignmentExpression (file:///home/projects/vitejs-vite-dnqewx/node_modules/@babel/types/lib/builders/generated/index.js:269:36)
at genAssignmentCode (file:///home/projects/vitejs-vite-dnqewx/node_modules/@vue/babel-sugar-v-model/dist/plugin.js:1:2618)
at genDefaultModel (file:///home/projects/vitejs-vite-dnqewx/node_modules/@vue/babel-sugar-v-model/dist/plugin.js:1:8616)
at transformModel (file:///home/projects/vitejs-vite-dnqewx/node_modules/@vue/babel-sugar-v-model/dist/plugin.js:1:1626)
at JSXAttribute (file:///home/projects/vitejs-vite-dnqewx/node_modules/@vue/babel-sugar-v-model/dist/plugin.js:1:376)
at NodePath._call (file:///home/projects/vitejs-vite-dnqewx/node_modules/@babel/traverse/lib/path/context.js:46:20)

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

As far as I know you only need to modify the version range of peerDependencies. It is backwards compatible.

Reference:

• https://github.com/vitejs/vite-plugin-vue/pull/291/files
• https://github.com/vitejs/vite-plugin-vue2/pull/94/files

I am upgrading vue from 2.5 to 2.7. Before this, I use vue-property-decorator in my project, and this error occured in the file which use vue-property-decorator and tsx.

Error detail:

[plugin:vite:vue2-jsx] unknown: Support for the experimental syntax 'decorators' isn't currently enabled (34:1):

Add @babel/plugin-proposal-decorators (https://github.com/babel/babel/tree/main/packages/babel-plugin-proposal-decorators) to the 'plugins' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-decorators (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-decorators) to the 'plugins' section to enable parsing.

not supported

defineComponent(() => {
  return () => <div>123</div>
})

is supported

defineComponent({
  setup() {
    return () => <div>123</div>
  }
})

Is there a plan to support the following way of defining components

// not using `defineComponent` call
export const Bar = { ... }

// not exported
const Foo = defineComponent(...)