この記事を書こうと思った背景と、記事を読ん得られるもの
- Shopifyアプリを構築する必要があったので、その手順と備忘録です。
- ハマった箇所があったのでその説明
- 結論だけいってしまうと、Node 17で構築しようとするとエラーがでるので、公式推奨の16.13.1にすべき（21年12月時点）
- Nodeバージョン変更するのに便利なツールを紹介します
記事の対象者
- Shopifyアプリ構築者
- 未来の自分
環境
- MacOS 10.15.6
- Node 17.2.0 => 16.13.1に変更
- Homebrew 3.3.7
参考にした記事・動画
Shopify Japanが出してる動画
- 2021年12月現在で、少し古い内容だが全体像をつかむのにためになる。動画内で叩くShopifyAppCLIコマンドが少し古いので、その場合は公式ドキュメントを読んで確認をする。
Shopify App CLIの導入
- https://shopify.dev/apps/tools/cli/installation を参考
brew tap shopify/shopifybrew install shopify-cli
アプリを構築
-
shopify app create node-
shopify app createとうつと、php,node,railsのどれかオプションを選べといわれる - このコマンドをうつと、聞かれること
- アプリの名前
- 公開アプリか、カスタムアプリか
- どのストアにいれるか
-
cd <先ほど決めたアプリの名前>-
shopify app serve- この時点でアプリが起動され、ngrokが自動で決めたURLを教えてもらえる。そのURLにアクセスして、インストールを承認すれば埋め込みアプリが構築される。
つまった箇所
- Nodeのverが17で
shopify app serveと打つと、下記のようなエラーが表示された。
⭑ To install and start using your app, open this URL in your browser:
https://xxxxxxx.ngrok.io/auth?shop=xxxxxxxxx.myshopify.com
┏━━ Running server… ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┃
┃ > shopify-app-node@1.0.0 dev
┃ > cross-env NODE_ENV=development nodemon ./server/index.js --watch ./server/index.js
┃
┃ [nodemon] 2.0.15
┃ [nodemon] to restart at any time, enter `rs`
┃ [nodemon] watching path(s): server/index.js
┃ [nodemon] watching extensions: js,mjs,json
┃ [nodemon] starting `node ./server/index.js`
┃ Browserslist: caniuse-lite is outdated. Please run:
┃ npx browserslist@latest --update-db
┃ node:internal/modules/cjs/loader:488
┃ throw e;
┃ ^
┃
┃ Error: Package subpath './lib/parser' is not defined by "exports" in /path/node_modules/next/node_modules/postcss/package.json
┃ at new NodeError (node:internal/errors:371:5)
┃ at throwExportsNotFound (node:internal/modules/esm/resolve:429:9)
┃ at packageExportsResolve (node:internal/modules/esm/resolve:683:3)
┃ at resolveExports (node:internal/modules/cjs/loader:482:36)
┃ at Function.Module._findPath (node:internal/modules/cjs/loader:522:31)
┃ at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27)
┃ at Function.Module._load (node:internal/modules/cjs/loader:778:27)
┃ at Module.require (node:internal/modules/cjs/loader:999:19)
┃ at require (node:internal/modules/cjs/helpers:102:18)
┃ at Object.552 (/path/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:11590)
┃ at __webpack_require__ (/path/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:11735)
┃ at Object.560 (/path/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:400)
┃ at __webpack_require__ (/path/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:11735)
┃ at Object.290 (/path/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:260)
┃ at __webpack_require__ (/path/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:11735)
┃ at Object.632 (/path/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:3733) {
┃ code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
┃ }
┃
┃ Node.js v17.2.0
┃ [nodemon] app crashed - waiting for file changes before starting...
- これとまったくエラーはぐぐった感じなかったが、近いエラーがStack overflowにあった。また、有識者に相談したところ、Nodeまわりはバージョンの違いで不具合が起きることがあるので、公式の推奨にした方がいいといわれたので公式の推奨verをチェック。
- 21年12月時点
- Nodeのバージョンを17 → 16.13.1に変更することで解決した
Nodeバージョン変更するのに便利なツールを紹介
- n （ https://www.npmjs.com/package/n）
- ターミナルで簡単に切り替えられる
- 下記は 参考にした記事
- 詳細は上記のリンクからご確認お願いします。下記は、実際に自分が打ったコマンドです
npm install -g nn ls-remote --alln 16.13.1sudo n 16.13.1node --version