Preact: JavaScript errors are not thrown in Firefox during rendering

Created on 8 Sep 2018 · 5Comments · Source: preactjs/preact

Developing with preact (no JSX, no build step) became almost impossible for me, because my syntax errors in render functions are not shown in the browser, they are just silently swallowed somewhere in preact internals, see this minimal example:

<html>

<head>
    <meta charset=utf8>
    <script src="https://unpkg.com/[email protected]/dist/preact.min.js"></script>
</head>

<div id=root>...</div>
<script>
    const { Component, h, render } = window.preact

    class App extends Component {
        constructor(props) {
            super(props)
        }
        componentDidMount() {
            this.setState({ stage:'choose-lesson' })
        }
        render() {
            if (this.state.stage == 'choose-lesson') {
                return h(TicketChoiceMenu, {})
            }
            else {
                return h('b',{},'oh')
            }
        }
    }

    function TicketChoiceMenu() {
        un = de.fi.ned // this is not reported in FireFox
        return 'bla'
    }

    render(h(App), root)

</script>

</html>

Although in Chrome everything is awesome.
I temporarily fixed this by wrapping buildFunctionalComponent in try catch with a log:

    function buildFunctionalComponent(vnode, context) {
      try{return vnode.nodeName(getNodeProps(vnode), context || EMPTY);}catch(e){console.log(e)}
    }

Source

exebook

Most helpful comment

@andrewiggins I did not know preact 6 was not the latest one, switching to 8 fixed the problem, thank you!

exebook on 9 Sep 2018

🎉3

All 5 comments

Firefox 61.0.2

exebook on 8 Sep 2018

@exebook I think buildFunctionalComponent wrapping issue is comming for this typo <div id=root>...</div> > <div id="root">...</div>. You may re-check your code once again

rjoydip on 8 Sep 2018

@rjoydip you mean double quotes around the div id parameter? No, it is irrelevant, I checked.

exebook on 8 Sep 2018

@exebook Hmm that's weird. Not sure why this is only happening in Firefox...

Side note: When I updated the the version of preact to the latest version, Firefox starting showing the error in the console. So appears to be some peculiar behavior in preact@6, preact@7 and Firefox.

I'm not very familiar with v6/7 of preact, so I may not be much help here, sorry.