Shopify アプリに関する話題はこちら
npm init @Shopify/app@latestをコマンドしましたがエラーが発生されています。
解決方法を教えていただけますでしょうか。
エラー内容:
$ npm init @Shopify/app@latest
> npx
> create-app
Welcome. Let’s get started by naming your app project. You can change it later.
╭─ error ──────────────────────────────────────────────────────────────────────╮
│ │
│ Failed to prompt: │
│ │
│ Your project name? │
│ │
│ This usually happens when running a command non-interactively, for example │
│ in a CI environment, or when piping input from another process. │
│ │
│ To resolve this, specify the option in the command, or run the command in │
│ an interactive environment such as your local terminal. │
│ │
╰──────────────────────────────────────────────────────────────────────────────╯
npm error code 1
npm error path C:\Users\xxx\OneDrive\デスクトップ\tesst
npm error command failed
npm error command C:\WINDOWS\system32\cmd.exe /d /s /c create-app
npm error A complete log of this run can be found in: C:\Users\xxx\AppData\Local\npm-cache\_logs\2024-08-25T14_42_56_469Z-debug-0.log
Device: Window 10
Git version: 2.38.1.windows.1
Node version: v20.17.0
shopify version: 3.66.0
他のNPMをコマンドしましたがエラーがあります。
$ npm init @Shopify/app@3.49.3
> npx
> create-app
Welcome. Let’s get started by naming your app project. You can change it later.
Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
The above error occurred in the <BoxWithBorder> component:
at BoxWithBorder (file:///C:/Users/manhl/AppData/Local/npm-cache/_npx/c1658a58ac965c8d/node_modules/@shopify/cli-kit/dist/private/node/ui/components/Banner.js:23:26)
at Banner (file:///C:/Users/xxx/AppData/Local/npm-cache/_npx/c1658a58ac965c8d/node_modules/@shopify/cli-kit/dist/private/node/ui/components/Banner.js:61:19)
at FatalError (file:///C:/Users/xxx/AppData/Local/npm-cache/_npx/c1658a58ac965c8d/node_modules/@shopify/cli-kit/dist/private/node/ui/components/FatalError.js:9:23)
at App (file:///C:/Users/xxx/AppData/Local/npm-cache/_npx/c1658a58ac965c8d/node_modules/ink/build/components/App.js:18:9)
React will try to recreate this component tree from scratch using the error boundary you provided, InternalApp.
ERROR Cannot read properties of null (reading 'useState')
C:/Users/xxx/AppData/Local/npm-cache/_npx/c1658a58ac965c8d/node_modules/@sho
pify/cli-kit/node_modules/react/cjs/react.development.js:1622:21
1619: }
1620: function useState(initialState) {
1621: var dispatcher = resolveDispatcher();
1622: return dispatcher.useState(initialState);
1623: }
1624: function useReducer(reducer, initialArg, init) {
1625: var dispatcher = resolveDispatcher();
-useStat (C:/Users/xxx/AppData/Local/npm-cache/_npx/c1658a58ac965c8d/node_mo
dules/@shopify/cli-kit/node_modules/react/cjs/react.development.js:162
2:21)
-useLayou (file:///C:/Users/xxx/AppData/Local/npm-cache/_npx/c1658a58ac965c8
d/node_modules/@shopify/cli-kit/dist/private/node/ui/hooks/use-layout
.js:7:33)
-BoxWithBord (file:///C:/Users/xxx/AppData/Local/npm-cache/_npx/c1658a58ac96
r 5c8d/node_modules/@shopify/cli-kit/dist/private/node/ui/components
/Banner.js:24:27)
-renderWithHo (C:/Users/xxx/AppData/Local/npm-cache/_npx/c1658a58ac965c8d/no
ks de_modules/react-reconciler/cjs/react-reconciler.development.js:6
659:18)
-mountIndeterminateCo (C:/Users/xxx/AppData/Local/npm-cache/_npx/c1658a58ac9
ponent 65c8d/node_modules/react-reconciler/cjs/react-reconciler.
development.js:11276:13)
-beginWor (C:/Users/xxx/AppData/Local/npm-cache/_npx/c1658a58ac965c8d/node_m
odules/react-reconciler/cjs/react-reconciler.development.js:12799:16)
-beginWork$ (C:/Users/xxx/AppData/Local/npm-cache/_npx/c1658a58ac965c8d/node
_modules/react-reconciler/cjs/react-reconciler.development.js:19608
:14)
-performUnitOfW (C:/Users/xxx/AppData/Local/npm-cache/_npx/c1658a58ac965c8d/
rk node_modules/react-reconciler/cjs/react-reconciler.development.
js:18742:12)
-workLoopSy (C:/Users/xxx/AppData/Local/npm-cache/_npx/c1658a58ac965c8d/node
c _modules/react-reconciler/cjs/react-reconciler.development.js:18648
:5)
-renderRootSy (C:/Users/xxx/AppData/Local/npm-cache/_npx/c1658a58ac965c8d/no
c de_modules/react-reconciler/cjs/react-reconciler.development.js:1
8616:7)
npm error code 1
npm error path C:\Users\xxx\OneDrive\デスクトップ\tesst
npm error command failed
npm error command C:\WINDOWS\system32\cmd.exe /d /s /c create-app
Shopifyアプリ開発スクールを運営しているテックギークの森本と申します。
もしかしたら、同じディレクトリにReactなど他のプロジェクトがある可能性はないでしょうか?
エラー内容を見ると、CI環境でエラーが発生しているようです。
自分も同じディレクトリ内に別プロジェクトが存在していた時に同じようなエラーが発生したことがあります。
一度確認していただけると良いかと思いました。
ディレクトリ内に別プロジェクトが存在していないです。
どうすればいいですかね?
こちらの環境でも動作確認を行いました。
その結果、正常にアプリケーションが作成されましたので、少なくともライブラリ側には問題がないように思われます。
次のステップとして、各モジュールの依存関係を確認し、問題箇所を特定していただく必要があるかもしれません。
例えば、Shopify CLIは、Node.jsがバージョン18.2以降であることが求められています。
詳細については、以下の参考ドキュメントをご覧ください。
参考ドキュメント: Shopify CLI ドキュメント
改めて開発環境を精査していただくのが良いかと思います。
2023年2月、Shopifyはcheckout.liquidを廃止し、Checkout Extensibilityに移行することを発表いたしました。この新しいチェックアウト...
By JasonH Aug 15, 2024「味噌の可能性を、とき放つ」をコンセプトに、豊かな自然に恵まれた信州で味噌の製造販売を行う新田醸造。江戸末期に創業した老舗のみそ屋さんですが、2024年春、顧客層や販売範囲の...
By Minami_ Jul 30, 2024ネットショッピングは、利便性に優れいている反面、利用に抵抗感がある人も多くいます。Amazonや楽天市場等、大型モールの企業は、知名度や運営企業の信頼性から顧客が不...
By JapanGuru Jul 23, 2024