We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
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
jsx in setup
methods
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",
The text was updated successfully, but these errors were encountered:
I use this solution to temp resolve this problem
renderNode(node: any) { const h = this.$createElement // to replace vite's h let compName = 'CNodeCommon' if (isArray) { compName = 'CNodeArray' } return <compName class="contraint-node" info={info} /> },
Sorry, something went wrong.
It's @vue/babel-sugar-inject-h which work in webpack; for ObjectMethod|ClassMethod
@vue/babel-sugar-inject-h
ObjectMethod|ClassMethod
'ObjectMethod|ClassMethod'(path) { if (firstParamIsH(t, path) || !hasJSX(t, path) || isInsideJSXExpression(t, path)) { return } const isRender = path.node.key.name === 'render' path .get('body') .unshiftContainer( 'body', t.variableDeclaration('const', [ t.variableDeclarator( t.identifier('h'), isRender ? t.memberExpression(t.identifier('arguments'), t.numericLiteral(0), true) : t.memberExpression(t.thisExpression(), t.identifier('$createElement')), ), ]), ) },
detail in https://github.com/vuejs/jsx-vue2/blob/2e9f83d5c28bcc95363001fc412db1a659b22e29/packages/babel-sugar-inject-h/src/index.js#L59C25-L59C25
But in vite I use injectH: true option, not work
injectH: true
No branches or pull requests
use render function to create customElement;
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
ormethods
both has same problemIn my case, webpack is more reasonable, because I cannot controll ui lib's component
vue-tree lib: https://github.com/wsfe/vue-tree
The text was updated successfully, but these errors were encountered: