Bump remote-ui versions

[MitchLillie]

Background

This PR updates to @remote-ui/core@2.2 and @remote-ui/react@5. It also removes support for react@17 as these remote-ui updates were the only thing holding it back.

Due to the @remote-ui/react@5 dependency, consumers will now be required to manage their own versions of react and react-reconciler.

This should be marked as a breaking change. As noted below, I wasn't sure how to mark it as such using yarn changeset given that we are pointing to the unstable branch, as it prompts to release the first major version and I'm not sure that's right.

Relates to https://github.com/Shopify/app-ui/issues/228

Related PR: https://github.com/Shopify/web/pull/102560

Solution

(Describe your solution, why this approach was chosen, and what the alternatives/impacts may be)

🎩

1. Create an app using the CLI
2. yarn build-consumer <app directory here>
3. yarn build-consumer-spin web (may need to build to a different location if web is not the right consumer of this project)
4. Assert that extensions work properly.

Checklist

• I have 🎩'd these changes
• I have updated relevant documentation

[MitchLillie]

Notes:

I added a commit footer with "BREAKING CHANGE:" to denote this as a breaking change.

[brianshen1990]

From customer account web team, I am good with the upgrade:

1. we upgraded remote-ui/core to 2.2.3 last week
2. for "@remote-ui/react": we are using 4.5.x, we will see whether we need to upgrade if this cause any issue in the future https://github.com/Shopify/customer-account-web/blob/6510ab8c0f70747f377bb0b0b9dcb8de80415a85/app/package.json#L10
3. for react, we are already using ^18.2 https://github.com/Shopify/customer-account-web/blob/main/package.json#L57

And also we are trying to switching from main to unstable, so it will not be a break change for us.

[jamesvidler]

Do we need to change anything in the package.json of extensions that use this dependancy?

[jamesvidler]

Changes to this file should be made within the private version of the package for checkout first before being moved into the public package.

[jamesvidler]

I see this change already done in the private checkout package . 👍

[MitchLillie]

@jamesvidler

Do we need to change anything in the package.json of extensions that use this dependancy?

Extensions shouldn't need to be updated, but any consumers (checkout-web?) may need to install react-reconciler. Did you have any luck tophatting this branch?

[jamesvidler]

I followed the tophatting steps using build-consumer <app> with a newly generated extension (using React 17 and then again with 18) without making ANY changes to checkout-web and the extension worked correctly.

This should unblock this PR. Though, we do still need to figure out how to have this co-exist with the private checkout-web package since that relies on React 17.

[jamesvidler]

@MitchLillie
I just tested this in production using the unstable version with a newly generated app/extension (using yarn dev) without making any changes to the package.json and got this error:

TypeError: Cannot read properties of undefined (reading 'isBatchingLegacy')
...
ExtensionRenderError: Extension gid://shopify/LocalActivatedExtension/00 threw an error during rendering
...
react-reconciler.development.js:17731 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'isBatchingLegacy')

Using this package.json:

{
  "name": "checkout-ui",
  "private": true,
  "version": "1.0.0",
  "license": "UNLICENSED",
  "dependencies": {
    "react": "^17.0.0",
    "@shopify/ui-extensions": "unstable",
    "@shopify/ui-extensions-react": "unstable"
  },
  "devDependencies": {
    "@types/react": "^17.0.0"
  }
}

Not sure how I missed this when I was tophatting in spin 🤔.

If I update the dependancy to React 18, the error goes away:

{
  "name": "checkout-ui",
  "private": true,
  "version": "1.0.0",
  "license": "UNLICENSED",
  "dependencies": {
    "react": "^18.0.0",
    "@shopify/ui-extensions": "unstable",
    "@shopify/ui-extensions-react": "unstable"
  },
  "devDependencies": {
    "@types/react": "^18.0.0"
  }
}

Is this expected, that extensions will need to use React 18 going forward?

[jamesvidler]

I tried using react-reconciler^0.27.0 for React 17 and that did not work either.