

### 実現したいこと

Vite + Vue3でmoduleのimportを適切に処理できるようにしたい。

### 前提

Vite + Vue3 + （Amplify）で、main.ts内で、以下のように定義したところ、named exportエラーが発生してしまいます。

[code]

    import { createApp } from 'vue'
    import App from './App.vue'
    import router from './router'
    
    import { Project } from '@/API';
    
    import { Amplify } from 'aws-amplify';
    import awsExports from './aws-exports';
    Amplify.configure({
        ...awsExports,
    });
    
    const app = createApp(App)
    app.use(router)
    app.mount('#app')
    
[/code]

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

[code]

    Uncaught SyntaxError: The requested module '/src/API.ts?t=1682717823643' does not provide an export named 'Project'
    
[/code]

### 試したこと

  * tsconfig.jsonにtargetとmoduleでesnextを設定
  * tsconfig.jsonにtype: moduleを設定
  * API.tsを絶対パスしてい等で設定する（Aliasの問題の可能性）

### 補足情報（FW/ツールのバージョンなど）

mswでmock情報をgraphql-
codegenを使って、mockデータを自動生成して、handler定義をしようとしており、mockデータが型定義を読み込む場合に同じエラーが発生しており、試行錯誤の上で、一旦この問題にたどり着きました。vite
+ vue3でHelloWorldなどのcomponentからは上記の@/APIの定義で同様の方法で問題なく動作しています。

ES
module絡みだと思ってはいるのと、app.mount後とその前でmoduleのインポートの動作が変わっているような気はしているのですが、具体的な対応方法が検討がつかない状況です。


CC BY-SA 4.0
2023-04-30T16:11:13.577
94695
2023-04-30T16:11:13.577
43850
question
vue.js
vue3 + vite で named exportエラー