Parsing error on .vue files during typescript analysis with javascript sensor - 'import' and 'export' may appear only with 'sourceType: module'

SonarQube Cloud
,
1
  • ALM used: GitHub
  • CI system used: Azure DevOps
  • Scanner command used: SonarCloud plugin for Azure Pipelines
  • Languages of the repository: js, ts
  • Error observed
INFO: Sensor JavaScript analysis [javascript]
INFO: Using TypeScript at: '/home/vsts/work/1/s/node_modules'
INFO: 4808 source files to be analyzed
##[error]ERROR: Failed to parse file [packages/client/(...)/ModuleWebinarEditor.vue] at line 91: 'import' and 'export' may appear only with 'sourceType: module'
  • Steps to reproduce
    I have the sonar scan performed through an Azure Pipeline with the plugin.
    The scan runs on code containing .js, .ts and .vue files. I’m aware that SonarTS is deprecated and the .ts analysis is now performed by SonarJS, but I don’t understand why it’s trying to analyse my .vue files even though I have specified the extensions and .vue files don’t contain any TS:
sonar.typescript.file.suffixes=.ts
sonar.javascript.file.suffixes=.js,.vue

I added the explicit path to my tsconfig, but it didn’t change anything:

sonar.typescript.tsconfigPath=tsconfig.json

I also added the following to my ESlint config, but didn’t change anything either:

parserOptions: {
    ecmaVersion: 2018,
    sourceType: "module"
}

I’m looking for a solution to:
1/ Make the errors disappear
2/ Avoid running a TS analysis on files other than .ts (it’s wasting time and resources)

Thank you

3

Hi,

In fact we are not running TS analysis on your vue files. Indeed log INFO: Using TypeScript at: .. might be confusing (and I believe based on it you decided that TS analysis is run), but in fact it’s just preparation set up for future TS file analysis.

We use https://www.npmjs.com/package/vue-eslint-parser to parse vue files. We first try with sourceType: 'module' and then with sourceType: 'script' (source code).
So it’s weird we failed to parse with both configs (error message is displayed for script sourceType as last tried).
Could you share the content of this vue file (I only care about script part)?
Seems like these is some code there which can’t be parsed with sourceType: 'module'.

1 Like
4

Hi Elena,

Thanks for your answer.

I had a look and the difference is that we specify

"parserOptions": {
    "parser": "babel-eslint",
    ...
}

and you don’t.

I reproduced locally, if I remove this parserOptions.parser line I get the same ESlint error as in the sonar execution.

The ESlint error comes from this kind of import in .vue files:

const Popup = () => import("./Popup.vue");

Is there a way to edit the config with which sonar executes vue-eslint-parser - npm?

5

I got your message about babel-eslint as internal parser. Still I can’t reproduce your initial problem.
On my side const Popup = () => import("./Popup.vue"); produces Unexpected token import. Are you sure that’s the line which makes parsing fail with 'import' and 'export' may appear only with 'sourceType: module'?

7

Actually you’re right, I might have gone a little too fast.

Here’s the code if you want to try and reproduce:

<script>
    /* global programEditorLg */

    import attachmentHandlerMixin from "../../mixins/attachmentHandler.mixin";
    import synchronousEventMixin from "../../mixins/synchronousEvent.mixin";
    import EventBottomSection from "./EventBottomSection.vue";
    import EventOptions from "./EventOptions.vue";
    import RenderThumbnail from "./RenderThumbnail.vue";
    const UpdateMailPopup = () => import("./UpdateMailPopup.vue");

    export default {
        components: {
            EventBottomSection,
            EventOptions,
            RenderThumbnail,
            UpdateMailPopup
        },
        mixins: [
            attachmentHandlerMixin,
            synchronousEventMixin
        ],
        data() {
            return {
                mailKeys: ["startDate", "endDate", "name", "url"],
                mailProps: ["date", "name", "url"],
                programEditorLg
            };
        }
    };
</script>

Thanks

8

Ok, so indeed import() is the problem. I created a ticket https://github.com/SonarSource/SonarJS/issues/1978

Thanks for reporting the problem!

1 Like
9

Hello, @Lena and @kevin-360! 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
10

Hello @Brett_Oberg

It’s been awhile since this thread is open. Don’t you mind creating a new one properly describing your problem (which SQ version, log, etc)?

1 Like
11

@Lena, sure thing!

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

12

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