Sonar Scanner throws parsing errors when scanning .vue files

Hello,

we are using SonarQube 8.6 and the plugins checkstyle, findbugs and pmd. Futhermore we scan our project using the SonarScanner in the latest sonar-scanner-cli docker image.

Especially, we use the Sonar Scanner to scan .vue files in our project.
The script part of the .vue files is based on JavaScript and NOT TypeScript.

In Project Settings → General Settings → Languages → JavaScript / TypeScript we have .vue in the JavaScript File Suffixes but not in the TypeScript File Suffixes.

Our problem is that when the JavaScript analysis runs the parsing of some .vue files fails

INFO: Sensor JavaScript analysis [javascript]
INFO: 24 source files to be analyzed
ERROR: Failed to parse file [...] at line ...: ... :
ERROR: Failed to parse file [...] at line ...: ... :
ERROR: Failed to parse file [...] at line ...: ... :
...
INFO: 24/24 source files have been analyzed
INFO: Sensor JavaScript analysis [javascript] (done) | time=8271ms

Between the parsing errors the scanner logs:

INFO: Version of TypeScript used during analysis: 3.8.3

which is strange because we use JavaScript and not TypeScript.

One parsing error refers to a line with the script tag of a vue file and says:

Adjacent JSX elements must be wrapped in an enclosing tag

This seems strange because we are NOT using React BUT Vue.

Another parsing error claims that there is an unexpected colon in line 6
Here is the corresponding code snippet.

5 export default {
6 layout: 'anonymous',
7
8 data() {

The colon is inside the Vue.js script tag where we define a layout for our page.
This is valid Vue.js code which executes without problems.
It does not get flagged by eslint or even SonarJS when used with the eslint plugin

Yet another parsing error claims “Unexpected token =” which is a prop assignment inside the template part of the vue file

:headers="headers"

This is also proper Vue.js code which runs perfectly.

Is there a specific configuration with which we have to tell the Sonar Scanner that these are .vue files or is there a specific plugin or scanner needed? Do we need a specifc configuration file in our project for .vue files or a specific dependency/plugin?

As mentioned before we also included the SonarJS plugin into eslint and that works without any parse errors. We are wondering why the SonarJS plugin works in eslint, but the SonarScanner doesn’t work. Is the SonarJS plugin not used by default by the SonarScanner or does it maybe use a too old version?

Thanks in advance for any help
Sammy

Hello Sammy,

First thing first, I apologise for the long delay in answering you.

Coming back to your message, I would really appreciate if you could check again that you were indeed using SonarQube 8.6. The contents of your post shows symptoms of a bug that appeared with SonarQube 8.7 for .vue files as this version introduced the support of TypeScript analysis in Vue.js Single File Components which impacted the analysis of JavaScript for such files.

In the meantime, and since several versions of SonarQube were released since your post, I invite you to try analysing your project with the latest SonarQube 8.9.1 as it includes several fixes for the analysis of Vue.js Single File Components for both JavaScript and TypeScript.

Regards,
Yassin