[Bug]: 'TypeError: Cannot read property 'isBatchingLegacy' of undefined' when running npm run dev after creating a checkout-ui extension

philkendallsimba commented 1 year ago

Please confirm that you have:

[X] Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
[X] Reproduced the issue in the latest CLI version.

In which of these areas are you experiencing a problem?

Extension

Expected behavior

Extension preview should have worked.

Actual behavior

after running npm run dev, the following error occured:

TypeError: Cannot read property 'isBatchingLegacy' of undefined at ensureRootIsScheduled (/home/phkendall/git/shopify-app-checkout-test/phil-test-2/node_modules/react-reconciler/cjs/react-reconciler.development.js:17731:35) at scheduleUpdateOnFiber (/home/phkendall/git/shopify-app-checkout-test/phil-test-2/node_modules/react-reconciler/cjs/react-reconciler.development.js:17636:5) at Object.updateContainer (/home/phkendall/git/shopify-app-checkout-test/phil-test-2/node_modules/react-reconciler/cjs/react-reconciler.development.js:21022:5) at Ink.unmount (file:///home/phkendall/git/shopify-app-checkout-test/phil-test-2/node_modules/ink/build/ink.js:262:20) at EventEmitter.emit (events.js:412:35) at EventEmitter.emit (domain.js:475:12) at emit (/home/phkendall/git/shopify-app-checkout-test/phil-test-2/node_modules/signal-exit/index.js:105:13) at processEmit [as emit] (/home/phkendall/git/shopify-app-checkout-test/phil-test-2/node_modules/signal-exit/index.js:193:7)

Verbose output

2023-04-20T10:45:23.570Z: Running command app dev
2023-04-20T10:45:23.577Z: Ensuring that the user is authenticated with the Partners API with the following scopes:
[]

2023-04-20T10:45:23.579Z: Getting session store...
2023-04-20T10:45:23.581Z: Validating existing session against the scopes:
[
  "openid",
  "https://api.shopify.com/auth/shop.admin.graphql",
  "https://api.shopify.com/auth/shop.admin.themes",
  "https://api.shopify.com/auth/partners.collaborator-relationships.readonly",
  "https://api.shopify.com/auth/shop.storefront-renderer.devtools",
  "https://api.shopify.com/auth/partners.app.cli.access"
]
For applications:
{
  "partnersApi": {
    "scopes": []
  }
}

2023-04-20T10:45:23.582Z: Sending Identity Introspection request to URL: https://accounts.shopify.com/oauth/introspection
2023-04-20T10:45:23.582Z: Sending POST request to URL https://accounts.shopify.com/oauth/introspection
With request headers:
 - User-Agent: Shopify CLI; v=3.45.0
 - Keep-Alive: timeout=30
 - Sec-CH-UA-PLATFORM: linux
 - Content-Type: application/json

2023-04-20T10:45:23.837Z: Request to https://accounts.shopify.com/oauth/introspection completed in 247 ms
With response headers:
 - cache-control: no-cache, no-store, private, must-revalidate, max-age=0
 - content-type: application/json; charset=utf-8
 - etag: W/"fd1ec0b69108a7145a668c180c74b7d2"
 - x-request-id: ae9b3cd3-8f5e-45f0-bc60-0af9a9c16ff6

2023-04-20T10:45:23.839Z: The identity token is valid: true
2023-04-20T10:45:23.840Z: 
The validation of the token for application/identity completed with the following results:
- It's expired: false
- It's invalid in identity: false

2023-04-20T10:45:23.840Z: Verifying that the user has a Partner organization
2023-04-20T10:45:23.840Z: Sending "Partners" GraphQL request:
  {
    organizations(first: 1) {
      nodes {
        id
      }
    }
  }

With request headers:
 - User-Agent: Shopify CLI; v=3.45.0
 - Keep-Alive: timeout=30
 - Sec-CH-UA-PLATFORM: linux
 - Content-Type: application/json

2023-04-20T10:45:24.108Z: Request to https://partners.shopify.com/api/cli/graphql completed in 264 ms
With response headers:
 - cache-control: max-age=0, private, must-revalidate
 - content-type: application/json; charset=utf-8
 - etag: W/"55dcb59006e977e95f6d6aca4ee9051e"
 - x-request-id: 1db0b342-80b2-42cb-9a46-fe97c6c7cc5e

2023-04-20T10:45:24.109Z: Reading cached app information for directory /home/phkendall/git/shopify-app-checkout-test/phil-test-2...
2023-04-20T10:45:24.110Z: Sending "Partners" GraphQL request:
  query FindOrganization($id: ID!) {
    organizations(id: $id, first: 1) {
      nodes {
        id
        businessName
        website
        betas {
          appUiDeployments
          cliTunnelAlternative
        }
      }
    }
  }

With variables:
{
  "id": "1371467"
}

With request headers:
 - User-Agent: Shopify CLI; v=3.45.0
 - Keep-Alive: timeout=30
 - Sec-CH-UA-PLATFORM: linux
 - Content-Type: application/json

2023-04-20T10:45:24.401Z: Request to https://partners.shopify.com/api/cli/graphql completed in 290 ms
With response headers:
 - cache-control: max-age=0, private, must-revalidate
 - content-type: application/json; charset=utf-8
 - etag: W/"e913938a0ad2234349c452c769b8e56f"
 - x-request-id: e9589d89-d20d-4045-a221-c70e7a516678

2023-04-20T10:45:24.402Z: Sending "Partners" GraphQL request:
  query FindApp($apiKey: String!) {
    app(apiKey: $apiKey) {
      id
      title
      apiKey
      organizationId
      apiSecretKeys {
        secret
      }
      appType
      grantedScopes
    }
  }

With variables:
{
  "apiKey": "bd45b01631e6f70558022bc9d3ff47ad"
}

With request headers:
 - User-Agent: Shopify CLI; v=3.45.0
 - Keep-Alive: timeout=30
 - Sec-CH-UA-PLATFORM: linux
 - Content-Type: application/json

2023-04-20T10:45:24.402Z: Sending "Partners" GraphQL request:
  query FindOrganization($id: ID!, $shopDomain: String) {
    organizations(id: $id, first: 1) {
      nodes {
        id
        businessName
        website
        betas {
          appUiDeployments
        }
        stores(shopDomain: $shopDomain, first: 1, archived: false) {
          nodes {
            shopId
            link
            shopDomain
            shopName
            transferDisabled
            convertableToPartnerTest
          }
        }
      }
    }
  }

With variables:
{
  "id": "1371467",
  "shopDomain": "philtest03.myshopify.com"
}

With request headers:
 - User-Agent: Shopify CLI; v=3.45.0
 - Keep-Alive: timeout=30
 - Sec-CH-UA-PLATFORM: linux
 - Content-Type: application/json

2023-04-20T10:45:24.706Z: Request to https://partners.shopify.com/api/cli/graphql completed in 301 ms
With response headers:
 - cache-control: max-age=0, private, must-revalidate
 - content-type: application/json; charset=utf-8
 - etag: W/"c8f831ecf7bb2f0bef14bffae6810c20"
 - x-request-id: 25ede461-6f9d-492d-a0dd-9a1145cf78da

2023-04-20T10:45:24.936Z: Request to https://partners.shopify.com/api/cli/graphql completed in 533 ms
With response headers:
 - cache-control: max-age=0, private, must-revalidate
 - content-type: application/json; charset=utf-8
 - etag: W/"11393c5d982eed967297dea58f9a889e"
 - x-request-id: 31200741-fb20-4890-8863-f463a0f0e2e2

2023-04-20T10:45:24.937Z: Storing app information for directory /home/phkendall/git/shopify-app-checkout-test/phil-test-2:{
  "appId": "bd45b01631e6f70558022bc9d3ff47ad",
  "title": "phil-checkout-test",
  "directory": "/home/phkendall/git/shopify-app-checkout-test/phil-test-2",
  "storeFqdn": "philtest03.myshopify.com",
  "orgId": "1371467"
}
2023-04-20T10:45:24.948Z: Obtaining the dependency manager in directory /home/phkendall/git/shopify-app-checkout-test/phil-test-2...
2023-04-20T10:45:24.983Z: Obtaining the dependency manager in directory /home/phkendall/git/shopify-app-checkout-test/phil-test-2...
2023-04-20T10:45:24.995Z: 
Running system process:
  · Command: ruby -v
  · Working directory: /home/phkendall/git/shopify-app-checkout-test/phil-test-2

2023-04-20T10:45:25.188Z: Request to https://monorail-edge.shopifysvc.com/v1/produce completed in 181 ms
With response headers:
 - x-request-id: 513047cc-c597-4b8b-8fca-c044b8e80b45

2023-04-20T10:45:25.189Z: Analytics event sent: {
  "command": "app dev",
  "time_start": 1681987523571,
  "time_end": 1681987524969,
  "total_time": 1398,
  "success": true,
  "cli_version": "3.45.0",
  "ruby_version": "2.7.0",
  "node_version": "14.21.3",
  "is_employee": false,
  "uname": "linux amd64",
  "env_ci": false,
  "env_plugin_installed_any_custom": false,
  "env_plugin_installed_shopify": "[\"@shopify/app\",\"@shopify/cli\",\"@shopify/plugin-cloudflare\",\"@shopify/plugin-did-you-mean\",\"@shopify/plugin-ngrok\"]",
  "env_shell": "bash",
  "env_device_id": "3c0d9b6569fe890981b0a9e81076a2f168448bc7",
  "env_cloud": "localhost",
  "env_package_manager": "npm",
  "cmd_all_launcher": "npm",
  "cmd_all_topic": "app",
  "cmd_all_plugin": "@shopify/app",
  "cmd_all_verbose": true,
  "cmd_all_path_override": true,
  "cmd_all_path_override_hash": "7ea79d230e938999d8370a9006e7e7ef531a775e",
  "cmd_app_dependency_installation_skipped": false,
  "cmd_app_reset_used": false,
  "args": "--verbose",
  "env_plugin_installed_all": "[\"@shopify/app\",\"@shopify/cli\",\"@shopify/plugin-cloudflare\",\"@shopify/plugin-did-you-mean\",\"@shopify/plugin-ngrok\"]",
  "metadata": "{\"extraPublic\":{},\"extraSensitive\":{}}"
}
2023-04-20T10:45:25.190Z: Completed command app dev
TypeError: Cannot read property 'isBatchingLegacy' of undefined
    at ensureRootIsScheduled (/home/phkendall/git/shopify-app-checkout-test/phil-test-2/node_modules/react-reconciler/cjs/react-reconciler.development.js:17731:35)
    at scheduleUpdateOnFiber (/home/phkendall/git/shopify-app-checkout-test/phil-test-2/node_modules/react-reconciler/cjs/react-reconciler.development.js:17636:5)
    at Object.updateContainer (/home/phkendall/git/shopify-app-checkout-test/phil-test-2/node_modules/react-reconciler/cjs/react-reconciler.development.js:21022:5)
    at Ink.unmount (file:///home/phkendall/git/shopify-app-checkout-test/phil-test-2/node_modules/ink/build/ink.js:262:20)
    at EventEmitter.emit (events.js:412:35)
    at EventEmitter.emit (domain.js:475:12)
    at emit (/home/phkendall/git/shopify-app-checkout-test/phil-test-2/node_modules/signal-exit/index.js:105:13)
    at processEmit [as emit] (/home/phkendall/git/shopify-app-checkout-test/phil-test-2/node_modules/signal-exit/index.js:193:7)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! phil-test-2@1.0.0 dev: `shopify app dev "--verbose"`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the phil-test-2@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/phkendall/.npm/_logs/2023-04-20T10_45_25_238Z-debug.log

Reproduction steps

npm init @shopify/app@latest (or 3.45.1)
cd to app folder
npm run shopify app generate extension -- --type checkout_ui --name=test-extension
npm run dev

Operating System

Windows 10: WSL2 using Ubuntu 20.04.5 LTS

Shopify CLI version (check your project's `package.json` if you're not sure)

3.45.1

Shell

bash

Node version (run `node -v` if you're not sure)

v14.21.3

What language and version are you using in your application?

Node 14.21.3

amcaplan commented 1 year ago

Hi @philkendallsimba, thanks for reporting this issue!

Given that react-reconciler is in the stack trace, this seems to be a conflict because the CLI uses React 18, but the UI extension uses React 17. However, this should have been fixed in 3.45.1, as reported here.

Here is the root-level package.json I have through following your steps above, which seems to work correctly:

{
  "name": "fruitful-supply-app",
  "version": "1.0.0",
  "main": "web/index.js",
  "license": "UNLICENSED",
  "scripts": {
    "shopify": "shopify",
    "build": "shopify app build",
    "dev": "shopify app dev",
    "info": "shopify app info",
    "generate": "shopify app generate",
    "deploy": "shopify app deploy"
  },
  "dependencies": {
    "@shopify/app": "3.45.1",
    "@shopify/checkout-ui-extensions-react": "^0.24.0",
    "@shopify/cli": "3.45.1",
    "react": "^17.0.2"
  },
  "author": "amcaplan",
  "overrides": {
    "@types/react": "17.0.30"
  }
}

Are you able to share the package.json you get from following the repro steps, so we can see if anything looks different?

lucidlive commented 1 year ago

Same error for me - I tried playing with versions of React to no avail

manelephant commented 1 year ago

Same for me - not working

amcaplan commented 1 year ago

@lucidlive @manelephant can you let me know what OS/shell/Node you're using? And share your package.json if you feel comfortable? That might help spot the pattern of where this appears.

So far I haven't been able to reproduce.

amcaplan commented 1 year ago

@lucidlive @manelephant can you let me know what OS/shell/Node you're using? And share your package.json if you feel comfortable? That might help spot the pattern of where this appears.

So far I haven't been able to reproduce.

amcaplan commented 1 year ago

Hi all, I've finally managed to reproduce locally.

It looks like this is only an issue on older versions of Node and npm. If you're on Node 16+ and npm 8+ this doesn't seem to happen, because @shopify/cli-kit gets its own version of react-reconciler and react.

Since Node 14 has reached end-of-life and isn't receiving security fixes, I don't think we are likely to invest in a fix for this specific case.

If it's important to you to continue using Node 14, I welcome you to investigate further and submit a patch. However, note that a near-future version of the CLI will drop support for Node 14, so it's recommended to upgrade.

Has anyone experienced this with more recent versions of Node and npm?

amcaplan commented 1 year ago

By the way, it seems the latest npm actually still supports Node 14. So maybe just try upgrading npm and see if that's sufficient for your purposes? And please let me know how it goes!

philkendallsimba commented 1 year ago

Hi all, I've finally managed to reproduce locally.

It looks like this is only an issue on older versions of Node and npm. If you're on Node 16+ and npm 8+ this doesn't seem to happen, because @shopify/cli-kit gets its own version of react-reconciler and react.

Since Node 14 has reached end-of-life and isn't receiving security fixes, I don't think we are likely to invest in a fix for this specific case.

If it's important to you to continue using Node 14, I welcome you to investigate further and submit a patch. However, note that a near-future version of the CLI will drop support for Node 14, so it's recommended to upgrade.

Has anyone experienced this with more recent versions of Node and npm?

I can confirm that once upgraded to node 18, I no longer have the issue. We didn't need to use node 14 for any specific reason, so am happy with upgrading.

The Shopify CLI documentation at https://shopify.dev/docs/apps/tools/cli states a minimum node version of 14.17.0, so I would suggest the documentation gets updated.

Thanks for investigating.

tkejr commented 1 year ago

same errror and I am suing node version 19

Briggzly commented 12 months ago

@tkejr same here have you had any luck?

Shopify / cli