vuepress-plugin-typescript introduce vue-loader problems

[mmc41]

When using vuepress-plugin-typescript v0.3.0 I get strange problems for plain typescript file in my project. The content of the typescript file does not seem to matter. The page appears to work but in the console I get errors like below:

` [HMR] Waiting for update signal from WDS... client?cae4:150 [WDS] Errors while compiling. Reload prevented.

[tsl] ERROR in /xxx/docs/.vuepress/jabraService.ts(6,24) TS2307: Cannot find module '!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js' or its corresponding

[tsl] ERROR in /xxx/docs/.vuepress/jabraService.ts(19,20) TS2307: Cannot find module './jabraService.ts?vue&type=custom&index=0&blockType=void' or its corresponding type `

Note that the error is misleading because the jabraService.ts does NOT attempt to load anything vue related like componentNormalizer.

[mmc41]

@meteorlxy Should this be assigned to you?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[meteorlxy]

@mmc41 Sorry for delay.

Could you please provide a reproduce repo?

[DamSenViet]

I ran into the same problem on top of another and can provide my repository to reproduce the issue.

https://github.com/DamSenViet/acpatterns-js

git clone https://github.com/DamSenViet/acpatterns-js.git
git checkout 7ca4ce8fcded3867626c4b4f19f24b98ccca5738
npm i
npm run build:esm
npm run dev:docs

After launching the docs dev server, go to the 'Guide' tab in the navigation bar and force refresh the page.

Now to get the componentNormalizer error, you need to edit docs/.vuepress/components/Introduction.vue. The problem seems appear when vuepress has to recompile for the first time after starting up.

Find a way to force vuepress to recompile with a new hash. I recommend removing the comma on line number 22 or uncommenting/commenting lines 13 and 22. Wait for vuepress to finish the first recompile. By now you should have the error, if not try another change, undo it and eventually you should get the error.

If the above that doesn't work, stop the vuepress server and do npm run dev:docs again. And try to force it to recompile once more. That should for sure get the error.

Sorry for the commit reference spam. I tried a couple combinations to get this bug isolated.

[campbells-snap]

While not using Vuepress, I had this same issue occur with a Vue-based project.

In my index.js file, importing any regular typescript file resolved the issue - I suspect the TypeScript compiler wasn't looking for the `vue-shims.d.ts file if it didn't see a reason to do so (and importing a .vue file didn't trigger it for whatever reason).

Notably if I start it with the import and then delete it, the debug server continues to work fine.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[JulioJu]

This bug is not produced when we trigger yarn vuepress build docs && yarn anywhere -h localhost -d docs/.vuepress/dist. It is produced when we trigger yarn vuepress dev docs . The main consequence of this problem is that in this case there is no Hot Reload (in fact in console we have message [WDS] Errors while compiling. Reload prevented.).

Not that when there was xxx.ts file, when we edit this file the bug disappears for the current yarn vuepress dev docs instance. When we restart a new one, it fails again.

Solution: You could create vue file with only TypeScript elements. Replace your typescript file by a vue file. Surround TypeScript code by a tag <script lang="ts">.

You should let at list one empty TypeScript file, otherwise tsc complain with error described at https://stackoverflow.com/questions/41211566/tsconfig-json-buildno-inputs-were-found-in-config-file .