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

nc_jvv · April 15, 2021, 9:05am

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?

Monty_Dickerson · April 16, 2021, 9:35pm

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?

nc_jvv · April 19, 2021, 7:04am

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.

Monty_Dickerson · April 20, 2021, 2:17am

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.

Monty_Dickerson · April 20, 2021, 2:19am

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)?

nc_jvv · April 20, 2021, 7:31am

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

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

Monty_Dickerson · April 21, 2021, 3:02am

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.

nc_jvv · April 21, 2021, 10:25am

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>

nc_jvv · April 22, 2021, 7:09am

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>

Monty_Dickerson · April 26, 2021, 10:48pm

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).

nc_jvv · April 27, 2021, 7:30am

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

Monty_Dickerson · April 28, 2021, 5:41pm

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

Shashi_Kant · May 4, 2021, 4:24pm

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.

nc_jvv · May 12, 2021, 8:34am

Any update on this or bug I can follow on this?

Monty_Dickerson · May 12, 2021, 3:16pm

Yes, our developers are having a look at it.

Yassin · May 18, 2021, 9:44am

Hello there,

We identified the cause of these failures and consequently created a ticket that we will address as soon as possible. In the meantime, you can use the following temporary workaround:

.vue files must be specified in the "files" property of the tsconfig.json file.

Please let us know if the problem persists even with the workaround.

Regards,
Yassin

nc_jvv · May 18, 2021, 10:58am

Hi @Yassin_Kammoun

Even with “.vue” added to the files section, I still get the same parsing errors from sonar.

Here’s our tsconfig file if you’re interested

Yassin · May 18, 2021, 11:25am

According to the TSConfig Reference, you’re not supposed to use patterns in the "files" property but rather specify the path to each file. Assuming you have src/A.vue, src/B.vue, …, and src/Z.vue files in your project, your tsconfig file would then need to look as follows:

{
  "compilerOptions:" [/* ... */],
  "include": [/*...*/],
  "files": [
    "src/A.vue",
    "src/B.vue",
     /* ... */,
    "src/Z.vue",
  ]
}

It then won’t work with "./*.vue" because TypeScript compiler doesn’t walk the file system and collect files matching provided patterns for the particular case of the "files" property.

I understand it’s cumbersome to explicitly specify the path of each .vue file, but as mentioned in my previous message, it’s a temporary workaround until we actually fix the issue.

Please give it a try and let me know if it works.

Yassin · June 15, 2021, 2:21pm

Hello @nc_jvv,

You no longer need to use the workaround I mentioned above as a fix was implemented and released recently. It is available in latest SonarQube 8.9.1.

Regards,
Yassin

system · June 22, 2021, 2:22pm

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.