[BUG] Shopify.CountryProvinceSelector is not a constructor

[zomars]

I'm getting this error at the /account/addresses template:

addresses.js?c700:17 Uncaught TypeError: Shopify.CountryProvinceSelector is not a constructor
    at eval (addresses.js?c700:17)
    at Object../assets/scripts/templates/customers/addresses.js (template.addresses.js:957)
    at __webpack_require__ (template.addresses.js:710)
    at fn (template.addresses.js:95)
    at Object.4 (template.addresses.js:969)
    at __webpack_require__ (template.addresses.js:710)
    at template.addresses.js:762
    at template.addresses.js:765

My guess would be that the shopify_common.js file is not being loaded anywhere in the theme as stated here.

[zomars]

I've had to solve this following a comment from this post. I don't think it's an optimal solution thought:

In my theme.liquid file inside the headtag:

  {% if template contains 'customers' %}
      {{ "shopify_common.js" | shopify_asset_url | script_tag }}
      {{ "customer_area.js"  | shopify_asset_url | script_tag }}
  {% endif %}

[montalvomiguelo]

Maybe shopify_common.js could be another package in theme-scripts so we could use it as dependency in starter-theme

package.json

  "dependencies": {
+   "@shopify/theme-common": "^1.0.0-alpha.3",
    "@shopify/theme-a11y": "^1.0.0-alpha.3",
    "@shopify/theme-cart": "^1.0.0-alpha.3",
    "@shopify/theme-currency": "^1.0.0-alpha.3",

src/assets/scripts/templates/customers/addresses.js

 import $ from 'jquery';
+import { CountryProvinceSelector, postLink } from '@shopify/theme-common';

-new Shopify.CountryProvinceSelector(countrySelector, provinceSelector, {
+new CountryProvinceSelector(countrySelector, provinceSelector, {

-Shopify.postLink(`/account/addresses/${formId}`, {
+postLink(`/account/addresses/${formId}`, {

[zomars]

That would make sense. It's kinda confusing to use ES6 modules in combination with the assumption of global variables.

[DPerkunas]

Any news on this? Started building a new theme and this is.. bad..

[MisterAwesome]

As this is the top result in Google I'll share my temporary fix.

It might not be the best option, but I fixed this by fallbacking to "@shopify/theme-addresses": "1.0.0" instead of "@shopify/theme-addresses": "^3.0.0". This version has the function CountryProvinceSelector() while the other does not.

[preston206]

If you don't mind I'd like to add my solution. I was using the same code from a previous theme build, however the new theme was getting the error in question here and the previous theme worked fine. So I compared and discovered that the order of the scripts were different. I guess I moved them around at some point and forgot about it.

My solution: shopify_common.js needs to be called before theme.js

[hanshank]

Bump! I'm having the same issue as @zomars . I temporarily solved it by downgrading to "@shopify/theme-addresses": "1.0.0" as suggested by @MisterAwesome. Are you able to include the CountryProvinceSelector constructor in v 4.0? THANKS...!! :)

[entozoon]

Yeah why does this not exist?
The official docs suggest to use it, but the package doesn't contain it. It was removed at some point and hasn't been updated in years.
Incredibly confusing, I mean. Did they intend to replace it all with AddressForm ? Because that component is super strict on the markup required and doesn't suggest at all how you'd use it for multiple forms on the same page (e.g. addresses edit) so it's pretty shoddy