Shopify CLI trying to use yarn for installing dependencies

Hi there,

First off, I totally understand that yarn >1 isn’t supported by Shopify CLI. That’s totally fine and understandable.

The problem is that when I try to explicitly use npx to execute extension generation, it still uses yarn to install the dependences for the new extension which will understandably fail.

So running:

npx shopify app generate extension

Allows you to start the process, but when it comes time to create the extension, the dependency installation fails:

Error coming from `yarn add @shopify/shopify_function@0.1.0 javy@0.1.1 --prod`

Command failed with exit code 1: yarn add @shopify/shopify_function@0.1.0 javy@0.1.1 --prod
Unknown Syntax Error: Command not found; did you mean one of:

  0. yarn add [--json] [-E,--exact] [-T,--tilde] [-C,--caret] [-D,--dev] [-P,--peer] [-O,--optional] [--prefer-dev] [-i,--interactive] [--cached] [--mode #0] ...
  1. yarn add [--json] [-E,--exact] [-T,--tilde] [-C,--caret] [-D,--dev] [-P,--peer] [-O,--optional] [--prefer-dev] [-i,--interactive] [--cached] [--mode #0] ...
  2. yarn add [--json] [-E,--exact] [-T,--tilde] [-C,--caret] [-D,--dev] [-P,--peer] [-O,--optional] [--prefer-dev] [-i,--interactive] [--cached] [--mode #0] ...

While running add @shopify/shopify_function@0.1.0 javy@0.1.1 --prod

I couldn’t find any command flag for the npx library to define a package manager explicitly.

Maybe there’s some config I don’t know about to force NPM usage? Or maybe a flag in the Shopify CLI to not install dependences so I can do it later myself with yarn without that unsupported --prod flag?

Hey Dylan – thanks for the feedback. As you’ve probably intuited, right now it’s seeing that you have a yarn.lock file and deciding you want to use yarn.

There isn’t a way to override it, and will take this as feedback that perhaps there should be (or indeed to switch off this behaviour). I think as a workaround though, if you have those two dependencies in your top level package.json file – so you install them yourself, however you want to – this step should end up being skipped.

Let me know how you get on.

Thanks for the quick reply @Shaun_Stanworth !

Yes, I started digging through the cli source code to find the cause. I didn’t realize it was dynamically interpreting the package manager from the file system.

I tried adding both npm dependencies to the workspace root and re-generating the extension, but the same error occurs.

I’ve cloned the cli repo, maybe I can add quick and dirty yarn 1 vs >2 detection in the getPackageManager function. Depends on if yarn passes some kind of version to the environment so I can skip trying to pass that prop around.

So it looks like yarn >=2 can be determined from the file system alone:

Would it be crazy to implement a new enum yarn-berry or something in the node-pacakage-manager.ts module?

Then it would be possible to drop the --prod flag.

I tried to get the cli package installed on my machine, but I think the @shopify/ui-extensions-test-utils is a private npm module which breaks installing deps:

❯ pnpm install
Scope: all 14 workspace projects
packages/eslint-plugin-cli               |  WARN  deprecated eslint@8.57.0
 WARN  deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
/Users/pierce/dev/cli/packages/ui-extensions-dev-console:
 ERR_PNPM_FETCH_404  GET https://registry.npmjs.org/@shopify%2Fui-extensions-test-utils: Not Found - 404

This error happened while installing a direct dependency of /Users/pierce/dev/cli/packages/ui-extensions-dev-console

@shopify/ui-extensions-test-utils is not in the npm registry, or you have no permission to fetch it.

No authorization header was set for the request.
Progress: resolved 0, reused 1, downloaded 0, added 0

My suggestion is impractical. It’s easier just to switch to pnpm even in the short term just to generate the extension.

But even after fully switching to pnpm, after successful dep installation, then there’s a new issue with the graphql-code-generator:

Error coming from `npm exec -- graphql-code-generator --config package.json`

Command failed with exit code 1: npm exec -- graphql-code-generator --config package.json
Cannot convert undefined or null to object
[12:30:49] Parse configuration [started]
[12:30:49] Parse configuration [failed]
[12:30:49] → Cannot convert undefined or null to object

Which lead me to this Github Issue that I forgot I even contributed to: [Bug]: Error coming from `npm exec -- graphql-code-generator --config package.json` on creating payment customization with Javascript · Issue #2095 · Shopify/cli · GitHub

Alright, closing the loop, I was finally able to generate an discount JS/TS function extension with pnpm.

The final piece was adding this to project’s .npmrc:

strict-peer-dependencies=false
auto-install-peers=true
shamefully-hoist=true

It’s the same as the Shopify CLI monorepo.