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

philkendallsimba · 2023-04-20T10:52:03Z

Please confirm that you have:

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.)
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

The text was updated successfully, but these errors were encountered:

amcaplan · 2023-04-25T13:57:55Z

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 · 2023-05-12T16:48:15Z

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

manelephant · 2023-05-17T22:31:46Z

Same for me - not working

amcaplan · 2023-05-18T13:27:20Z

@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 · 2023-05-18T13:27:22Z

@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 · 2023-05-21T10:16:50Z

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 · 2023-05-21T11:46:37Z

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 · 2023-05-23T08:04:21Z

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 · 2023-09-21T21:02:44Z

same errror and I am suing node version 19

Briggzly · 2023-10-24T23:33:07Z

@tkejr same here have you had any luck?

ericute · 2025-01-13T15:14:12Z

I am getting the same problem, I'm using node v20.11.0.

Here's a snippet of the dependencies in my package.json:

  ...
  "dependencies": {
    "@shopify/app": "^3.48.4",
    "@shopify/app-bridge": "^3.7.9",
    "@shopify/app-bridge-react": "^3.7.9",
    "@shopify/app-bridge-utils": "^3.5.1",
    "@shopify/cli": "^3.48.4",
    "@shopify/polaris": "^8.2.2",
    "@shopify/polaris-icons": "^4.11.0",
    "@shopify/shopify-api": "^7.6.0",
    "@shopify/ui-extensions": "2025.1.0",
    "@shopify/ui-extensions-react": "2025.1.0",
    "@svgr/webpack": "^8.1.0",
    "axios": "^0.21.1",
    "cors": "^2.8.5",
    "esm": "^3.2.25",
    "graphql": "^16.8.0",
    "jsdoc": "^3.6.6",
    "jsonwebtoken": "^8.5.1",
    "liquidjs": "^6.4.3",
    "mixpanel": "^0.13.0",
    "mixpanel-browser": "^2.41.0",
    "moment": "^2.29.1",
    "moment-timezone": "^0.5.43",
    "next": "^10.0.4",
    "nextjs-cors": "^2.1.2",
    "papaparse": "^5.4.1",
    "pg": "^8.5.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-liquid": "^2.0.1",
    "react-modal": "^3.14.2",
    "react-reconciler": "0.29.0",
    "rollbar": "^2.21.1",
    "sanitize-html": "^2.3.3",
    "shopify-api-node": "^3.12.5",
    "shopify-nextjs-toolbox": "2.0.0",
    "throng": "^5.0.0",
    "uuid": "^8.3.2",
  },
  ...
}

Update: Tried different node versions and got the same error:

v18.15.0
v18.17.0
v20.9.0
v20.11.0

ericute · 2025-01-14T15:21:32Z

In case anyone else encounters the same issue, here's the final libs in my package.json that made it work:

  ...
  "@shopify/admin-ui-extensions-react": "^1.1.0",
  "@shopify/cli": "^3.73.1",
  "@shopify/ui-extensions": "2025.1.0",
  "@shopify/ui-extensions-react": "2025.1.0",
  "react-reconciler": "0.29.0",
  ...

Also, I needed to downgrade to Node v18.20.5 for this to work.

philkendallsimba added the Type: Bug Something isn't working label Apr 20, 2023

amcaplan added State: Waiting for feedback and removed State: Waiting for feedback labels Apr 25, 2023

philkendallsimba closed this as completed May 23, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

philkendallsimba commented Apr 20, 2023

amcaplan commented Apr 25, 2023

lucidlive commented May 12, 2023

manelephant commented May 17, 2023

amcaplan commented May 18, 2023

amcaplan commented May 18, 2023

amcaplan commented May 21, 2023

amcaplan commented May 21, 2023

philkendallsimba commented May 23, 2023

tkejr commented Sep 21, 2023

Briggzly commented Oct 24, 2023

ericute commented Jan 13, 2025 •

edited

Loading

ericute commented Jan 14, 2025

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

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

Comments

philkendallsimba commented Apr 20, 2023

Please confirm that you have:

In which of these areas are you experiencing a problem?

Expected behavior

Actual behavior

Verbose output

Reproduction steps

Operating System

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

Shell

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

What language and version are you using in your application?

amcaplan commented Apr 25, 2023

lucidlive commented May 12, 2023

manelephant commented May 17, 2023

amcaplan commented May 18, 2023

amcaplan commented May 18, 2023

amcaplan commented May 21, 2023

amcaplan commented May 21, 2023

philkendallsimba commented May 23, 2023

tkejr commented Sep 21, 2023

Briggzly commented Oct 24, 2023

ericute commented Jan 13, 2025 • edited Loading

ericute commented Jan 14, 2025

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

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

ericute commented Jan 13, 2025 •

edited

Loading