質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

解決済

1回答

2518閲覧

Nuxt2.8.x + typescriptにて「Cannot find module '~/hoge.vue'.ts(2307)」エラーが発生する

mogataro

総合スコア12

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

0クリップ

投稿2019/08/04 04:38

編集2019/08/04 04:45

前提・実現したいこと

Nuxt+TypeScriptの環境構築を行なっているのですが、
import文にて、Cannot find module '~/components/Logo.vue'.ts(2307)というエラーが発生します。
pathはあっているので、何故moduleを見つけられないのか不明です。

ご教示いただけますと幸いです。

作業中のGitHubです。
https://github.com/mogataro/typescript-app

発生している問題・エラーメッセージ

Cannot find module '~/components/Logo.vue'.ts(2307) Cannot find module '~/components/VuetifyLogo.vue'.ts(2307)

該当のソースコード

index.ts

ts

1import { Component, Vue } from 'nuxt-property-decorator' 2import Logo from '~/components/Logo.vue' 3import VuetifyLogo from '~/components/VuetifyLogo.vue' 4 5@Component({ 6 components: { 7 Logo, 8 VuetifyLogo 9 } 10}) 11export default class extends Vue { 12 mounted() { 13 console.log('typescriptです') 14 } 15}

index.vue

vue

1<template> 2 <v-layout column justify-center align-center> 3 <v-flex xs12 sm8 md6> 4 <div class="text-center"> 5 <logo /> 6 <vuetify-logo /> 7 </div> 8 <v-card> 9 <v-card-title class="headline"> 10 Welcome to the Vuetify + Nuxt.js template 11 </v-card-title> 12 <v-card-text> 13 <p> 14 Vuetify is a progressive Material Design component framework for 15 Vue.js. It was designed to empower developers to create amazing 16 applications. 17 </p> 18 <p> 19 For more information on Vuetify, check out the 20 <a href="https://vuetifyjs.com" target="_blank"> documentation </a>. 21 </p> 22 <p> 23 If you have questions, please join the official 24 <a href="https://chat.vuetifyjs.com/" target="_blank" title="chat"> 25 discord </a 26 >. 27 </p> 28 <p> 29 Find a bug? Report it on the github 30 <a 31 href="https://github.com/vuetifyjs/vuetify/issues" 32 target="_blank" 33 title="contribute" 34 > 35 issue board </a 36 >. 37 </p> 38 <p> 39 Thank you for developing with Vuetify and I look forward to bringing 40 more exciting features in the future. 41 </p> 42 <div class="text-xs-right"> 43 <em><small>&mdash; John Leider</small></em> 44 </div> 45 <hr class="my-3" /> 46 <a href="https://nuxtjs.org/" target="_blank"> 47 Nuxt Documentation 48 </a> 49 <br /> 50 <a href="https://github.com/nuxt/nuxt.js" target="_blank"> 51 Nuxt GitHub 52 </a> 53 </v-card-text> 54 <v-card-actions> 55 <v-spacer /> 56 <v-btn color="primary" nuxt to="/inspire"> 57 Continue 58 </v-btn> 59 </v-card-actions> 60 </v-card> 61 </v-flex> 62 </v-layout> 63</template> 64 65<script lang="ts" src="./index.ts" /> 66

補足情報(FW/ツールのバージョンなど)

エディタ:vscode

Nuxt.js v2.8.1
│ Running in development mode (spa)
│ TypeScript support is enabled

作業中のGitHubです。
https://github.com/mogataro/typescript-app

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

環境設定そのものを修正し、解決しました。

投稿2019/08/04 08:42

mogataro

総合スコア12

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hikaruna

2019/10/12 22:03

なにが原因だったのか、どう修正したのか書いてほしいです
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問