Is it possible to split a component file in Checkout UI Extention?

[Monesynth]

Hi, I'm new to develop Checkout UI Extension.

Is it possible to split JSX components from 'Checkout.jsx' file by creating own custom directories and files like this.

In Checkout.jsx:

import { reactExtension } from "@shopify/ui-extensions-react/checkout";
import { ShippingOptions } from "./components/ShippingOptions"; // <= 🆕 This is what I created.

const shippingOptionListAfterRneder = reactExtension(
"purchase.checkout.shipping-option-list.render-after",
() => <ShippingOptions />
);
export { shippingOptionListAfterRneder };

I created '/components/' directory in '/src' directory. and put own 'ShippingOptions' component file in it. Then I import that component from 'Checkout.jsx'. but the Shopify CLI says the following:

shopify.extension.toml:

api_version = "2023-10"

[capabilities]
api_access = true
network_access = true
block_progress = true

[[extensions]]
type = "ui_extension"
name = "checkout-ui"
handle = "checkout-ui"

# [START order-status.config-extension]
[[extensions.targeting]]
target = "purchase.checkout.shipping-option-list.render-after"
module = "./src/Checkout.jsx"
export = "shippingOptionListAfterRneder"

I wanted to split jsx components from main module, because that file might be so fat, but it's not possible?

[Monesynth · Accepted solution]

It's been solved, this is just a js typo problem, I created 'ShippingOptions.jsx', but 'ShippingOptions.js' is right. I renamed it, and it works!

[Liam]

Glad you figured this out and thanks for coming back to post your solution!

[Catalin_G]

And why was that a "mistake/typo"? is there somewhere in the docs specified we should not use the jsx/tsx extension for nested components? I couldn't find anything related to it

[suho]

yes wondering the same? if anyone can reply to this?

[Catalin_G]

If you still want to use the jsx/tsx files, you will need to add the extension to files when importing them. Example:

You create a new component, `Example.jsx`
You import this component inside `Checkout.jsx` as `import Example from "./components/Example.jsx`

[suho]

yes thanks!