SCSS processing causes TypeScript errors in single file components

[msarris]

Vue version

3.3.4

Link to minimal reproduction

https://github.com/msarris/vue-typescript-bug

Steps to reproduce

1. Clone the repository
2. Yarn (or NPM) install
3. Perform the Webpack build (npx webpack from project root)

What is expected?

A successful build without errors is expected.

What is actually happening?

A TypeScript error is displayed:

ERROR in /path/to/App.vue.ts
5:21-25
[tsl] ERROR in /path/to/App.vue.ts(5,22)
      TS7031: Binding element 'name' implicitly has an 'any' type.

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz    
    Memory: 13.78 GB / 31.69 GB
  Binaries:
    Node: 18.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD  
    npm: 8.17.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 114.0.5735.199
    Edge: Spartan (44.19041.1266.0), Chromium (114.0.1823.67)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    vue: ^3.3.4 => 3.3.4

Any additional comments?

The error seems to be triggered by the processing of SCSS, but only when there's both an include of SCSS in the entrypoint and a <style> tag in the Vue component.

When you remove the import './_style.scss'; line from /src/script.js the error disappears. It also disappears when the <style lang="scss"> element is removed from /src/App.vue.

The error can also be removed by changing "noImplicitAny": true in tsconfig.json to false.

I also tested this with Vite, there the issue is not present there.

It seems like a very strange interplay between sass-loader, TypeScript, Webpack and Vue.

I have no idea in which package the bug should be fixed, but I thought this repository is probably a good place to open the issue because the error is reported in the Vue component.

[Shyam-Chen]

Use vue-cli. vue-cli is based on webpack.

[edison1105]

This isn't a core issue. It looks more like an issue with ts-loader.