Vue.js SFC (Single File Component - .vue extension) parsing issues

SonarQube Cloud
1
  • ALM used: gitlab
  • CI system used: gitlab
  • Scanner command used when applicable: sonar-scanner
  • Languages of the repository: Vue.js typescript
  • Error observed: multiples of things like this (the exact typescript parser error varies):
11:44:52.795 DEBUG: Cache strategy set to 'WRITE_ONLY' for file 'components/apps/dashboard/tableDataWidgetWizard.vue' as the current file is changed
11:44:52.795 DEBUG: Analyzing file: file:///builds/camlin-group/sapient-insights/software/sapient-insights-ui/components/apps/dashboard/tableDataWidgetWizard.vue
11:44:52.799 DEBUG: Analyzing file "/builds/camlin-group/sapient-insights/software/sapient-insights-ui/components/apps/dashboard/tableDataWidgetWizard.vue" with linterId "unchanged"
11:44:52.900 DEBUG: Parsing /builds/camlin-group/sapient-insights/software/sapient-insights-ui/components/apps/dashboard/tableDataWidgetWizard.vue with vue-eslint-parser
11:44:52.901 DEBUG: Failed to parse /builds/camlin-group/sapient-insights/software/sapient-insights-ui/components/apps/dashboard/tableDataWidgetWizard.vue with TypeScript parser: Unexpected token. Did you mean `{'>'}` or `>`?
11:44:52.902 WARN: Failed to parse file [components/apps/dashboard/tableDataWidgetWizard.vue] at line 148: Unexpected token. Did you mean `{'>'}` or `>`?
11:44:52.902 DEBUG: Cache entry created for key 'jssecurity:ucfgs:SEQ:10.14.0.26080:camlin-group_sapient-insights-ui:components/apps/dashboard/tableDataWidgetWizard.vue' containing 0 file(s)
11:44:52.902 DEBUG: Cache entry created for key 'jssecurity:ucfgs:JSON:10.14.0.26080:camlin-group_sapient-insights-ui:components/apps/dashboard/tableDataWidgetWizard.vue'
11:44:52.903 DEBUG: Cache entry created for key 'js:filemetadata:10.14.0.26080:camlin-group_sapient-insights-ui:components/apps/dashboard/tableDataWidgetWizard.vue'
  • Steps to reproduce: don’t know - cannot see any pattern in the files it is complaining about
  • Potential workaround: none that I have found

39 of our 77 .vue files are failing to parse like the above, which is a significant chunk of our code base failing to scan. What versions of typescript/vue-eslint-parser is sonar-scanner using to parse the files? If necessary I may be able to provide one of the files directly for your investigation but I am not going to post my companies code publicly here

2

Going on a hunch this might be related to this: "Parsing error: Unexpected token. Did you mean `{'>'}` or `>`?" when using arrow functions · Issue #1343 · vuejs/eslint-plugin-vue · GitHub

3

Hi sorry for the delayed response, I was digging into it a bit more then on holiday. Many of the errors are different from this one, but the thing about jsx support being enabled by default might be relevant I guess. We are using the vue-eslint-parser (v9.4.2) in our project and it is not suffering from these parsing errors. Also I see the issue you’ve linked to it is a little unclear what the resolution was - seems like the original poster is saying they had to explicitly disable jsx support in the lint parser options (which we also have in our lint config - our parserOptions are exactly the same as the ones he posts):

    parser: "@typescript-eslint/parser",
    ecmaFeatures : {
      jsx : false
    }
  },

and then a later poster with the same issue said it was resolved by simply updating @typescript-eslint/parser to the latest version. So I think sonar-scanner likely is suffering from one of the above issues. Since that issue was last updated 2022 I find it hard to believe that sonar hasn’t been updated to the use the latest versions since then, but it does seem it might be related to one of those things

4

Hmm, I don’t think Sonar has its own dependency (happy to be wrong) for vue-eslint-parser, none that I could see publicly anyway.

Are you confident that the the node versions are the same on your local and GitLab CI? And is GL able to read the .eslintrc file?

Lastly, try a --verbose flag in your invocations prior to this error to get further logs. I’ve seen this error years ago on Vue and it was usually the silly thing like the closing tag being one level out or so but I’d wager that this can’t be across all of your files.

5

I’ve done a bunch more digging into this now and I’ve pinpointed the type of code that is causing it issues, its casting in the typescript using things like this:
const example = <any>variable;
if you replace that with
const example = variable as any;
then its perfectly happy with that and will parse. I installed the VSCode SonarLint plugin to dig into this further and confirmed that I see the same behavior there, which made debugging it a bit easier as I could do it on the fly while watching the SonarLint output rather than pushing to gitlab and waiting for CI jobs to run. All other vue features (validation of typescript in template section, vue linting rules etc.) are working fine in this file so I don’t understand why SonarLint is having an issue with it. I tried downgrading vue-eslint-parser all the way down to 7.11.0 (3 years old) and had the exact same issue. You think the sonar scanner stuff is definitely using the dependencies of the project itself to do this scanning? It doesn’t have its own versions encapsulated and independent of the project? Seems like it should have its own versions of this stuff so it would work for projects that didn’t have the vue/eslint packages installed already.

6

I am glad you’ve pinpointed it. I am not sure how they do it, jsts-test-sources doesn’t list it nor does their org.

7

I think this is definitely related to jsx somehow, but I can’t see how to resolve it. For now I’ve just enabled this linting rule to force the “as” style of casting and moved on.