[Bug]: Shopify CLI Raw Mode

zsoltbalint commented 1 year ago

Please confirm that you have:

[X] Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
[X] Reproduced the issue in the latest CLI version.

In which of these areas are you experiencing a problem?

Extension

Expected behavior

The command npm run dev in Shopify CLI should push the draft version of the Theme App Extension along with the Shopify App to a development theme.

Actual behavior

The command initiates the start and push processes for both the app and the extension. It also generates the Dev Theme successfully, however, the process terminates with an error.

Verbose output

I will provide two versions of the output: the first will be the initial command, and the second will include the hint received from the first output.

First:
admin@admins-MBP app % npm run dev --verbose
npm verb cli /usr/local/bin/node /usr/local/bin/npm
npm info using npm@9.5.0
npm info using node@v18.15.0
npm verb title npm run dev
npm verb argv "run" "dev" "--loglevel" "verbose"
npm verb logfile logs-max:10 dir:/Users/user/.npm/_logs/2023-03-23T07_00_26_064Z-
npm verb logfile /Users/user/.npm/_logs/2023-03-23T07_00_26_064Z-debug-0.log
> app@1.0.0 dev
> shopify app dev
╭─ info ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                          │
│ Using your previous dev settings:                                                         │
│                                                                          │
│  • Org:     MyOrg                                                     │
│  • App:     app-test                                                            │
│  • Dev store:  project-dev.myshopify.com                                                    │
│  • Update URLs: Always                                                             │
│                                                                          │
│ To reset your default dev config, run `npm run dev -- --reset`                                          │
│                                                                          │
╰────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
whatever (Theme App Extension)
Follow the dev doc instructions ( https://shopify.dev/apps/online-store/theme-app-extensions/getting-started#step-3-test-your-changes ) by deploying your work as a draft
2023-03-23 07:00:42 | frontend  | npm
2023-03-23 07:00:42 | frontend  |  
2023-03-23 07:00:42 | backend  | npm
2023-03-23 07:00:42 | backend  |  verb cli /usr/local/bin/node /usr/local/bin/npm
2023-03-23 07:00:42 | backend  | npm info using npm@9.5.0
2023-03-23 07:00:42 | backend  | npm info using node@v18.15.0
2023-03-23 07:00:42 | backend  | npm verb title npm run dev
2023-03-23 07:00:42 | backend  | npm verb argv "run" "dev"
2023-03-23 07:00:42 | backend  | npm verb logfile logs-max:10 dir:/Users/user/.npm/_logs/2023-03-23T07_00_42_590Z-
2023-03-23 07:00:42 | frontend  | verb cli /usr/local/bin/node /usr/local/bin/npm
2023-03-23 07:00:42 | frontend  | npm info using npm@9.5.0
2023-03-23 07:00:42 | frontend  | npm info using node@v18.15.0
2023-03-23 07:00:42 | frontend  | npm verb title npm run dev
2023-03-23 07:00:42 | frontend  | npm verb argv "run" "dev"
2023-03-23 07:00:42 | frontend  | npm verb logfile logs-max:10 dir:/Users/user/.npm/_logs/2023-03-23T07_00_42_560Z-
2023-03-23 07:00:42 | frontend  | npm verb logfile /Users/user/.npm/_logs/2023-03-23T07_00_42_560Z-debug-0.log
2023-03-23 07:00:42 | frontend  |
2023-03-23 07:00:42 | frontend  | > dev
2023-03-23 07:00:42 | frontend  | > vite
2023-03-23 07:00:42 | frontend  |
2023-03-23 07:00:42 | backend  | npm verb logfile /Users/user/.npm/_logs/2023-03-23T07_00_42_590Z-debug-0.log
2023-03-23 07:00:42 | backend  |
2023-03-23 07:00:42 | backend  | > dev
2023-03-23 07:00:42 | backend  | > cross-env NODE_ENV=development nodemon index.js --ignore ./frontend
2023-03-23 07:00:42 | backend  |
2023-03-23 07:00:43 | backend  | [nodemon] 2.0.21
2023-03-23 07:00:43 | backend  | [nodemon] to restart at any time, enter `rs`
2023-03-23 07:00:43 | backend  | [nodemon] watching path(s): *.*
2023-03-23 07:00:43 | backend  | [nodemon] watching extensions: js,mjs,json
2023-03-23 07:00:43 | backend  | [nodemon] starting `node index.js`
2023-03-23 07:00:44 | frontend  |
2023-03-23 07:00:44 | frontend  |  vite v2.9.15 dev server running at:
2023-03-23 07:00:44 | frontend  |
2023-03-23 07:00:44 | frontend  |  > Local:  http://localhost:50185/
2023-03-23 07:00:44 | frontend  |  > Network: http://192.168.1.96:50185/
2023-03-23 07:00:44 | frontend  |
2023-03-23 07:00:44 | frontend  |  ready in 1281ms.
2023-03-23 07:00:44 | frontend  |
2023-03-23 07:00:44 | backend  | [shopify-api/INFO] version 6.2.0, environment Node v18.15.0

 Press `p` to open your browser. Press `q` to quit.                                                                                        

Preview URL: https://d01-195-222-106-138.eu.ngrok.io?shop=project-dev.myshopify.com&host=YXF1cmF0ZS1kZXYubXlzaG9waWZ5LmNvbS9hZG1pbg
✗ An unexpected error occurred.
    To submit an issue include the stack trace.
    To print the stack trace, add the environment variable SHOPIFY_CLI_STACKTRACE=1.
? Send an anonymized error report to Shopify? (Choose with ↑ ↓ ⏎, filter with 'f')
> 1. Yes, send
 2. No, don't send
Traceback (most recent call last):
    11: from /Users/user/app/node_modules/@shopify/cli-kit/assets/cli-ruby/vendor/deps/cli-kit/lib/cli/kit/error_handler.rb:71:in `block in install!'
    10: from /Users/user/app/node_modules/@shopify/cli-kit/assets/cli-ruby/vendor/deps/cli-kit/lib/cli/kit/error_handler.rb:31:in `handle_exception'
     9: from /Users/user/app/node_modules/@shopify/cli-kit/assets/cli-ruby/lib/shopify_cli/exception_reporter.rb:26:in `report'
     8: from /Users/user/app/node_modules/@shopify/cli-kit/assets/cli-ruby/lib/shopify_cli/exception_reporter.rb:57:in `report?'
     7: from /Users/user/app/node_modules/@shopify/cli-kit/assets/cli-ruby/lib/shopify_cli/exception_reporter.rb:68:in `report_error?'
     6: from /Users/user/app/node_modules/@shopify/cli-kit/assets/cli-ruby/vendor/deps/cli-ui/lib/cli/ui/prompt.rb:100:in `ask'
     5: from /Users/user/app/node_modules/@shopify/cli-kit/assets/cli-ruby/vendor/deps/cli-ui/lib/cli/ui/prompt.rb:203:in `ask_interactive'
     4: from /Users/user/app/node_modules/@shopify/cli-kit/assets/cli-ruby/vendor/deps/cli-ui/lib/cli/ui/prompt.rb:230:in `interactive_prompt'
     3: from /Users/user/app/node_modules/@shopify/cli-kit/assets/cli-ruby/vendor/deps/cli-ui/lib/cli/ui/prompt/interactive_options.rb:27:in `call'
     2: from /Users/user/app/node_modules/@shopify/cli-kit/assets/cli-ruby/vendor/deps/cli-ui/lib/cli/ui/prompt/interactive_options.rb:74:in `call'
     1: from /Users/user/app/node_modules/@shopify/cli-kit/assets/cli-ruby/vendor/deps/cli-ui/lib/cli/ui/prompt/interactive_options.rb:246:in `process_input_until_redraw_required'
/Users/user/app/node_modules/@shopify/cli-kit/assets/cli-ruby/vendor/deps/cli-ui/lib/cli/ui/prompt/interactive_options.rb:256:in `wait_for_user_input': Interrupt (Interrupt)
npm verb exit 1
npm verb code 1

Second:
admin@admins-MBP app % SHOPIFY_CLI_STACKTRACE=1 | npm run dev --verbose
npm verb cli /usr/local/bin/node /usr/local/bin/npm
npm info using npm@9.5.0
npm info using node@v18.15.0
npm verb title npm run dev
npm verb argv "run" "dev" "--loglevel" "verbose"
npm verb logfile logs-max:10 dir:/Users/user/.npm/_logs/2023-03-23T07_01_30_649Z-
npm verb logfile /Users/user/.npm/_logs/2023-03-23T07_01_30_649Z-debug-0.log
> app@1.0.0 dev
> shopify app dev
╭─ info ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                          │
│ Using your previous dev settings:                                                         │
│                                                                          │
│  • Org:     MyOrg                                                     │
│  • App:     app-test                                                            │
│  • Dev store:  project-dev.myshopify.com                                                    │
│  • Update URLs: Always                                                             │
│                                                                          │
│ To reset your default dev config, run `npm run dev -- --reset`                                          │
│                                                                          │
╰────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
whatever (Theme App Extension)
Follow the dev doc instructions ( https://shopify.dev/apps/online-store/theme-app-extensions/getting-started#step-3-test-your-changes ) by deploying your work as a draft
  ERROR  Raw mode is not supported on the current process.stdin, which Ink uses as input stream by default.
    Read about how to prevent this error on https://github.com/vadimdemedes/ink/#israwmodesupported
 - Read about how to prevent this error on https://github.com/vadimdemedes/ink/#israwmodesupported
 - App.handleSetRawMode (node_modules/ink/build/components/App.js:56:27)
 -  (node_modules/ink/build/hooks/use-input.js:38:9)
 - invokePassiveEffectCreate (node_modules/react-reconciler/cjs/react-reconciler.development.js:16054:20)
 - Object.invokeGuardedCallbackProd (node_modules/react-reconciler/cjs/react-reconciler.development.js:12101:10)
 - invokeGuardedCallback (node_modules/react-reconciler/cjs/react-reconciler.development.js:12292:31)
 - flushPassiveEffectsImpl (node_modules/react-reconciler/cjs/react-reconciler.development.js:16141:9)
 - unstable_runWithPriority (node_modules/scheduler/cjs/scheduler.development.js:468:12)
 - runWithPriority (node_modules/react-reconciler/cjs/react-reconciler.development.js:2495:10)
 - flushPassiveEffects (node_modules/react-reconciler/cjs/react-reconciler.development.js:16014:14)
 -  (node_modules/react-reconciler/cjs/react-reconciler.development.js:15891:11)
╭─ error ────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                          │
│ Raw mode is not supported on the current process.stdin, which Ink uses as input stream by default.                        │
│ Read about how to prevent this error on https://github.com/vadimdemedes/ink/#israwmodesupported                          │
│                                                                          │
│ To investigate the issue, examine this stack trace:                                                │
│  at handleSetRawMode (ink/build/components/App.js:56)                                              │
│   throw new Error('Raw mode is not supported on the current process.stdin, which Ink uses as input stream by default.\nRead about how to     │
│   prevent this error on https://github.com/vadimdemedes/ink/#israwmodesupported');                               │
│  at (ink/build/hooks/use-input.js:38)                                                      │
│   setRawMode(true);                                                               │
│  at invokePassiveEffectCreate (react-reconciler/cjs/react-reconciler.development.js:16054)                            │
│   effect.destroy = create();                                                          │
│  at invokeGuardedCallbackProd (react-reconciler/cjs/react-reconciler.development.js:12101)                            │
│   func.apply(context, funcArgs);                                                        │
│  at invokeGuardedCallback (react-reconciler/cjs/react-reconciler.development.js:12292)                              │
│   invokeGuardedCallbackImpl$1.apply(reporter, arguments);                                            │
│  at flushPassiveEffectsImpl (react-reconciler/cjs/react-reconciler.development.js:16141)                             │
│   invokeGuardedCallback(null, invokePassiveEffectCreate, null, _effect2);                                    │
│  at unstable_runWithPriority (scheduler/cjs/scheduler.development.js:468)                                    │
│   return eventHandler();                                                            │
│  at runWithPriority (react-reconciler/cjs/react-reconciler.development.js:2495)                                 │
│   return Scheduler_runWithPriority(priorityLevel, fn);                                             │
│  at flushPassiveEffects (react-reconciler/cjs/react-reconciler.development.js:16014)                               │
│   return runWithPriority(priorityLevel, flushPassiveEffectsImpl);                                        │
│  at (react-reconciler/cjs/react-reconciler.development.js:15891)                                         │
│   flushPassiveEffects();                                                            │
│                                                                          │
╰────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
npm verb exit 1
npm verb code 1

Reproduction steps

npm init @shopify/app@latest
cd app
npm run shopify app generate extension
npm run dev

Operating System

macOS Monterey, 12.6.3

Shopify CLI version (check your project's `package.json` if you're not sure)

3.44.1

Shell

zsh

Node version (run `node -v` if you're not sure)

v18.15.0

What language and version are you using in your application?

Node v18.15.0

Arkham commented 1 year ago

hi @zsoltbalint could you paste the output of SHOPIFY_CLI_STACKTRACE=1 npm run dev -- --verbose (this is the way to pass options to a npm script)

github-actions[bot] commented 1 year ago

This issue seems inactive. If it's still relevant, please add a comment saying so. Otherwise, take no action. → If there's no activity within a week, then a bot will automatically close this. Thanks for helping to improve Shopify's dev tooling and experience.

P.S. You can learn more about why we stale issues here.

asmerkin commented 1 year ago

I have the same issue.

amcaplan commented 1 year ago

@asmerkin we seem to have lost @zsoltbalint, perhaps you can follow @Arkham's instructions?

asmerkin commented 1 year ago

It didn't like it.

Run SHOPIFY_CLI_STACKTRACE=1 npm run shopify app deploy -- --verbose
SHOPIFY_CLI_STACKTRACE=1: /home/runner/work/_temp/9201a291-a3ee-4c76-8721-26112f4fa0a0.ps1:2
Line |
   2 |  SHOPIFY_CLI_STACKTRACE=1 npm run shopify app deploy -- --verbose
     |  ~~~~~~~~~~~~~~~~~~~~~~~~
     | The term 'SHOPIFY_CLI_STACKTRACE=1' is not recognized as a name of a
     | cmdlet, function, script file, or executable program. Check the spelling
     | of the name, or if a path was included, verify that the path is correct
     | and try again.

Error: Process completed with exit code 1.

The problem is that I'm trying to deploy GH actions, and the cli cannot use Ink.

name: App Extensions - Stage

on:
  push:
    branches:
      - stage

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
      - uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: 'npm'
      - name: Install NPM dependencies
        run: npm install
      - name: Deploy
        shell: pwsh
        env:
          SHOPIFY_CLI_PARTNERS_TOKEN: ${{ secrets.SHOPIFY_CLI_PARTNERS_TOKEN }}
          SHOPIFY_API_KEY: ${{ secrets.STAGE_SHOPIFY_API_KEY }}
          SHOPIFY_PRODUCT_ALLOWANCES_ID: ${{ secrets.STAGE_SHOPIFY_PRODUCT_ALLOWANCES_ID }}
        run: npm run shopify app deploy

The error is

> shopify app deploy

  ERROR Raw mode is not supported on the current process.stdin, which Ink uses
       as input stream by default.
       Read about how to prevent this error on
       https://github.com/vadimdemedes/ink/#israwmodesupported
The above error occurred in the <SelectPrompt> component:

    at SelectPrompt (file:///home/runner/work/.../node_modules/@shopify/cli-kit/dist/private/node/ui/components/SelectPrompt.js:12:25)
    at App (file:///home/runner/work/.../node_modules/ink/build/components/App.js:18:9)

braheem commented 1 year ago

I had this error when using git bash on windows and trying to create an app. Switched to powershell as per this discussion and no longer have the error.

amcaplan commented 1 year ago

@asmerkin SHOPIFY_CLI_STACKTRACE=1 is setting an env variable, probably the way you pass it to CI it's going to be escaped and treated as a shell command. So you should add it to your list of env variables instead.

I'd like to see the full trace so I can understand what it's trying to prompt you for.

vaultmicroSeongwoo commented 1 year ago

I have the same issue too.

artyrcheek commented 1 year ago

Same error here

amcaplan commented 1 year ago

So. As far as I can tell, there are 2 issues here:

The CLI is not properly detecting a non-TTY shell, and continuing to prompt as though it'll work. We should throw a clearer error in such cases.
Looks like you left out -f which is necessary for deploying in non-TTY environments. Otherwise, you'll be prompted to confirm the changes before deploying, and since you can't confirm, you see this error.

asmerkin commented 1 year ago

Running it with -f does the same.

Run npm run shopify app deploy -f
npm WARN using --force Recommended protections disabled.

> shopify
> shopify app deploy

The above error occurred in the <SelectPrompt> component:

    at SelectPrompt (file:///home/runner/work/.../node_modules/@shopify/cli-kit/dist/private/node/ui/components/SelectPrompt.js:12:25)
    at App (file:///home/runner/work/.../node_modules/ink/build/components/App.js:18:9)

  ERROR Raw mode is not supported on the current process.stdin, which Ink uses
React will try to recreate this component tree from scratch using the error boundary you provided, InternalApp.
       as input stream by default.
       Read about how to prevent this error on
       https://github.com/vadimdemedes/ink/#israwmodesupported

amcaplan commented 1 year ago

Need to let npm know the flag is for deploy rather than npm itself.

npm run shopify app deploy -- -f

asmerkin commented 1 year ago

True. That worked. Thank you @amcaplan!

vaultmicroSeongwoo commented 1 year ago

That worked. Thank you @amcaplan ! If you find the error "make: /usr/bin/mkdir: Command not found"

add "ln -s /bin/mkdir /usr/bin/mkdir" before "npm run shopify app deploy -- -f" https://stackoverflow.com/questions/64653051/make-usr-bin-mkdir-command-not-found-during-gem-install-nokogiri-in-ubuntu

ex) npm install && \ ln -s /bin/mkdir /usr/bin/mkdir && \ npm run shopify app deploy -- -f

gopida commented 1 year ago

The CLI still throw raw mode error

shopify version
Current Shopify CLI version: 3.45.4

npm verb cli /usr/local/bin/node /usr/local/bin/npm
npm info using npm@9.6.6
npm info using node@v20.2.0
npm verb title npm run shopify theme push abc 123
npm verb argv "run" "shopify" "theme" "push" "--loglevel" "silent" "abc" "-t" "123" "--force" "--loglevel" "verbose"
npm verb logfile logs-max:10 dir:/root/.npm/_logs/2023-05-18T20_08_45_138Z-
npm verb logfile /root/.npm/_logs/2023-05-18T20_08_45_138Z-debug-0.log
npm WARN using --force Recommended protections disabled.
> abc@1.0.0 shopify
> shopify theme push abc 123
  ERROR Raw mode is not supported on the current process.stdin, which Ink uses
       as input stream by default.
       Read about how to prevent this error on
       https://github.com/vadimdemedes/ink/#israwmodesupported
 - Read about how to prevent this error on
   https://github.com/vadimdemedes/ink/#israwmodesupported
 - value (node_modules/ink/build/components/App.js:46:31)
 -  (node_modules/ink/build/hooks/use-input.js:34:9)
 -commitHookEffectLis (node_modules/react-reconciler/cjs/react-reconciler.devel
  Mount              opment.js:14778:26)
 -commitPassiveMountO (node_modules/react-reconciler/cjs/react-reconciler.devel
  Fiber              opment.js:16609:11)
 -commitPassiveMountEffect (node_modules/react-reconciler/cjs/react-reconciler.
  _complete               development.js:16569:9)
 -commitPassiveMountEffe (node_modules/react-reconciler/cjs/react-reconciler.de
  ts_begin              velopment.js:16556:7)
 -commitPassiveMountE (node_modules/react-reconciler/cjs/react-reconciler.devel
  fects              opment.js:16544:3)
 -flushPassiveEffect (node_modules/react-reconciler/cjs/react-reconciler.develo
  Impl              pment.js:19182:3)
 -flushPassiveEff (node_modules/react-reconciler/cjs/react-reconciler.developme
  cts            nt.js:19127:14)
 -performSyncWorkOn (node_modules/react-reconciler/cjs/react-reconciler.develop
  oot              ment.js:18184:3)
The above error occurred in the <SelectPrompt> component:
    at SelectPrompt (file:///builds/xyz/abc/node_modules/@shopify/cli-kit/dist/private/node/ui/components/SelectPrompt.js:12:25)
    at App (file:///builds/xyz/abc/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.
npm verb exit 0
npm info ok

gopida commented 1 year ago

Using force for shopify/app also doesn't work now

$ npm run deploy -f
npm WARN using --force Recommended protections disabled.
> shopify-theme-app-extension@1.0.0 deploy
> shopify app deploy
  ERROR Raw mode is not supported on the current process.stdin, which Ink uses
       as input stream by default.
       Read about how to prevent this error on
       https://github.com/vadimdemedes/ink/#israwmodesupported

shauns commented 1 year ago

Using force for shopify/app also doesn't work now

@gopida When running commands through npm, you need an extra -- to separate flags you're giving to npm, vs. flags for the command you're running. So in your case it should be npm run deploy -- --force .

amcaplan commented 1 year ago

Previously I wrote:

The CLI is not properly detecting a non-TTY shell, and continuing to prompt as though it'll work. We should throw a clearer error in such cases.

This has been improved in #1964 and is included in 3.46.

For everyone else, please be sure you're passing all required inputs when deploying from CI, including partners token and API key.

I also updated our developer docs to include the -- in the npm CI/CD template.

I think we've fixed what there is to be fixed, closing the issue.

Shopify / cli