Build error inside vue-loader with babel/typescript

[SteFlemmer]

Version

16.8.3

Reproduction link

github.com

Steps to reproduce

1. Clone the minimal reproducible example git clone https://github.com/SteFlemmer/vue-typescript-test.
2. See in componentsVue/App.vue that script language is set to "ts".
3. Run npm run serve / npm run build.
4. See Error during build of the Application:

ERROR in ./componentsVue/App.vue?vue&type=template&id=47901164&ts=true 
Module parse failed: Unexpected token (3:27)
File was processed with these loaders:
 * ./node_modules/vue-loader/dist/templateLoader.js
 * ./node_modules/vue-loader/dist/index.js
You may need an additional loader to handle the result of these loaders.

What is expected?

Template Loader should not fail to load the vue template part, if it is treated as a .ts file

What is actually happening?

Template Part of vue file is treated as js instead of ts (?)

---

Versions used

1. @babel/core@7.15.0
2. @babel/plugin-syntax-dynamic-import@7.8.3
3. @babel/plugin-transform-runtime@7.15.0
4. @babel/preset-env@7.15.0
5. @babel/preset-typescript@7.16.0
6. @typescript-eslint/eslint-plugin@5.3.1
7. @typescript-eslint/parser@5.3.1
8. babel-eslint@10.1.0
9. babel-loader@8.1.0
10. clean-webpack-plugin@0.1.19
11. eslint@7.8.1
12. eslint-loader@4.0.2
13. eslint-plugin-vue@8.2.0
14. fork-ts-checker-webpack-plugin@6.5.0
15. html-webpack-plugin@4.5.2
16. node-sass@6.0.0
17. thread-loader@2.1.3
18. typescript@4.4.4
19. vue-loader@16.8.3
20. webpack@4.36.0
21. webpack-cli@3.1.0
22. webpack-dev-server@3.11.3

[snoozbuster]

I had this same issue. I was able to resolve it by removing the include in my ts-loader webpack rule. It seems like excluding node modules in particular causes this to happen. (in your repro example, I can get rid of the TS error if I remove the "exclude" in your js/ts rule, but it causes a bunch of other errors in other node modules. good luck with that one.

[snoozbuster]

I found the real issue. vue-loader tests a dummy file called test.ts against the webpack rules (presumably to see if typescript compilation is enabled). If this test fails, it apparently doesn't process render functions through the TS compiler. I was able to re-add my normal includes by adding an include for /^test\.ts$/, which makes vue-loader happy.

This is, however, super lame. I would consider this a real bug with vue-loader, that you have to have this completely undocumented magic string in your config.