Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Vue jsx render unexpected false values

See original GitHub issue

Describe the bug

Vue jsx/tsx render primitive values when the node has only one child.

import { createApp } from 'vue'
export const Bug = () => (
  <div>
    Rendered from Vue JSX
    {/* will rendered unexpected `false` */}
    <div>{false && 'should show nothing'}</div>
  </div>
)
createApp(Bug).mount('#app')

Reproduction

yarn create vite-app vite-jsx-bug
cd vite-jsx-bug/src
yarn
# rm -rf App.vue assets components index.css
mv main.js main.jsx

echo "import { createApp } from 'vue'

export const Bug = () => (
  <div>
    Rendered from Vue JSX
    {/* will rendered `false` */}
    <div>{false && 'should show nothing'}</div>
  </div>
)
createApp(Bug).mount('#app')" > main.jsx
sed -i -- 's/js/jsx' ../index.html
yarn dev

The reason is that

https://github.com/vitejs/vite/blob/12c7c5dabda62bf5745cf0e3c25f609d2cc1438f/src/client/vueJsxCompat.ts#L14-L17

createVNode('div', null, false)
`
      Object {
        "__v_isVNode": true,
        "__v_skip": true,
        "anchor": null,
        "appContext": null,
        "children": "false", // TEXT  <------
        "component": null,
        "dirs": null,
        "dynamicChildren": null,
        "dynamicProps": null,
        "el": null,
        "key": null,
        "patchFlag": 0,
        "props": null,
        "ref": null,
        "scopeId": null,
        "shapeFlag": 9, // 0b1001 TEXT_CHILDREN | ELEMENT  <------
        "staticCount": 0,
        "suspense": null,
        "target": null,
        "targetAnchor": null,
        "transition": null,
        "type": "div",
      }
`

Is this behavior expected of createVNode? Maybe releated https://github.com/vuejs/vue-next/commit/54d06ec495a1743415de9426962024ffb764e4fe

System Info

required vite version: 1.0.0-rc.4

Issue Analytics

State:
Created 3 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

underfincommented, Sep 18, 2020

This same behavior with vue2.x.

0reactions

lawvscommented, Sep 17, 2020

If no further activity occurs, I will open a new issue on vue-next to report the inconsistent behavior.

createVNode('div', null, false) // render 'false'
createVNode('div', null, [false, 'other children']) // render comment

Top Results From Across the Web

Render Functions & JSX | Vue.js

Declaring Render Functions Make sure to return a function instead of directly returning values! The setup() function is called only once per component,...

vue babel-loader SyntaxError: Unexpected token on

The equivalent of the above in Vue 2.0 JSX is: render (h) { return ( <div // normal attributes or component props. id="foo"...

Solved: React Conditional Rendering Renders '0' - Designcise

When using conditional rendering in React, sometimes you might get unexpected rendering of values such as 0 , etc.

A Thoughtful Way To Use React's useRef() Hook

This comes with an unexpected behavior where the value is updated but the component is not re-rendered because no internal state or props...

What went wrong? Troubleshooting JavaScript - MDN Web Docs

These errors generally mean that you've left off a string value's opening or closing quote mark. In the first error above, string would...