Cannot find name 'Snipcart'

Support
,
#1

every time I I reference Snipcart within my angular project I get an error Cannot find name ‘Snipcart’

The script is loaded prgramatically before any trial to refernce Snipcart

Is there any missing lines of code that I need to add so I can make this reference to JavaScript SDK API without issue

For example

document.addEventListener('snipcart.ready',  () => {

    if (window.Snipcart) {

      const count = Snipcart.api.items.count();

    } else {

      console.error("Snipcart is not initialized yet");

  }

});

}

#2

Is this a runtime or build-time error?

I am asking this because with TypeScript, you usually need to tell it something exists via a .d.ts file or your own interface definitions. A .d.ts file is usually provided to you by the vendor.

#3

it is a build time error related to this line Snipcart.api.items.count and other similar lines

#4

Try adding a .d.ts file to your project with this in it (untested!):

declare namespace Snipcart {
    const api: any;
    const events: any;
    const store: any;
}

This should at least get rid of the error “Snipcart not found”. You might need to add the file to your Angular configuration somehow, I am not an expert with it.

You can read about TypeScript global libraries here.

1 Like
#5

I created the file and the tsconfig.app.json is already confiigued with

“include”: [
“src/**/*.ts”
]

so it should be fine:
The build time disappeared but now I face the run time
core.mjs:7167 ERROR TypeError: Snipcart.api.configure is not a function

This is the same error I got when I tried to create an interface to define Snipcart and also when I declared variable of type any called Snipcart. in all case the Build time disappear but I face this run time error.

The Snipcart itself is working and I can add products to cart and proceed to checkout. but when I need to refer to these API functions for more customization it fails with the mentioned error

#6

I don’t know where you are getting Snipcart.api.configure from but as far as I can see, there is no such function, just as the error says.

What is the point of this method call?

#7

Snipcart!.api.configure(‘show_continue_shopping’, true);
this call to make continue shopping button visible. I recall I found this in one of the discusions threads on this forum.

But it is not about this api call but also on other api calls like

Snipcart.api.items.count()

#8

finally it works with code you shared with me in other thread for updating customer data.

it is not still working with other api calls but since it works with this one I consider the case is solve

try {

        await Snipcart.api.cart.update({

            email: 'john.doe@example.com',

            metadata: {

                customMetadataKey: 'value'

            },

            billingAddress:{

                name: 'John Doe',

                firstName: 'John',

                phone:'',

                address1: '3671 Garfield Road',

                city: 'Neponset',

                country: 'US',

                province: 'IL',

                postalCode: '61345'

            }

        });
#9

I was looking at API v3, sorry. You were talking about v2. So you should make sure you are loading v2 also. There you will find Snipcart.api.configure.

You can find more info here (V2 Docs).