<div id="readability-page-1" class="page"><div><h4 data-ke-size="size20">원인 TS2307:&nbsp;Cannot&nbsp;find&nbsp;module&nbsp;'@/App.vue'&nbsp;error</h4>
<figure data-ke-mobilestyle="widthOrigin" data-origin-width="1296" data-origin-height="236"><span data-url="https://blog.kakaocdn.net/dn/bryBUN/btsg9PnOj71/3T5T7ZLUmOAYok9qevHPBk/img.png" data-lightbox="lightbox"><img src="https://blog.kakaocdn.net/dn/bryBUN/btsg9PnOj71/3T5T7ZLUmOAYok9qevHPBk/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-origin-width="1296" data-origin-height="236"></span></figure>


<p data-ke-size="size16">위와 같이 계속 TS 파일에서 @로 시작하는 절대 경로를 못찾아서 이상했다.&nbsp;</p>
<p data-ke-size="size16">빌드를 하면, 실제 경로를 잘 찾는다.&nbsp;</p>
<figure data-ke-mobilestyle="widthOrigin" data-origin-width="670" data-origin-height="224"><span data-url="https://blog.kakaocdn.net/dn/12e0S/btshb5KicsO/A5o7r8JaogZ4JqLNqQdYp1/img.png" data-lightbox="lightbox" data-alt="tsconfig.json"><img src="https://blog.kakaocdn.net/dn/12e0S/btshb5KicsO/A5o7r8JaogZ4JqLNqQdYp1/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-origin-width="670" data-origin-height="224"></span><figcaption>tsconfig.json</figcaption>
</figure>
<figure data-ke-mobilestyle="widthOrigin" data-origin-width="812" data-origin-height="494"><span data-url="https://blog.kakaocdn.net/dn/zbLaq/btsg24UflqQ/qmD6WUC69b4cfrIBXIJElk/img.png" data-lightbox="lightbox" data-alt="vite.config.ts"><img src="https://blog.kakaocdn.net/dn/zbLaq/btsg24UflqQ/qmD6WUC69b4cfrIBXIJElk/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-origin-width="812" data-origin-height="494"></span><figcaption>vite.config.ts</figcaption>
</figure>

<h4 data-ke-size="size20">해결방법</h4>
<p data-ke-size="size16">vue3의 경우, vite-env.d.ts 파일에 vue 파일에 대한 타입을 추가 해주어야 한다고 한다.&nbsp;</p>
<p data-ke-size="size16">ref. <a href="https://lobotuerto.com/notes/build-a-vue3-typescript-dev-environment-with-vite" target="_blank" rel="noopener">https://lobotuerto.com/notes/build-a-vue3-typescript-dev-environment-with-vite</a></p>
<p data-ke-size="size16">ref. <a href="https://stackoverflow.com/questions/42002394/importing-vue-components-in-typescript-file" target="_blank" rel="noopener">https://stackoverflow.com/questions/42002394/importing-vue-components-in-typescript-file</a></p>
<figure id="og_1684845280629" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="Build a Vue 3 + TypeScript dev environment with Vite - lobo_tuerto's notes" data-og-description="Production grade DX for all your web projects." data-og-host="lobotuerto.com" data-og-source-url="https://lobotuerto.com/notes/build-a-vue3-typescript-dev-environment-with-vite" data-og-url="https://lobotuerto.com/notes/build-a-vue3-typescript-dev-environment-with-vite" data-og-image="https://scrap.kakaocdn.net/dn/5HUZV/hySJnBylsd/IskbEnscPfpjXSscNfnuvk/img.jpg?width=1024&amp;height=683&amp;face=0_0_1024_683"><a href="https://lobotuerto.com/notes/build-a-vue3-typescript-dev-environment-with-vite" target="_blank" rel="noopener" data-source-url="https://lobotuerto.com/notes/build-a-vue3-typescript-dev-environment-with-vite">

<div>
<p data-ke-size="size16">Build a Vue 3 + TypeScript dev environment with Vite - lobo_tuerto's notes</p>
<p data-ke-size="size16">Production grade DX for all your web projects.</p>
<p data-ke-size="size16">lobotuerto.com</p>
</div>
</a><img src="https://scrap.kakaocdn.net/dn/5HUZV/hySJnBylsd/IskbEnscPfpjXSscNfnuvk/img.jpg?width=1024&amp;height=683&amp;face=0_0_1024_683"></figure>
<pre id="code_1684845084318" data-ke-language="typescript" data-ke-type="codeblock"><code>declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  // eslint-disable-next-line @typescript-eslint/ban-types, @typescript-eslint/no-explicit-any
  const component: DefineComponent&lt;{}, {}, any&gt;
  export default component
}</code></pre>
<p data-ke-size="size16">vue2의 경우&nbsp;</p>
<pre id="code_1684845130294" data-ke-language="typescript" data-ke-type="codeblock"><code>declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}</code></pre>
<figure data-ke-mobilestyle="widthOrigin" data-origin-width="974" data-origin-height="304"><span data-url="https://blog.kakaocdn.net/dn/chOMZV/btshaqafy4i/E9TL6EgvRIHfOZLYiqnlt0/img.png" data-lightbox="lightbox"><img src="https://blog.kakaocdn.net/dn/chOMZV/btshaqafy4i/E9TL6EgvRIHfOZLYiqnlt0/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-origin-width="974" data-origin-height="304"></span></figure>

<p data-ke-size="size16">위와 같이 타입 설정을 추가하면, error 표시가 사라진다.&nbsp;</p></div></div>

Seungdols Company

seungdols

원인 TS2307: Cannot find module '@/App.vue' error  위와 같이 계속 TS 파일에서 @로 시작하는 절대 경로를 못찾아서 이상했다. 빌드를 하면, 실제 경로를 잘 찾는다.  해결방법 vue3의 경우, vite-env.d.ts 파일에 vue 파일에 대한 타입을 추가 해주어야 한다고 한다. ref. https://lobotuerto.com/notes/build-a-vue3-typescript-dev-environment-..

[Vue] TS2307: Cannot find module '@/App.vue' error

댓글