We are building an app in Shopify that has a button on product page that when pressed it opens a modal window. The button displays, the scritpt is loaded (console Network) but the handler for the button cannot find the function. It’s exported and the function is called in the app block for the theme extension.

iwtmodalbutton.liquid

{{ 'iwtmodalbutton.js' | asset_url | script_tag: 'module' }}

  {% render 'offer_button' %}

{% schema %}
{
  "name": "Offer Button",
  "target": "section",
  "settings": []
}
{% endschema %}

this is the function…iwtmodalbutton.js

'use client';

import React, { useState, useEffect } from 'react';
import { Checkbox } from '@shopify/polaris';
import {Modal} from 'react-modal';

console.log('iwtmodalbutton.js loaded');


export default function openOfferModal({ isOpen, onClose, onSubmit, isProductPage }) {
  const [formData, setFormData] = useState({
    firstName: '',
    lastName: '',
    email: '',
    phone: '',
    postalCode: '',
    offerAmount: '',
    agreedToTerms: false,
  });
  const [cartData, setCartData] = useState(null);

  useEffect(() => {
    // Retrieve cart contents from shopify
    fetch('/cart.js', {
        method: 'GET',
        headers: { 'X-Shopify-Access-Token': process.env.SHOPIFY_API_KEY}
        })
      .then((response) => response.json())
      .then((cart) => setCartData(cart))
      .catch((error) => console.error('Error fetching cart:', error));
  }, []);

  const handleChange = (field, value) => {
    setFormData({ ...formData, [field]: value });
  };

  const handleSubmit = () => {
    // Validate form fields
    if (!formData.agreedToTerms) {
      alert('Please agree to the terms of service.');
      return;
    }

    // Call the onSubmit callback with the form data
    onSubmit(formData);
  };

  const handleAddToCart = () => {
    if (isProductPage) {
      // Implement the logic to add the product to the cart here
      alert('Adding product to cart...');
    }
  };

  return (
    <Modal
      open={isOpen}
      onClose={onClose}
      title="Make an Offer"
      primaryAction={{
        content: 'Submit Offer',
        onAction: handleSubmit,
        disabled: !formData.agreedToTerms, // Disable button if terms not agreed
      }}
      secondaryActions={[{ content: 'Cancel', onAction: onClose }]}
    >
      <Modal.Section>
        <div className='modalWelcome'>
          <h1 className="header">Wanna Make a Deal?</h1>
          <p className="desc">Make an offer to buy your cart - give us our best shot!</p>
        </div>
        {cartData && (
          <table>
            <thead>
              <tr>
                <th>Product ID</th>
                <th>SKU</th>
                <th>Product Name</th>
                <th>Option</th>
                <th>Variant</th>
                <th>Quantity</th>
                <th>Price</th>
              </tr>
            </thead>
            <tbody>
              {cartData.items.map((item) => (
                <tr key={item.id}>
                  <td>{item.product_id}</td>
                  <td>{item.sku}</td>
                  <td>{item.product_title}</td>
                  <td>{item.variant_options[0]}</td>
                  <td>{item.variant_title}</td>
                  <td>{item.quantity}</td>
                  <td>{Shopify.formatMoney(item.price)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
        <div>
          {isProductPage && (
            <button onClick={handleAddToCart} className="addToCartButton">Add to Cart</button>
          )}
          <form className="formContainer">
            <input type="text" id="fname" placeholder="Your First Name" className="inputTXT" />
            <input type="text" id="lname" placeholder="Your Last Name" className="inputTXT" />
            <input type="email" id="email" placeholder="Your eMail" className="inputTXT" />
            <input type="tel" id="mobile" placeholder="Your Mobile Number" className="inputTXT" />
            <input type="number" id="offerAmount" placeholder="Make your offer" className="inputTXT" />
            <Checkbox checked={formData.agreedToTerms} onChange={(value) => handleChange('agreedToTerms', value)} la
            <input type="submit" id="submit" className="submitButton" value="Make Your Offer!"/>
          </form>
        </div>
      </Modal.Section>
    </Modal>
  );
};

Error code in console…

Uncaught ReferenceError: openOfferModal is not defined
at HTMLButtonElement.onclick (cart:1228:79)

I tried compiling the code using Babel. CommonJS use require and Shopify threw an error because the form should display to the client.

The above is the non-compiled function. Still poking around and opened support in Shopify forum but those answers are hit and miss.