vuejs / core

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
https://vuejs.org/
MIT License
47.57k stars 8.31k forks source link

Error with createSSRApp when Using JSX/TSX #11052

Open drozdzynski opened 5 months ago

drozdzynski commented 5 months ago

Vue version

3.4.27

Link to minimal reproduction

https://stackblitz.com/edit/vue-ssr-example-mzy6gg?file=Example.js%3AL15

Steps to reproduce

Example in reproduction uses the equivalent of transformed TSX to h function using esbuild where the source in TSX:

<div>Preview: {inputValue.value}</div>

When I change code to below example all works fine

<div>Preview: <span>{inputValue.value}</span></div>
// transformed:
h('div', {}, ['Preview: ', h("span", {}, inputValue.value)])

The issue exists only with createSSRApp.

What is expected?

To be able to use TSX syntax:

<div>Preview: {inputValue.value}</div>

What is actually happening?

App crashes in browser:

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://github.com/vuejs/core . 
  at <About> 
  at <App> [vue.esm-browser.js:1620:13](https://unpkg.com/vue@3/dist/vue.esm-browser.js)

Uncaught (in promise) TypeError: node is null
    setText https://unpkg.com/vue@3/dist/vue.esm-browser.js:9654
    processText https://unpkg.com/vue@3/dist/vue.esm-browser.js:6905
    ...

System Info

System:
    OS: macOS 11.7.3
    CPU: (8) x64 Intel(R) Core(TM) i7-4790K CPU @ 4.00GHz
    Memory: 1.22 GB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 20.11.1 - ~/.asdf/installs/nodejs/20.11.1/bin/node
    Yarn: 1.22.22 - /usr/local/bin/yarn
    npm: 10.2.4 - ~/.asdf/plugins/nodejs/shims/npm
    bun: 1.1.10 - ~/.bun/bin/bun
  Browsers:
    Chrome: 125.0.6422.114
    Firefox: 126.0.1
    Safari: 16.3
  npmPackages:
    vue: ^3.4.27 => 3.4.27

Any additional comments?

No response

eltanin33 commented 5 months ago

I suggest you write like this h('div', {}, `Preview: ${inputValue.value}`),

drozdzynski commented 5 months ago

I suggest you write like this h('div', {}, `Preview: ${inputValue.value}`),

I used h only in the example to reproduce the issue, I found this issue when using TSX/JSX:

<div>Preview: {inputValue.value}</div>