Named export 'Provider' not found on @shopify/app-bridge-react

Retired Boards Appdev Functions
, ,
1

Hey guys,

I’m still trying to sort out how functions work and how to avoid any manual interaction to set the app up.

I followed the tutorial here

https://shopify.dev/docs/apps/selling-strategies/discounts/experience/ui

And when I run the app I get

[vite] Named export 'Provider' not found. The requested module '@shopify/app-bridge-react' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@shopify/app-bridge-react';
const {Provider} = pkg;

Implementing the solution o on the error message itself, makes it run, but leads to two console error which I suspect is the reason why nothing happens when I create a discount and click safe

app.tsx:11 Uncaught TypeError: Cannot destructure property ‘Provider’ of ‘pkg’ as it is undefined.> at app.tsx:11:9

Any idea on how I could debug this? I can’t also debug the clicks on the discount modal itself

2

I had the same issue, I removed the current installed latest(4.1) package and reinstall it using “npm install @Shopify_77 [email removed] it solved my problem