Solving the 'graphql-code-generator Not Found' Error in Shopify CLI for Discount Extensions
Solving the 'graphql-code-generator Not Found' Error in Shopify CLI for Discount Extensions
Hey everyone! As a Shopify migration expert and someone who loves digging into the community forums, I often see common headaches pop up for our amazing store owners and developers. Recently, a specific issue caught my eye, and it's one that many of you building custom Shopify apps and extensions might run into: the dreaded "graphql-code-generator not found" error when trying to generate a discount extension with Shopify CLI 4.8.0. It's a tricky one, but thanks to some brilliant minds in the community, we've got a few solid paths to resolution.
This whole discussion kicked off with Renzo_Gil_Cruzado, who was trying to get a simple JavaScript discount function off the ground. They hit a wall right after running shopify app generate extension --template discount, getting an error that screamed ERR_PNPM_RECURSIVE_EXEC_FIRST_FAIL Command "graphql-code-generator" not found. Sound familiar? You're not alone!
Unpacking the Root Cause: Why is This Happening?
It turns out this isn't just a simple "forgot to install a package" problem. The community, especially v.marychenka and Josh-FiveAcreCode, helped shine a light on the underlying mechanics. Here's the gist:
-
The Sneaky
pnpm-workspace.yaml: Even if you initialize your Shopify app withnpm, the extension-only template might leave apnpm-workspace.yamlfile behind. Shopify CLI 4.8.0, in its wisdom, checks for this file beforepackage-lock.json. This means it might default to usingpnpminternally for generating the extension, even if you specifiednpm. -
Transitive Dependency Trouble: The
graphql-code-generatorisn't a direct dependency of your app. It comes in via@shopify/shopify_function. Whenpnpmis used with its default "isolated" linking strategy, it doesn't always expose transitive dependencies in a way that allows tools likepnpm exec(which the CLI uses internally) to find them globally or at the workspace root. This leads to the "command not found" error, even if the package is technically installed deep withinnode_modules. -
Shopify CLI Regression: Multiple reports across various package managers (npm, pnpm, yarn) and CLI versions suggest this might be a recurring bug or regression within the Shopify CLI itself, specifically regarding how it resolves the GraphQL Code Generator binary during extension generation.
Actionable Solutions: Getting Your Discount Extension Working
Don't let this roadblock deter your development journey! Here are the most effective workarounds and fixes identified by the community:
1. The Clean Slate Approach (Prioritizing npm)
If you prefer using npm and suspect pnpm's residual files are causing the conflict, a thorough cleanup can resolve the issue. This ensures npm takes full control of your dependencies.
rm -rf node_modules pnpm-lock.yaml pnpm-workspace.yaml
npm install
shopify app generate extension --template discount --name volume-discount
Why this works: Removing pnpm-workspace.yaml prevents the CLI from defaulting to pnpm, and a fresh npm install ensures all dependencies are linked correctly for npm.
2. Directly Install GraphQL Code Generator Dependencies
This workaround directly addresses the "command not found" error by making the necessary packages explicitly available at your app's root level, regardless of how your package manager links transitive dependencies.
# If using pnpm:
pnpm add -D @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations
# If using npm:
npm install -D @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations
After installing, try generating the extension again: shopify app generate extension --template discount --name volume-discount.
Why this works: By installing these packages as direct dev dependencies, you ensure the graphql-code-generator binary is resolvable by the CLI, bypassing the transitive dependency linking issues.
3. Adjust pnpm's Node Linker Setting (If You Must Use pnpm)
If you are committed to using pnpm for your project, its default "isolated" linking can be problematic. Changing the node-linker setting to hoisted can resolve binary resolution issues.
Add node-linker=hoisted to a .npmrc file in your app root, then reinstall dependencies.
Why this works: hoisted linking creates a more traditional node_modules structure, making binaries more easily discoverable by tools shelling out from different directories.
4. Correcting Your shopify.extension.toml for JavaScript Functions
Once you get past the generation step, you might hit another wall with an "Invalid extension configuration" error, especially if you tried to hand-write your extension. For JavaScript discount functions, the build configuration is specific:
[extensions.build]
command = ""
path = "dist/function.wasm"
Do NOT set: command = "shopify app function build". The Shopify CLI handles the JavaScript-to-Wasm compilation itself. Pointing it back to itself creates a recursive loop or misconfiguration.
Why this works: This configuration correctly tells the Shopify CLI that it should handle the build process for your JavaScript function and where to find the resulting WebAssembly file.
Best Practices and Moving Forward
-
Report Bugs: If these workarounds don't fully resolve your issue, or if you find a clean reproduction, consider filing a detailed bug report with the Shopify CLI team. Well-documented reproductions with exact versions (CLI, Node, OS) are invaluable for getting issues triaged and fixed quickly.
-
Stay Updated: While CLI regressions can occur, keeping your Shopify CLI and Node.js versions reasonably up-to-date is generally a good practice for accessing the latest features and bug fixes.
-
Consistency is Key: Try to stick to a single package manager (npm or pnpm) across your project to minimize conflicts and unexpected behavior.
Building custom functionality on Shopify is a powerful way to enhance your store's capabilities. If you're looking to start your own Shopify store or need assistance with complex development and migration challenges, Shopify offers a robust platform for all your e-commerce needs. At Shopping Cart Mover, we specialize in helping merchants navigate these technical waters, ensuring your development projects run smoothly and your online store thrives.
Don't let tooling issues slow down your innovation. By understanding these common pitfalls and applying the recommended solutions, you can efficiently develop and deploy powerful discount extensions for your Shopify store.