I got TS error, but nuxt is not breaking the build

[buglavecz]

Describe the bug
We want use nuxt 2 with typescript support, but I don't understand why don't break the build, if the TS code is bad?

Screenshots

Additional context
I tried add the --fail-on-error flag to package.json, but not working.... 🤔

"scripts": {
    "dev": "cross-env BUILD_VER=dev-local.0123456 COMMIT_HASH=0123456 nuxt --fail-on-error",

Thanks.

[buglavecz]

I seems this error come only if I use composition API, and script setup syntax.

[rchl]

Maybe it's an issue with your editor's Vue integration? I suppose it's not Volar or Vetur but maybe Jetbrains own one? I don't have experience with that.

[buglavecz]

Yes, jetbrain IDE . But I tried with script setup syntax and setup() function. With setup() function working fine, but with script setup no.
I saw, the examples also use setup() function...

[rchl]

If you provide a repo I can try and see if I can reproduce. But again, if Nuxt and Volar doesn't complain then it sounds like an issue with Editor integration that does the type checking.

[buglavecz]

With this syntax setup syntax...

<template>
  <b-container class="mt-3">
    <h3>Composition API</h3>
    {{ fruit }}
  </b-container>
</template>

<script lang="ts">
    import { defineComponent } from 'vue';
    export default defineComponent({
        setup () {
            interface Apple {
                id: number,
                name: string,
                weight?: number
            }

            const fruit:Apple[] = [
                {
                    id: '10',
                    name: 'jonatan'
                },
                {
                    id: 20,
                    name: 'golden'
                }
            ];
            return { fruit };
        }
    });
</script>

I got this TS error in terminal:

But, If I use <script setup> syntax:

<template>
  <b-container class="mt-3">
    <h3>Composition API</h3>
    {{ fruit }}
  </b-container>
</template>

<script setup lang="ts">
    interface Apple {
        id: number,
        name: string,
        weight?: number
    }

    const fruit:Apple[] = [
        {
            id: '10',
            name: 'jonatan'
        },
        {
            id: 20,
            name: 'golden'
        }
    ];
</script>

I got this result:

this is very simple example, but I can setup an example repo.

[rchl]

it would help if you can setup a repo yes.

[buglavecz]

Repo: https://github.com/buglavecz/nuxt2-bootstrap-vue-ts-starter

Stackblitz: https://stackblitz.com/github/buglavecz/nuxt2-bootstrap-vue-ts-starter

the issues are in this path: pages/test/*.vue

thanks, for help.

[buglavecz]

Updated the repo with @nuxtjs/composition-api..

[buglavecz]

[rchl]

Unfortunately script setup is just not supported in the fork-ts-checker-webpack-plugin webpack plugin. See author's comment about whole vue support: TypeStrong/fork-ts-checker-webpack-plugin#668 (comment)

I suppose the recommendation for now would be to just disable typecheck in this module and use Volar's vue-tsc on the command line instead.