FROM CACHE - jp_header

npm init @shopify/app@latest エラー解決方法について

npm init @shopify/app@latest エラー解決方法について

VXUT-shop
Shopify Partner
13 2 3

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

 

3件の返信3

テックギーク運営者
Shopify Partner
32 3 11

Shopifyアプリ開発スクールを運営しているテックギークの森本と申します。

 

もしかしたら、同じディレクトリにReactなど他のプロジェクトがある可能性はないでしょうか?

エラー内容を見ると、CI環境でエラーが発生しているようです。

 

自分も同じディレクトリ内に別プロジェクトが存在していた時に同じようなエラーが発生したことがあります。
一度確認していただけると良いかと思いました。

VXUT-shop
Shopify Partner
13 2 3

ディレクトリ内に別プロジェクトが存在していないです。

 

どうすればいいですかね?

テックギーク運営者
Shopify Partner
32 3 11

こちらの環境でも動作確認を行いました。

その結果、正常にアプリケーションが作成されましたので、少なくともライブラリ側には問題がないように思われます。

次のステップとして、各モジュールの依存関係を確認し、問題箇所を特定していただく必要があるかもしれません。

例えば、Shopify CLIは、Node.jsがバージョン18.2以降であることが求められています。

詳細については、以下の参考ドキュメントをご覧ください。
参考ドキュメント: Shopify CLI ドキュメント

 

改めて開発環境を精査していただくのが良いかと思います。