JSX type errors caused by multiple versions of @types/react

[marvinhagemeister]

Please list the package(s) involved in the issue, and include the version you are using

• @shopify/checkout-ui-extensions-react 0.15.0
• @shopify/shopify-cli-extensions 0.2.1

Describe the bug

A new projected created by our CLI with the typescript-react template has type errors.

Steps to reproduce the behavior:

1. Run shopify extension create and follow instructions (pick the ´typescript-react` template
2. Navigate to the generated extension folder
3. Open src/index.tsx in your editor -> Type ERROR

Expected behavior

There should be no type errors when creating a brand new extension. This doesn't make for a good first time impression.

Screenshots

Additional context

Did some digging and the issue is caused by multiple versions of @types/react being present at the same time. One version v17.0.45 is installed by being a direct dependency of @remote-ui/react and the other one is coming from @types/react-reconciler which just has "@types/react": "*" listed in its dependencies. This leads to that package installing @types/react v18.0.9 on top of the already existing 17.0.45. Because both packages define the same types globally, there is a conflict and we'll end up with type errors in our editor as pictured above.

[marvinhagemeister]

@kumar303 I'm not sure which board we use to track issues for this repository. Which project board would be appropriate to add this one to?

[marvinhagemeister]

Ok so this is interesting:

I deleted node_modules and our lockfile and ran a fresh install with npm, yarn and pnpm and they all behave differently 😬 Here's an overview as to what happens with each package manager:

Package Manger	@types/react	@types/react-reconciler/@types/react
npm	17.0.45	17.0.45
pnpm	17.0.45	17.0.45
yarn	17.0.45	18.0.9

This makes me conclude that something iffy is going on in the resolver of yarn. It's the only package manager that doesn't hoist out a shared types version in our scenario.

EDIT: This is the issue related to that on the yarnpkg issue tracker: yarnpkg/yarn#4489

[kumar303]

Thanks for filing this, Marvin. We are tracking this in a few places, scattered across various repos 😅

Here's the upstream issue in remote-ui and here's a patch in progress to fix the extension template which is fixing the template issue.

[KTruong008]

Still getting this issue with CLI. 3.0 when trying to use UI components:

Unreachable code detected.ts(7027) 'Banner' cannot be used as a JSX component.

Not sure how to fix it other than adding ts-ignores everywhere. Code's looking wonky:

// @ts-ignore
    <BlockStack spacing={'loose'}>
      {/* @ts-ignore */}
      <Divider />
      {/* @ts-ignore */}
      <BlockStack spacing="base">
        {/* @ts-ignore */}
        <Heading>You might also like</Heading>
      </BlockStack>
    </BlockStack>

[jamesvidler]

This issue has since been resolved in the CLI version 3.16.2.