cli: [Bug]: ExtensionTimeoutError: Extension timed out while mounting

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

(JavaScript React) checkout ui extension should be displayed in the checkout for the development preview and hot reloading should be available.

I scaffold a checkout ui extension (JavaScript React) using the command: yarn generate extension

I cannot preview the extension in the preview mode from the developer console. I saw the browser console and found that there was the following error: Extension gid://shopify/LocalActivatedExtension/10 timed out while mounting at app.latest.en.97a3a614ace092cfb047.js:1:198739

But when I create the extension using Javascript only without react, it mounts well and I can see the hot reloading.

when we deploy the app, we can use (JavaScript React) checkout ui extension as well in the checkout.

Actual behavior

(JavaScript React) checkout ui extension was not being displayed in the checkout and I saw the following error in the browser console: ExtensionTimeoutError: Extension gid://shopify/LocalActivatedExtension/10 timed out while mounting at app.latest.en.97a3a614ace092cfb047.js:1:198739

Verbose output

Extension gid://shopify/LocalActivatedExtension/10 timed out while mounting at app.latest.en.97a3a614ace092cfb047.js:1:198739

Reproduction steps

create a checkout ui extension using the command: yarn generate extension
selection extension type Checkout UI and give any name
then select JavaScript React

then preview the extension on the store where Checkout Extensibility preview is enabled.

the checkout UI extension will not render on the checkout page for the development preview.

You can see the following error in the console: ExtensionTimeoutError: Extension gid://shopify/LocalActivatedExtension/10 timed out while mounting at app.latest.en.97a3a614ace092cfb047.js:1:198739

Operating System

Ubuntu 22.04.2 LTS

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

3.47.5

Shell

zsh

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

18.12.1

What language and version are you using in your application?

Node 18.12.1

About this issue

Original URL
State: open
Created a year ago
Reactions: 4
Comments: 29 (7 by maintainers)

Most upvoted comments

I can see the network request to /extensions endpoint.

If you can see the network request is successful (200) for both that and the JS bundle itself, one possible explanation is that your rendered extension target does not match your configured extension target.

For example, if you have this in your config:

[[extensions.targeting]]
target = "purchase.checkout.block.render"
module = "./Checkout.jsx"

and you have this in Checkout.jsx:

export default reactExtension(
  'purchase.cart-line-item.line-components.render',
  () => <Extension />,
);

then you will get a timeout error.

kumar303 on Oct 4, 2023