Vue version

3.3.4

Link to minimal reproduction

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

Steps to reproduce

In dev mode, it will render and warn on the console with the following:

vue.js?v=7912eb17:1673 [Vue warn]: Template compilation error: Element is missing end tag.
1  |  <div> with missing end tag...
   |  ^ 
  at <BadComponent> 
  at <App>

However, after build / preview on production, it will cause the following fatal runtime error:

index-7fb55c32.js:1 Uncaught SyntaxError: 24 (at index-7fb55c32.js:1:89935)
    at fe (index-7fb55c32.js:1:89935)
    at se (index-7fb55c32.js:2:6693)
    at Hd (index-7fb55c32.js:2:1848)
    at Yi (index-7fb55c32.js:1:97032)
    at Ld (index-7fb55c32.js:1:96271)
    at Vh (index-7fb55c32.js:7:20861)
    at ig (index-7fb55c32.js:7:25071)
    at og (index-7fb55c32.js:7:25576)
    at bc (index-7fb55c32.js:1:68671)
    at bp (index-7fb55c32.js:1:68187)

What is expected?

Production build should behave more like dev environment and does not cause fatal runtime errors.

What is actually happening?

Fatal runtime error, where the whole app will no longer work.

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
    Memory: 3.62 GB / 15.61 GB
  Binaries:
    Node: 16.15.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.5.5 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.1778.0), Chromium (113.0.1774.57)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    vue: ^3.3.4 => 3.3.4

Any additional comments?

Template is generated at runtime, need to have a way to catch/prevent fatal runtime errors.

Had a similar issue and was able to resolve the runtime error by catching the compilation error inside the render function

import {compile, h} from 'vue';

export default {
    name: "dynamic-component",
    props: {        
        templateHtml: {templateHtml: true, type: String}
    },
    render() {
        try {
            return h({render: compile(this.templateHtml)})
        } catch (e) {
            return h({template: '<div>Invalid HTML</div>'})
        }
    }
}

@blakebjorn using compile() inside try {} does catch and prevent the error, however, the descriptive syntax error is lost in the catch block, i.e.

Template compilation error: Element is missing end tag.
1  |  <div> with missing end tag...
   |  ^ 
  at <BadComponent> 
  at <App>