Vue + Typescript: Fails to parse files with required Props syntax

We’re having an issue with SonarQube failing to parse most of our Vue typescript files, due to typescript specific syntax.

Versions:
SonarQube v. 8.7 (build 41497)
Vue v. 2.6.11
Typescript v 3.9.6

Errorlog:

09:44:51  INFO: 0 files ignored because of scm ignore settings
09:44:51  INFO: Quality profile for css: Sonar way
09:44:51  INFO: Quality profile for grvy: Sonar way
09:44:51  INFO: Quality profile for java: Sonar way
09:44:51  INFO: Quality profile for js: Sonar way Recommended
09:44:51  INFO: Quality profile for ts: Sonar way recommended
...
09:45:05  INFO: 472 source files to be analyzed
09:45:05  INFO: Analyzing 472 files using tsconfig: [...]
09:45:15  INFO: 2/472 files analyzed, current file:[...]
09:45:15  ERROR: Failed to parse file [...] at line 55: Unexpected token (20:10)
09:45:18  ERROR: Failed to parse file [...] at line 57: Unexpected token (19:12)
09:45:21  ERROR: Failed to parse file [...] at line 19: Unexpected token (10:19)
09:45:25  ERROR: Failed to parse file [...] at line 22: Unexpected token (11:33)
09:45:25  INFO: 8/472 files analyzed, current file:[...]
09:45:28  ERROR: Failed to parse file [...] at line 124: Unexpected token (24:31)
09:45:32  ERROR: Failed to parse file [...] at line 54: Unexpected token (25:18)
09:45:35  ERROR: Failed to parse file [...] at line 16: Unexpected token (11:37)
09:45:35  INFO: 12/472 files analyzed, current file: [...]

All the errors with “unexpected tokens” above points to Typescript syntax in our @Props where we use ! to annotate the prop is required shown below

export default class FooBar extends Vue {
  @Prop() private currentPage!: number;
  @Prop() private pageCount!: number;

This results in SonarQube analysis being really slow (~10-15 mins) for our Vue project.
Is this a known issue, or can we fix this somehow?

Hi Jasper.

Welcome to the SonarSource community forum.

I’ll look your concern about the typescript non-null assertion operator (the post-fix exclamation mark).

Please re-scan with the latest version of SonarQube (8.8).
How many lines of code are being scanned?
Which version of Node is your project using?

Hi Monty

The project is about ~14k lines of code, using Node 14.15.
I’ll see if we can get our SonarQube updated to 8.8.

The odd thing is, that the scan passes successfully allowing us to view the scan report and everything.
It just bugs me out, that our sonarqube uses 10mins trying to parse our Typescript files, while our slightly larger Java project (16k lines of code) zooms through Sonar in ~40 seconds.

we use ! to annotate the prop is required

As I wrote above, the ! is the TypeScript non-null assertion operator. Please let me know if the solution to vue.js - Vue and TypeScript required prop - Stack Overflow helps.

Let me know when you’ve upgraded to the supported version.

Check out the SQ upgrade notes for changes related to JS/TS scanning. Which edition of SonarQube are you using (CE, DE, EE, DCE)?

We also have cases where it fails to parse the code where we have your suggestion with both Vue’s and Typescript’s non-null assertation @Prop({required: true}) private foo!

16:18:20 ERROR: Failed to parse file [src/main/vue/src/components/EmneSideMenu.vue] at line 31: Unexpected token (12:32)
which points to this line of code
image

I can’t seem to find anything related to my issue in the last 2 release notes.
8.8 adds better JS Security analysis and TS 4.2 support, 8.7 adds better JS injection vulnerabilities analysis

We’re running SonarQube Community Edition Version 8.7 (build 41497), but as I’m not the owner of the server, upgrading to 8.8 may take some time as it has to go through “needed” bureaucratic loops, but I’ll get back to you as soon as I get it upgraded :slight_smile:

I tried to reproduce the parse error on my computer with the same code snippet. My parse did not fail, however. (I am running 8.8 EE though.) If you craft a barebones example that fails on your end, I’ll be glad to run it to reproduce on mine.

This simple file fails to parse

<template>
  <div>
    <h1>Hello world</h1>
    <h2 v-if="bool">I'm here</h2>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';

@Component({ name: 'Foo' })
export default class Foo extends Vue {
  @Prop({ default: true, required: true }) private bool!: boolean;
}
</script>
<style lang="scss"></style>

I tried simplifying even further to the example below, which was parsed and scanned successfully

<template>
  <div>
    <h1>Hello world</h1>
  </div>
</template>

<script lang="ts">
import { Component, Vue} from 'vue-property-decorator';

@Component({ name: 'Foo' })
export default class Foo extends Vue {}
</script>
<style lang="scss"></style>

Hi Monty
Our SonarQube was updated to v. 8.8 (build 42792), but it still fails to parse the simple Vue file i gave as example:

<template>
  <div>
    <h1>Hello world</h1>
    <h2 v-if="bool">I'm here</h2>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';

@Component({ name: 'Foo' })
export default class Foo extends Vue {
  @Prop({ default: true, required: true }) private bool!: boolean;
}
</script>
<style lang="scss"></style>

Hi Jasper. Thank you for composing a test case that fails on your system.

I could not reproduce the error. I analyzed your code on a client running SonarScanner 4.5.0.2216 and server running SonarQube 8.8.0.42792 (also build 42792).

I’ve attached the logs with sonar.verbose set to true sonarlogs.zip (543.6 KB)

Thanks Jasper. I have reproduced this issue and am communicating to the analyzer developers about it.

3 Likes

Today after upgrade to my SonarQube server to 8.8.0.42792. we encountered this same problem by scanning vue file. Do we have any update on this. Thanks in advance for all helps here.

1 Like