yoshikazu0110
@yoshikazu0110 (h y)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

typescript モジュールが読み込めない

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上ではパスは通っているように見える

image.png

スクリプト

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

1Answer

Your answer might help someone💌