はじめに

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'

やろうとしたこと

エラーの発生原因

発生原因
公式ライブラリを使って、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)のインポート方法