Completely baffled by extension

Retired Boards Appdev Extensions
1

I am completely baffled by the extension targets.

For context, I’m working on a Checkout UI extension — it displays a message if the customer has any digital items. Pretty simple.

Within the app, when I run shopify app generate extension using the CLI (v3.49.3), it creates an extension like this:

extensions/foo-bar
├── README.md
├── locales
│   ├── en.default.json
│   └── fr.json
├── shopify.ui.extension.toml
├── src
│   └── index.tsx
└── tsconfig.json

That make sense, EXCEPT that on the docs, it shows a Shopify.extension.toml file, not shopify.ui.extension.toml

That’s the first issue.

The boilerplate it generates imports from here:

import { ... } from '@shopify/checkout-ui-extensions-react';

But the docs show:

import { ... } from '@shopify/ui-extensions-react/checkout';

Acc. to the npm page for the latter @Shopify_77 /checkout-ui-extensions-react is deprecated, even though the CLI generates the code!

The extension target it generates is

Checkout::Dynamic::Rende

But, according once again to the docs, that’s deprecated!

None of the new ones are recognized and I receive an error if I try to use them.

So…what the heck is happening? Are the docs wrong? Is the CLI behind?

2

Hey @charles_loder

Thanks for flagging this. It looks like the docs have been updated. Let me know if you’re still seeing old docs.

3

Which docs exactly? Everything in the Checkout UI docs looks the same to me.

4

Ah it looks like a change with 2023-07.

Switch to 2023-04 and you should be good to go (screenshot).

Which makes me wonder why @latest is generating projects pinned to 2023-04 :thinking:

Thanks for flagging this! Will get it sorted.

5

Ok, I think I figured out what my issue was, though changing the api version should help.

We haven’t been using the CLI to actually generate the app; we have a custom template we use, but we haven’t used extensions before.

We had conflicting versions of the @Shopify_77 /cli (v3.49.3) and @Shopify_77 /app (v3.47.5).

So even though the cli was up to date, when I generated an extension, it was wrong.

Though, it still seems like there are issues:

Here’s my base package.json before adding any extensions

{
  "name": "shopify-astro-app",
  "type": "module",
  "version": "0.0.1",
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro",
    "shopify:dev": "shopify app dev"
  },
  "dependencies": {
    "@astrojs/netlify": "^2.3.0",
    "@shopify/app": "3.49.3",
    "@shopify/cli": "3.49.3",
    "@shopify/shopify-api": "^7.5.0",
    "@xata.io/client": "^0.24.3",
    "astro": "^2.8.1",
    "netlify-cli": "^15.9.1"
  },
  "devDependencies": {
    "npm-check-updates": "^16.14.4"
  }
}

Note the latest versions of the cli and app pinned to that version for now.

That all installs fine. But I get the following error when generating an extension:

Error coming from `npm install react@^17.0.0 --save-prod`

Command failed with exit code 1: npm install react@^17.0.0 --save-prod
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: shopify-astro-app@0.0.1
npm WARN Found: react@18.2.0
npm WARN node_modules/react
npm WARN   peer react@"18.2.0" from /app@3.49.3
npm WARN   node_modules/@shopify/app
npm WARN     /app@"3.49.3" from the root project
npm WARN   4 more (@shopify/cli-kit, ink, react-reconciler, the root project)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"18.2.0" from /app@3.49.3
npm WARN node_modules/@shopify/app
npm WARN   /app@"3.49.3" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: shopify-astro-app@0.0.1
npm WARN Found: react@18.2.0
npm WARN node_modules/react
npm WARN   peer react@"18.2.0" from /app@3.49.3
npm WARN   node_modules/@shopify/app
npm WARN     /app@"3.49.3" from the root project
npm WARN   4 more (@shopify/cli-kit, ink, react-reconciler, the root project)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@">=18.0.0" from ink@4.2.0
npm WARN node_modules/ink
npm WARN   peer ink@"4.2.0" from /app@3.49.3
npm WARN   node_modules/@shopify/app
npm WARN   1 more (@shopify/cli-kit)
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: /app@3.49.3
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   react@"^17.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer ink@"4.2.0" from /app@3.49.3
npm ERR! node_modules/@shopify/app
npm ERR!   /app@"3.49.3" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react@18.2.0
npm ERR! node_modules/react
npm ERR!   peer react@">=18.0.0" from ink@4.2.0
npm ERR!   node_modules/ink
npm ERR!     peer ink@"4.2.0" from /app@3.49.3
npm ERR!     node_modules/@shopify/app
npm ERR!       /app@"3.49.3" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! /Users/charlesloder/.npm/_logs/2023-09-28T14_38_38_151Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /Users/charlesloder/.npm/_logs/2023-09-28T14_38_38_151Z-debug-0.log

Running npm ls react gives:

shopify-astro-app@0.0.1
└─┬ /app@3.49.3
  ├─┬ /cli-kit@3.49.3
  │ └── react@18.2.0 deduped
  ├─┬ ink@4.2.0
  │ ├─┬ react-reconciler@0.29.0
  │ │ └── react@18.2.0 deduped
  │ └── react@18.2.0 deduped
  └── react@18.2.0

No react 17 like in the error:

npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR! react@"^17.0.0" from the root project

I’m unsure now if this is the shopify app or something in my code. Let me know if I should enter a github issue

6

I’m also noticing that when I create an extension, it adds this to my package.json:

"overrides": {
    "@types/react": "17.0.30"
  }

I can only assume it’s coming from here:

// node_modules/@shopify/app/dist/cli/constants.js:12

export const versions = {
    react: '^17.0.0',
    reactTypes: '17.0.30',
};

I tried monkey patching it, the map file, and the .d.ts. Didn’t resolve it

7

There was a discrepancy between the cli installed in the project repo and the one installed globally ?‍ :male_sign: