"Unexpected" error when adding multi page extension

edhgoose
Shopify Partner
1 0 0

Hey,

 

I'm trying to create an extension which runs both on the Order Status and Thank You pages.

 

I've used https://shopify.dev/docs/apps/build/checkout/best-practices/create-multi-page-extensions#post-purcha... for inspiration.

 

In this, there is two const's which are exported, and then the TOML file has export = "thankYouRender" to reference which one.

 

But when I do this and run `yarn run shopify deploy`, I get:

 

✘ [ERROR] Unexpected "thankYouRender"

extensions/post-purchase-ui/src/PostPurchase.tsx:20:7:
20 export thankYouRender;
╵ ~~~~~~~~~~~~~~


Build failed with 1 error:
extensions/post-purchase-ui/src/PostPurchase.tsx:20:7: ERROR: Unexpected "thankYouRender"

To investigate the issue, examine this stack trace:
at (extensions/post-purchase-ui/src/PostPurchase.tsx:20)
at failureErrorWithLog (esbuild/lib/main.js:1650)
at (esbuild/lib/main.js:1058)
at runOnEndCallbacks (esbuild/lib/main.js:1485)
at buildResponseToResult (esbuild/lib/main.js:1056)
at (esbuild/lib/main.js:1068)
at new Promise
at on-end (esbuild/lib/main.js:1067)
at handleRequest (esbuild/lib/main.js:731)
at handleIncomingPacket (esbuild/lib/main.js:756)
at readFromStdout (esbuild/lib/main.js:679)

Error: Build failed with 1 error:
extensions/post-purchase-ui/src/PostPurchase.tsx:20:7: ERROR: Unexpected "thankYouRender"
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

 

I can't seem to decipher the error, so I'm confused.

 

The relevant parts of the code I think are:

 

[[extensions.targeting]]
module = "./src/PostPurchase.tsx"
target = "purchase.thank-you.block.render"
export = "thankYouRender"



[[extensions.targeting]]
module = "./src/PostPurchase.tsx"
target = "customer-account.order-status.block.render"
export = "orderStatusRender"

 

and

 

 

const thankYouRender = reactExtension(
"purchase.thank-you.block.render",
() => <Extension />
);
export thankYouRender;

const orderStatusRender = reactExtension(
"customer-account.order-status.block.render",
() => <Extension />
);
export orderStatusRender;


function Extension() {
...
}

 

When I remove one of the extension points and change the other to just `export default` it works fine.

Any clues as to what I'm doing wrong?


Thanks,
Ed

Replies 0 (0)