node.js環境でのapp構築 API_KEYが取得できない

[cheche0830]

https://github.com/Shopify/shopify-api-node/blob/main/docs/getting_started.md

を参考にnode.js環境でカスタムアプリを通してadmin APIの操作を行いたいのですが、環境構築で戸惑っております。

参考サイトの工程はすべてすませ（アプリも管理画面で作成後、トークン取得済み）たのですが、

yarn startをすると下記のエラーとなります。

src/index.ts:7:3 - error TS2322: Type 'string | undefined' is not assignable to type 'string'.
  Type 'undefined' is not assignable to type 'string'.

7   API_KEY,
    ~~~~~~~

  node_modules/@shopify/shopify-api/dist/base-types.d.ts:4:5
    4     API_KEY: string;
          ~~~~~~~
    The expected type comes from property 'API_KEY' which is declared here on type 'ContextParams'

src/index.ts:8:3 - error TS2322: Type 'string | undefined' is not assignable to type 'string'.
  Type 'undefined' is not assignable to type 'string'.

8   API_SECRET_KEY,
    ~~~~~~~~~~~~~~

  node_modules/@shopify/shopify-api/dist/base-types.d.ts:5:5
    5     API_SECRET_KEY: string;
          ~~~~~~~~~~~~~~
    The expected type comes from property 'API_SECRET_KEY' which is declared here on type 'ContextParams'

src/index.ts:9:12 - error TS2322: Type 'string | undefined' is not assignable to type 'string'.
  Type 'undefined' is not assignable to type 'string'.

9   SCOPES: [SCOPES],
             ~~~~~~

src/index.ts:10:14 - error TS2532: Object is possibly 'undefined'.

10   HOST_NAME: HOST.replace(/https?:\/\//, ""),
                ~~~~

src/index.ts:18:7 - error TS6133: 'ACTIVE_SHOPIFY_SHOPS' is declared but its value is never read.

18 const ACTIVE_SHOPIFY_SHOPS: { [key: string]: string | undefined } = {};
         ~~~~~~~~~~~~~~~~~~~~

Found 5 errors in the same file, starting at: src/index.ts:7

index.tsは下記の感じです。

import Shopify, { ApiVersion } from '@shopify/shopify-api';
require('dotenv').config();

const { API_KEY, API_SECRET_KEY, SCOPES, 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: true,
  API_VERSION: ApiVersion.October21 // all supported versions are available, as well as "unstable" and "unversioned"
});

// Storing the currently active shops in memory will force them to re-login when your server restarts. You should
// persist this object in your app.
const ACTIVE_SHOPIFY_SHOPS: { [key: string]: string | undefined } = {};

.envファイルは以下です。

SHOP=https://testsite.myshopify.com
API_KEY=df80870a5a38ff4a61ee2acb //dummy
API_SECRET_KEY=7d4a70d4363b1219bced261c //dummy
SCOPES=write_order_edits,read_order_edits
HOST=http://4447-2400-2411-1803-f700-303d-a47e-3cfc-8cbf.ngrok.io
HOST_SCHEME=http

どうもこの.envファイルが読み込まれてないようなのですが、

ちゃんとプロジェクトのルートトップにあるのですが、原因わかりますでしょうか？

node_moduleのなかにdotenvモジュールもちゃんとあるようなのですが・・

ご教授お願いいたします。

[Anonymous_44fbe07fc59d9ccaacd70575fd5a5155]

Cheche0830 様

お世話になっております。

株式会社フルバランスのドウケと申します。

「Type ‘string | undefined’ is not assignable to type ‘string’.」

上記エラーは、

node_modules/@shopify/shopify-api/dist/base-types.d.tsで、API_KEYがstring型と宣言していますが、index.tsにおいては、API_KEYがstring型またはundefined型を取るので、undefined型のものをstring型であるAPI_KEYに代入できませんよ、と言われています。（こちらもtypescriptのエラーになります。）

そのため、推測ですが、API_KEYがundefined型でないよう担保してあげればよいのだと思います。（下記の方法など）

const API_KEY = process.env.API_KEY ? process.env.API_KEY : "";

もし、API_KEYでうまくイケば他のものでも試していただけますと幸いです。

また、差し出がましく恐縮ですが、前回のご質問と合わせるとtypescriptを使わなくてもadmin APIの操作はお試しいただけると思いますので、拡張子をtsからjsにされれば、今回のようなtypescriptのエラーは発生しなくなるかと思います。

加えて、お手間でなければ、Shopify CLIで構築されるのも一つの手かと思います。

https://shopify.dev/apps/tools/cli （jsベースでアプリの雛形が構築されます。）

ご参考になければ幸いです。

[cheche0830]

ご回答ありがとうございます！そうですね。typescriptは正直本筋ではないので抜いた状態でまた一から検証したいと思います！