Error is displaying in the wrong line

[Alexsey]

Issue description or question

The error should be on line 3 but it's shown on line 1

Sample code

const {isString, isArray} = require('lodash')

;[1, 2, 3, ...undefined] //?

Quokka.js Console Output

Quokka #1 (node: v12.10.0)

undefined is not iterable
	at _.js:1:1

Code editor version

Webstorm v2019.3 EAP

OS name and version

Windows 10 Pro

[smcenlly]

Thanks for reporting the problem. This is caused by the semi-colon that terminates the import on line 1 being on line 3. What's effectively happening is that we calculate the range for the require statement starting on line 1 and ending on line 3. The mapping for expression statement on line 3, starts at line 3 and ends on line 3. When we process the error, the mapping gets a little confused and defaults to the first range (line 1).

This is an edge case that we don't expect to see in real-code. Do you have a use case for putting in semi-colons to terminate a statement on unrelated lines?

We'll do some investigation next week on how we might resolve this.

[Alexsey]

This is not an edge case for coding style without semi-colons. For example, I'm using now ESLint StandardJS that as you can see from its ratings is quite popular. Prettier also can work in semi-colons-free style. The problem is that ASI (automatic semi-colon insertion) in JavaScript is broken and three cases when you need to use semi-colons at the start of the line:

1. If the line is starting with (
2. If the line is starting with [
3. If the line is starting with /

So ESLint would give an error if in the example code there would be no semi-colon at the start of line 3 and Prettier would just insert it there without even asking

[ArtemGovorov]

The issue had been fixed and the fix is available in Quokka plugin v1.0.195.