Sonar can't scan Vue.js files "import' and 'export' may appear only with 'sourceType: module'"

[fabis94]

INFO: SonarScanner 4.5.0.2216
INFO: Java 11.0.3 AdoptOpenJDK (64-bit)
INFO: Mac OS X 10.15.6 x86_64

While scanning .vue files, sonar-scanner runs into the following error for Vue.js files:

ERROR: Failed to parse file [resources/js/component.vue] at line 203: 'import' and 'export' may appear only with 'sourceType: module'

It seems like it’s not understanding the Babel config correctly or something. I’ve got sourceType set correctly in the .eslintrc.js config as well:

    "parserOptions": {
        "parser": "@babel/eslint-parser",
        "ecmaVersion": 2020,
        "sourceType": "module",
    },

Any ideas how I should debug this further? It’s not clear why this error is popping up considering that running ESLint independently works fine

[Yassin (Yassin Kammoun)]

Hello @fabis94,

SonarJS does not consider any .eslintrc.js files that might come along your project, but rather uses its own parsing options. We are actually thinking of making this parameterizable.

I am a bit surprised to see the error you’re facing since our analyser tries to first parse Vue files with sourceType set to module, and falls back to script in case it fails. The latter shouldn’t work because import statements are only relevant for modules.

Would it be possible to share the full logs of the scanner ? You can get them by running a scan with -X option. Also, a small reproducer to share could definitely help.

Yassin

[Brett_Oberg]

Hello, @Yassin and @fabis94! I am also facing this issue, but from my testing it looks like this error shows up when our .vue component uses optional chaining. Do you know if there is a solution for this?

Here are some more details:

INFO: SonarScanner 4.4.0.2170
INFO: Java 11.0.6 AdoptOpenJDK (64-bit)
INFO: Linux 3.10.0-1062.4.1.el7.x86_64 amd64

ERROR: Failed to parse file [___.vue] at line 459: 'import' and 'export' may appear only with 'sourceType: module'

The line that causes this error:

const { radius } = this.userInfo?.data?.serviceLocation || 30

[Yassin (Yassin Kammoun)]

Hello @Brett_Oberg,

Thank you for your message, and welcome to SonarSource community!

In order to be able to help you, I would really appreciate if you could provide me with the following:

• the SonarQube version you are using,
• a standalone file containing a minimal source code that reproduces this error.

Regards,
Yassin

[Brett_Oberg]

@Yassin thanks for getting back to me.

The SonarQube version we are using is:

Enterprise Edition Version 8.4.2 (build 36762)

Minimum source code required to reproduce this error:

<template>
  <div />
</template>

<script>
export default {
  name: 'TestComponent',
  data: () => ({
    userInfo: {
      information: {
        userType: 'B',
      },
    },
  }),
  computed: {
    userCustomerType() {
      return this.userInfo?.information?.userType || 'C'
    },
  },
}
</script>

When I remove the optional chaining from the userCustomerType computed property, the error goes away.

Without the error I get a successful scan:

With the error I get a successful scan, but the file is skipped:

[Brett_Oberg]

Opened a new thread for this question: ERROR: Failed to parse file [___.vue] at line 459: 'import' and 'export' may appear only with 'sourceType: module'