LoginSignup
0
0

More than 1 year has passed since last update.

@k-kztk

Shopify App CLIとNode.jsを使用してShopifyアプリを構築する

Last updated at Posted at 2021-12-10

この記事を書こうと思った背景と、記事を読ん得られるもの

　- 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が出してる動画

Shopify App 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...

Nodeバージョン変更するのに便利なツールを紹介

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0