[Vue.js] Error during build and in terminal (yarn encore --dev watch or yarn build)

[gurgenhakobyan]

I have one strange problem. When I include a component inside another another component (controller) I get not found error in terminal and when running yarn build.

But everything works as expected in the browser and no console errors.

So I'm Trying to include Loading.vue component inside CRUDIndex.vue file (which is a controller as described in Symfony UX documentation).

I opened issue here and not stackoverflow because it looks like an inconsistency as it works as expected, but throwing error in the terminal.

Here is the error in terminal:

ERROR  Failed to compile with 1 errors                                                                                                   6:17:51 PM

 error  in /var/www/html/project/assets/vue/controllers/CRUDIndex.vue.ts                                                                  6:17:51 PM

[tsl] ERROR in /var/www/html/project/assets/vue/controllers/CRUDIndex.vue.ts(5,21)
      TS2307: Cannot find module '../components/Common/Loading.vue' or its corresponding type declarations.

[gurgenhakobyan]

Update: When I remove .enableTypeScriptLoader() from webpack.config.js and remove all types the error is gone.

So typescript is not supported?

[weaverryan]

Hey!

Can you what your parent CrudIndex.vue.ts looks like?

Could this be the issue? https://github.com/symfony/webpack-encore/issues/702 - it sounds like, if anything, an Encore problem.

[gurgenhakobyan]

It could be. I ended up removing typescript related stuff. But anyway there wasn't CrudIndex.vue.ts it was just CrudIndex.vue and inside of it just included another component and everything was working in the browser, except that terminal error, so very likely encore problem.

I'll try to bring back typescript support and try the solution and see if the suggested solution in your provided link works an will debug a little more. Will let you know.

Thanks for your help @weaverryan 👍

[BurningDog]

I had the same issue - to fix it, I added shims-vue.d.ts to the ./assets/vue/ folder with the following contents:

// See https://stackoverflow.com/a/70803320/339213
// If we don't include this file, we get this compile error whenever we try to load a .vue file:
// TS2307: Cannot find module '@/components/search/Search.vue' or its corresponding type declarations.
declare module '*.vue';

This should be included in the documentation.