@shopify/shopify-api: Cannot read property 'initialize' of undefinedの解決方法

はじめに

Shopifyの公式ライブラリを使いOAuth認証・認可→アクセストークン取得をしようとしたとき、公式ドキュメント通りでは動かなかったので、その対処法を残しておきます。

環境

• 実行環境
  • OS：Windows 11 Home 21H2
  • 言語
    • Node.js
      • version: 16.11.1
    • npm
      • version: 8.0.0
  • 使用しているライブラリ・フレームワーク
    • Express
      • version: 4.18.1
    • @shopify/shopify-api (shopify-api-node Shopify公式のライブラリ)
      • version: ^5.0.1

解決法だけ知りたい方

index.js

  // 下記の公式ドキュメントの書き方（エラーが起きる）
  // import Shopify, { ApiVersion } from '@shopify/shopify-api'
  // 下記だと動く
  import { Shopify, ApiVersion } from '@shopify/shopify-api'

やろうとしたこと

• 公式ライブラリを使って、OAuth認証を行いアクセストークンを取得する。
• 取得したアクセストークンでAdmin APIを叩く。

エラーの発生原因

• 発生原因
  公式ライブラリを使って、Shopify.Contextを初期化するメソッド(initialize)を呼ぼうとしたら、unidefinedが返ってきてしまう。
  →Shopifyオブジェクトのインポートが上手くできていない。

公式ドキュメントの解説では、Shopifyオブジェクトをデフォルトインポートするようになっているが、これでは動かなかった。(以下コードとエラー画面)

ソースコード（公式ドキュメントから引用）

index.js

    import express from 'express';
    import Shopify, { ApiVersion } from '@shopify/shopify-api'; // ここが間違っている
    require('dotenv').config();

    const app = express();

    const { API_KEY, API_SECRET_KEY, SCOPES, SHOP, HOST, HOST_SCHEME } = process.env;

    Shopify.Context.initialize({
      API_KEY,
      API_SECRET_KEY,
      SCOPES: [SCOPES],
      HOST_NAME: HOST.replace(/https?:\/\//, ""),
      HOST_SCHEME,
      IS_EMBEDDED_APP: {boolean},
      API_VERSION: ApiVersion.{version} // all supported versions are available, as well as "unstable" and "unversioned"
    });

エラー画面

Shopify.Context.initialize({
                ^
TypeError: Cannot read property 'initialize' of undefined

解決方法

• デフォルトインポートから名前付きインポートに変えると動く。
  • こちらのGithub Issueを参考にしました。

コード

index.js

  // 下記の公式ドキュメントの書き方（エラーが起きる）
  // import Shopify, { ApiVersion } from '@shopify/shopify-api'
  // 下記だと動く
  import { Shopify, ApiVersion } from '@shopify/shopify-api'

• 名前付きインポートでインポートすると動きました。
  • Githubのコードを見てましたが、デフォルトエクスポートされていたので、なぜ公式ドキュメント通りだと動かないのかは分かっていません。
  • わかる方がいましたら、コメント欄で指摘していただけると幸いです。

参考資料

参考にさせていただいたGithub Issue
ライブラリの公式Docs
JavaScript(ES6)のインポート方法