Ionic アプリケーションで "Error: Cannot find module '../lib/utils/unsupported.js'" エラーが発生した時の解決方法

2024-04-11

エラー: Ionic 使用時にモジュール '../lib/utils/unsupported.js' を見つけることができません

使用している Ionic バージョンが古い

Ionic 3 以前のバージョンの ionic-framework パッケージでは、../lib/utils/unsupported.js というファイルが使用されていました。しかし、Ionic 4 以降ではこのファイルは廃止されており、代わりに @ionic/core パッケージを使用する必要があります。

解決策：

使用している Ionic バージョンが 3 以前であることを確認します。
Ionic バージョンが 3 以前である場合は、ionic upgrade コマンドを実行して最新バージョンにアップグレードします。
Ionic バージョンが 4 以降である場合は、@ionic/core パッケージをインストールします。

node_modules フォルダが破損している場合、モジュールが見つからないというエラーが発生する可能性があります。

node_modules フォルダを削除し、npm install コマンドを実行して再インストールします。
npm cache clean コマンドを実行して、npm キャッシュをクリアします。

エラーメッセージの詳細
アプリケーションのコード

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ionic App</title>

  <script src="node_modules/@ionic/core/dist/ionic.js"></script>
</head>
<body>
  <ion-app>
    <ion-header>
      <ion-toolbar>
        <ion-title>Ionic App</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <h1>Hello, world!</h1>
    </ion-content>
  </ion-app>
</body>
</html>

// main.js
import { IonicApp, IonPage, IonContent } from '@ionic/core';

@IonPage({
  template: `
    <ion-content>
      <h1>Hello, world!</h1>
    </ion-content>
  `
})
export class MyPage {
  constructor() { }
}

@IonicApp({
  components: [MyPage]
})
export class MyApp {}

new MyApp().start();