useBuyerJourneyIntercept render issue - Minified React error #300

[Alon_Joshua]

An extension UI in with this piece of code using useBuyerJourneyIntercept causes the extension to throw an error - Minified React error #300.
This happens only in production after the extension is deploys, not throw the dev mode with the CLI.

There is a related issue here at github about this.

useBuyerJourneyIntercept throws react error

The code:

const toBlockDropshipCheckout = !mandatoryProductsIncluded || !dropshippingOnlyCart;
if (toBlockDropshipCheckout) {
	useBuyerJourneyIntercept(({ canBlockProgress }) => {
		if (canBlockProgress) {
			if(!mandatoryProductsIncluded){
				return {
					behavior: 'block',
					reason: 'There is no mandatory dropship product in the cart',
					errors: [
						{
							message: translate('mandatoryProductsIncluded'),
						},
					],
				};
			}
			if(!dropshippingOnlyCart){
				return {
					behavior: 'block',
					reason: 'The cart contains non-dropshipped products',
					errors: [
						{
							message: translate('dropshippingOnlyCart'),
						},
					],
				};
			}
		}
		return {
			behavior: 'allow',
		};
	});
}

if (toBlockDropshipCheckout) {
	return null;
}

return (
	<TextField 
		label='Dropship email'
		onChange={(value) => {
			applyMetafieldsChange({
				type: 'updateMetafield',
				valueType: 'string',
				namespace: metafieldNamespace,
				key: metafieldKey,
				value: dropshipEmailMetafield?.value || value,
			});
		}}
	/>
);

[avocadomayo]

Hey Alon, are you getting this error? Minified React error #310 – React

I see in your code snippet you are calling the hook useBuyerJourneyIntercept conditionally. Can you try moving it out of the conditional, and put it at the component’s top level?

Please see Rules of Hooks – React

[Alon_Joshua]

Worked! Thanks @avocadomayo