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.
JavaScript errors are not thrown in Firefox during rendering
See original GitHub issueDeveloping 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/preact@6.4.0/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)}
}
Issue Analytics
- State:
- Created 5 years ago
- Comments:5 (1 by maintainers)
Top Results From Across the Web
JavaScript errors are not thrown in Firefox during rendering · Issue ...
Developing with preact (no JSX, no build step) became almost impossible for me, because my syntax errors in render functions are not shown...
Read more >Handling common JavaScript problems - MDN Web Docs
For a start, the JavaScript console will report errors in your code. Make a local copy of our broken-ajax. html example (see the...
Read more >Firefox rendering elements incorrectly (Hardware Acceleration ...
Uncheck Use hardware acceleration when available. At the top of the Firefox window, click on the Firefox button and then select Exit; Start ......
Read more >A Definitive Guide to Handling Errors in JavaScript - Kinsta
The InternalError type is used when an exception occurs in the JavaScript runtime engine. It may or may not indicate an issue with...
Read more >Top 10 JavaScript errors from 1000+ projects (and how to ...
JS code is interpreted from top to down as laid out in the HTML. So, if there is a tag before the DOM...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@andrewiggins I did not know preact 6 was not the latest one, switching to 8 fixed the problem, thank you!
@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.