Release 0.40.1 breaks typescript compatibility on script setup

[Tails128]

This morning's release breaks the typescript/tslint's compatibility on <script lang='ts' setup>.

More specifically the following error is triggered:

'default' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.ts(7022)

As you may see it only happens in <script> and does not extend outside it.

[Shinigami92]

https://palantir.github.io/tslint/

PLEASE move away from TSLint!!!

[francoism90]

@Shinigami92 I'm getting the same error on a default Vue getting started project.

"devDependencies": {
    "@rushstack/eslint-patch": "^1.1.4",
    "@types/jsdom": "^20.0.0",
    "@types/node": "^16.11.47",
    "@vitejs/plugin-vue": "^3.0.1",
    "@vitejs/plugin-vue-jsx": "^2.0.0",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/eslint-config-typescript": "^11.0.0",
    "@vue/test-utils": "^2.0.2",
    "@vue/tsconfig": "^0.1.3",
    "cypress": "^10.4.0",
    "eslint": "^8.21.0",
    "eslint-plugin-cypress": "^2.12.1",
    "eslint-plugin-vue": "^9.3.0",
    "jsdom": "^20.0.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.7.1",
    "start-server-and-test": "^1.14.0",
    "typescript": "~4.7.4",
    "vite": "^3.0.4",
    "vitest": "^0.21.0",
    "vue-tsc": "^0.39.5" // works, but higher breaks lint
  }

I don't see any TSLint?

[johnsoncodehk]

Thanks for the report, but I can't reproduce this problem in https://github.com/johnsoncodehk/volar-starter, please provide minimal reproduction.

[francoism90]

@johnsoncodehk I don't have a public repo, however it can be easy triggered using the latest versions and trying to import something like vue (computed, watch, etc.).

I'm using https://cli.vuejs.org/guide/creating-a-project.html, select TS support and upgrade to the latest versions using ncu. It will break VSCode and npm run build.

[so1ve]

I also had this problem, but it only appeared in some components.

[so1ve]

I've found this problem in any .vue file that uses components.

[so1ve]

Downgrading to 0.40.0 solved it.

[jiangmaniu]

+1

Similarly, I have this problem in some components, and I have not found the regularity of the problem. I tried to rename the same .vue component code file (for example: name.vue => name1.vue ), and found that the error of the named file disappeared, which is very strange.

old file name：

new file name：

[Tails128]

@Shinigami92 my situation is the same as @francoism90, actually!
I've said tslint because the error is reported as ts(7022), but all I have on my project is prettier.

I can also confirm @jiangmaniu 's experiment: if you rename the file, the error disappears... if you rename it back it still produces no error... very odd.

As for the components it happens into it's extremely random, for instance one component where it happens is structured as follow:

<script lang="ts" setup>
// imports

const emit = defineEmits([EmitsEnum.Close, EmitsEnum.Save])
const filtersStore = useFiltersStore() //pinia
const currentStructure = computed(() => filtersStore.currentFilter?.structureId)

const creationRange = ref({ start: new Date(), end: new Date() })
const stayRange = ref({ start: new Date(), end: new Date() })

const structureLabel = LocaKeys.STRUCTURE
// some more enum assignments as they are used in the template but cannot be called directly via {{}}
</script>

[Shinigami92]

@Tails128 You should update the Issue title accordingly to make it more searchable so potentially others can help

[so1ve]

When I downgraded Volar and then upgraded, the error went away again...

[Tails128]

@Shinigami92 Would

Release 0.40.1 breaks typescript compatibility on script setup.

be a better fit?

[Shinigami92]

@Shinigami92 Would

Release 0.40.1 breaks typescript compatibility on script setup.

be a better fit?

I assume so 👍
A reproduction would still be welcome even if it sounds simple for you
But Johnson needs it to somehow investigate deeper into it

[Shinigami92]

Additionally could you try two things?

1. try to write <script setup lang="ts"> (so swap lang with setup)
2. clean you lock file and node_modules folder and make a full reinstall of your node modules

[francoism90]

@Shinigami92 I have tried both steps, and it still breaks.

Like said before, simple create a Vue3 project with TS and you'll get the same error.

[Shinigami92]

Please read this:

• https://stackoverflow.com/help/minimal-reproducible-example
• https://antfu.me/posts/why-reproductions-are-required

[arpowers]

@johnsoncodehk @Shinigami92 have this issue as well, am having a hard time reproducing it in a minimal reproduction but I believe its related to circular type imports, or additional typing of .vue imports (allowing circular type references where they didn't occur before)

Only thing I know for sure is that the issue started with 0.40.0

As for a reproduction, might not be "minimal" but the Factor repo has the issue:

• clone https://github.com/FactorJS/factor
• open in vscode with latest Volar
• view this file: https://github.com/FactorJS/factor/blob/228514593ad825a7f583f96d9c1182552f547b41/@factor/www/src/App.vue#L20

Finally, i think a lot of recent bug reports since 0.40.0 are this same issue

[mPyth]

I'm getting this problem only in files that use defineAsyncComponent(...), large number of errors is generated in both files - file that imports another one and in imported file. defineAsyncComponent(...) was needed to break circular dependency.
Downgrading to 0.40.0 didn't solve the problem, but downgrading to 0.39.5 was successful (all errors are gone).

[Tails128]

@Shinigami92 i confirm once more @francoism90 's report: both things still create issues!

I'm having a hard time reproduce it as well

[ouuan]

I have a minimal reproduction: https://github.com/ouuan/volar-1708-reproduce

I find this happens when using recursive components with unplugin-vue-components (the components.d.ts generated by this plugin causes this issue, the plugin itself can be removed in the reproduction).

[MrBrax]

I don't use setup but I still get this at https://github.com/MrBrax/twitch-vod-chat/blob/master/src/components/VODPlayer.vue

[DerZade]

I experienced the same issue, when having circular references between components.

Here is a minimal reproducible example. (literally just npm init vue@latest with minimal features and only two components)

Steps to reproduce:

1. Clone Repo
2. Open src/components/A.vue or src/components/B.vue in VS Code with Volar version 0.40.1
3. Error

Hope it helps!

[cn-2k]

In my case downgrading to 0.39.5 solved it.

Edit: I have experiencied many issues arround my code after update to 0.40+ (my components, vue imports, etc), after change to 0.39.5 they have been gone.

[shurco]

Not work after update :(

[DerZade]

My issue seems to be resolved with v0.40.2 🥳

Thanks a lot!

[andrewcourtice]

In my case downgrading to 0.39.5 solved it.

Edit: I have experiencied many issues arround my code after update to 0.40+ (my components, vue imports, etc), after change to 0.39.5 they have been gone.

I've had several problems, especially with global components since v0.39.5 also.

[Tails128]

still broken in 0.40.13

[cn-2k]

still broken in 0.40.13

Refer to #1706 (comment)

[Tails128]

@caio-2k using as would be viable, but...

Looking a bit more into it, it seems the issue relates to the default <slot> element. Hence why it was hard to reproduce: the ts part of the code is fine until a template containing a slot is inserted.

While using as would be a solution, the main issue is there's no way to define a slot as any that I know of... Do you know if there's a way to do it?