typescript モジュールが読み込めない
Q&A
Closed
typescriptのモジュールが読み込めない
現状
- モジュールが読み込めていない?
やりたいこと
- モジュールを読み込む
ファイル構成
auth0-sample/
├ node_module/
├ src
│ ├ assets/
│ ├ components/
│ │ └ ProductService.ts
│ ├ router/
│ ├ service/
│ ├ App.vue
│ └ main.ts
└ ...各種ファイル
発生しているエラー
vueauth0 | 1:41:39 AM [vite] Internal server error: Failed to resolve import "@/service/ProductService" from "src/views/Table.vue". Does the file exist?
vueauth0 | Plugin: vite:import-analysis
vueauth0 | File: /app/src/views/Table.vue
vueauth0 | 1 | import { useAuth0 } from "@auth0/auth0-vue";
vueauth0 | 2 | import { ref, onMounted } from "vue";
vueauth0 | 3 | import { ProductService } from "@/service/ProductService";
vueauth0 | | ^
vueauth0 | 4 | onMounted(() => {
vueauth0 | 5 | ProductService.getProducts().then((data) => products.value = data);
vueauth0 | at formatError (/app/node_modules/vite/dist/node/chunks/dep-6e2fe41e.js:39080:46)
vueauth0 | at TransformContext.error (/app/node_modules/vite/dist/node/chunks/dep-6e2fe41e.js:39076:19)
vueauth0 | at normalizeUrl (/app/node_modules/vite/dist/node/chunks/dep-6e2fe41e.js:58360:26)
vueauth0 | at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
vueauth0 | at async TransformContext.transform (/app/node_modules/vite/dist/node/chunks/dep-6e2fe41e.js:58509:57)
vueauth0 | at async Object.transform (/app/node_modules/vite/dist/node/chunks/dep-6e2fe41e.js:39317:30)
vueauth0 | at async doTransform (/app/node_modules/vite/dist/node/chunks/dep-6e2fe41e.js:50043:29)
VSCode上ではパスは通っているように見える
スクリプト
Table.vue
<template>
<p>test</p>
<p>test</p>
<DataTable :value="products" tableStyle="min-width: 50rem">
<Column field="code" products="Code"></Column>
<Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column>
<Column field="quantity" header="Quantity"></Column>
</DataTable>
</template>
<script lang="ts">
import { useAuth0 } from '@auth0/auth0-vue';
import { ref, onMounted } from 'vue';
import { ProductService } from '@/service/ProductService';
onMounted(() => {
ProductService.getProducts().then((data) => (products.value = data));
});
const products = ref();
export default {
name: "table-view",
setup() {
const auth0 = useAuth0();
return {
user: auth0.user
};
}
};
</script>
ProductService.ts
interface Product {
id: string;
code: string;
name: string;
description: string;
image: string;
price: number;
category: string;
quantity: number;
inventoryStatus: string;
rating: number;
}
export const ProductService = {
getProductsData(): Product[] {
return [
{
id: '1000',
code: 'f230fh0g3',
name: 'Bamboo Watch',
description: 'Product Description',
image: 'bamboo-watch.jpg',
price: 65,
category: 'Accessories',
quantity: 24,
inventoryStatus: 'INSTOCK',
rating: 5
},
{
id: '1001',
code: 'nvklal433',
name: 'Black Watch',
description: 'Product Description',
image: 'black-watch.jpg',
price: 72,
category: 'Accessories',
quantity: 61,
inventoryStatus: 'INSTOCK',
rating: 4
},
{
id: '1002',
code: 'zz21cz3c1',
name: 'Blue Band',
description: 'Product Description',
image: 'blue-band.jpg',
price: 79,
category: 'Fitness',
quantity: 2,
inventoryStatus: 'LOWSTOCK',
rating: 3
},
{
id: '1003',
code: '244wgerg2',
name: 'Blue T-Shirt',
description: 'Product Description',
image: 'blue-t-shirt.jpg',
price: 29,
category: 'Clothing',
quantity: 25,
inventoryStatus: 'INSTOCK',
rating: 5
},
{
id: '1004',
code: 'h456wer53',
name: 'Bracelet',
description: 'Product Description',
image: 'bracelet.jpg',
price: 15,
category: 'Accessories',
quantity: 73,
inventoryStatus: 'INSTOCK',
rating: 4
},
{
id: '1005',
code: 'av2231fwg',
name: 'Brown Purse',
description: 'Product Description',
image: 'brown-purse.jpg',
price: 120,
category: 'Accessories',
quantity: 0,
inventoryStatus: 'OUTOFSTOCK',
rating: 4
}
];
},
getProducts(): Promise<Product[]> {
return Promise.resolve(this.getProductsData());
}
};
0