[Q&A] Capacitorでプラグインをimportできない

Capacitorでプラグインをimportできない

解決したいこと

Capacitorでプラグインを使用してアプリを開発しています。
その際にエラーが発生するため、これを解決したいです。

目的はCapacitorでプラグインが利用できるようになることです。

発生している問題・エラー

TypeError: Failed to resolve module specifier "@capacitor/filesystem". Relative references must start with either "/", "./", or "../".

該当するソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BookManager</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <header>
        <h1>BookManager</h1>
    </header>
    <main>
        <form id="book-form">
            <label for="title">タイトル:</label>
            <input type="text" id="title" name="title" required>
            
            <label for="author">著者:</label>
            <input type="text" id="author" name="author" required>
            
            <label for="pages">ページ数:</label>
            <input type="number" id="pages" name="pages" required>
            
            <button type="submit">本を追加</button>
        </form>
        <button id="picture-button" type="button">写真を撮るボタン</button>
        <img id="image-element" src="" alt="Your Picture Will Appear Here">
        <ul id="book-list"></ul>
    </main>
    <script src="script.js"></script>
</body>
</html>

import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';
import { Camera, CameraResultType } from '@capacitor/camera';

// 型アサーションを使って、HTML要素の型を明示します
const bookForm = document.getElementById('book-form') as HTMLFormElement;
const titleInput = document.getElementById('title') as HTMLInputElement;
const authorInput = document.getElementById('author') as HTMLInputElement;
const pagesInput = document.getElementById('pages') as HTMLInputElement;
const bookList = document.getElementById('book-list') as HTMLUListElement;
const imageElement = document.getElementById('image-element') as HTMLImageElement;
const takePictureButton = document.getElementById('take-picture-button') as HTMLButtonElement;

bookForm.addEventListener('submit', async function(event: Event) {
    event.preventDefault();
    console.log("submit button tapped");

    const title = titleInput.value;
    const author = authorInput.value;
    const pages = pagesInput.value;
    
    const bookData = {
        title: title,
        author: author,
        pages: pages
    };

    // Save the book data to a file
    try {
        await Filesystem.writeFile({
            path: 'books.json',
            data: JSON.stringify(bookData),
            directory: Directory.Documents,
            encoding: Encoding.UTF8,
        });
        console.log('Book data saved successfully');
    } catch (error) {
        console.error('Error saving book data:', error);
    }

    const li = document.createElement('li');
    li.textContent = `タイトル: ${title}, 著者: ${author}, ページ数: ${pages}`;
    
    bookList.appendChild(li);
    
    bookForm.reset();
});

const takePicture = async (): Promise<void> => {
  console.log("picture button tapped");
  try {
    const image = await Camera.getPhoto({
      quality: 90,
      allowEditing: true,
      resultType: CameraResultType.Uri
    });

    // image.webPath will contain a path that can be set as an image src.
    const imageUrl = image.webPath;

    // Get the image element and set the src to the image URL if imageUrl is not undefined
    if (imageUrl && imageElement) {
      imageElement.src = imageUrl;
    }
  } catch (error) {
    console.error('Error taking picture:', error);
  }
};

// Attach the takePicture function to the button's click event
if (takePictureButton) {
  takePictureButton.addEventListener('click', takePicture);
}

環境情報
VScode　1.88.1
Node.js v20.12.2
Chrome 126.0.6478.183
Capacitor 10.5.0 (npm cap -vの結果です)
(他に必要なバージョンがありましたら、コメントいただけると助かります。)

自分で試したこと

package.jsonのtypeをmoduleにしましたがうまくいきませんでした。

また、ビルド手順からエラーが出るまでの流れは
npx tsc で tsファイルをトランスパイルする。
→ distディレクトリにscript.jsが作成される。
→ npx cap sync でandroidディレクトリと同期する
→ cd ./android でandroidディレクトリに移動する。
→ ./gradlew assembleDebug でデバッグ用のアプリをビルドする
→ adb install -r app/build/outputs/apk/debug/app-debug.apk でアプリを端末にインストールする。
→ カメラがうまく起動しないのでChrome://inspectで確認する。
→ 上記のエラーが発生している。

1Answer

@nak435 posted at 2024-07-22

TypeError: Failed to resolve module specifier "@capacitor/filesystem". Relative references must start with either "/", "./", or "../".

エラーメッセージに出ている内容は対処したのでしょうか？

0Like

Comments

@389watagashi
Questioner
返信ありがとうございます。
capacitorの公式サイトのコードを写しているため正しいモジュールの場所がわからないです。

VScodeを使っていますが試しに
import { Filesystem, Directory, Encoding } from './@capacitor/filesystem';とすると
モジュール './@capacitor/filesystem' またはそれに対応する型宣言が見つかりません。ts(2307)
というエラーが出てきます。

import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';と書いた後にカーソルを重ねると
module "/Users/ユーザ名/AndroidStudioProjects/BookManager20240715/node_modules/@capacitor/filesystem/dist/esm/index"
と出てきます。

@nak435

逆に書いても、同じ箇所で同じエラーになるのでしょうか？

import { Camera, CameraResultType } from '@capacitor/camera';
import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';