🐛[Bug] Support for @shopify/app-bridge-react V4

[SiddharthSham]

Issue summary

After upgrading to V4 of @shopify/app-bridge-react as per the migration docs, this library throws an error due to trying to import the now deprecated <Provider /> component in this test file.

Expected behavior

No error should be thrown.

This library should also be updated to use the latest version of @shopify/app-bridge-react

Actual behavior

The thrown error is:

[ERROR] No matching export in 
"node_modules/.pnpm/@shopify+app-bridge-react@4.0.0_react-dom@18.2.0_react@18.2.0/node_modules/@shopify/app-bridge-react/dist/index.js" for import "Provider"

node_modules/.pnpm/@shopify+discount-app-components@2.1.2_@shopify+app-bridge-react@4.0.0_@shopify+app-bridge@3._fdrtohdej5n7wsk37q6fjgkki4/node_
modules/@shopify/discount-app-components/build/esm/components/DiscountAppComponentsTestProvider/DiscountAppComponentsTestProvider.js:3:9:
3 │ import { Provider } from '@shopify/app-bridge-react';

Steps to reproduce the problem

1. Start from the Remix app template, add the discount-app-components package
2. Update @shopify/app-bridge-react to the latest version
3. Try to run the app

Specifications

• Are you using the React components? (Y/N): Y
• discount-app-components version number: 2.1.2
• Browser: N/A
• Device: N/A
• Operating System: N/A

[xaviergmail]

I'm facing this issue while following the official guide: https://shopify.dev/docs/apps/selling-strategies/discounts/experience/ui

The lack of documentation versioning and package version specs in the documentation has been a challenge.

[Yamashou]

Could you provide an update on this issue? I would appreciate it if you could update it if possible.

[echocrow]

Running into the same issue too, which is preventing us from building a critical discount bundle app. Following the latest official guide to a tee does not help either.

Tried downgrading to V3, but that either fails with

[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.

or, when following the default export suggestion, does compile, but then clicks and other events stop working entirely.

[paulomenezes]

I created a fork of this repository to fix the issue and successfully built my remix app using @shopify/app-bridge-react V4 https://github.com/Alpha-Omega-Agency/discount-app-components.
I didn't open the PR because there is an error with const redirect = Redirect.create(app); that I'm not sure how to fix, so I just ignored it because it isn't impacting my code.

[Yamashou]

@devisscher
When will this be addressed? It will be involved in the release of our app.

[ijohns1904]

@devisscher Can you share any updates on this issue? Thanks!

[philkendallsimba]

We are facing this issue too. An update would be good please. Thanks.

[pnmcosta]

I didn't open the PR because there is an error with const redirect = Redirect.create(app); that I'm not sure how to fix, so I just ignored it because it isn't impacting my code.

@paulomenezes I believe all uses of redirect can be replaced with e.g. open('/settings', '_self'); see https://shopify.dev/docs/api/app-bridge-library/apis/navigation tap Javascript tab for each example.

Have you come across any other issues using your fork? I haven't reviewed your fork yet, but am concerned that this packages use of localization maybe affected.

[FancyMyReality]

Hi @devisscher, is there a status update on this bug? Waiting on resolution and cannot continue our development.

[Sanj718]

I think its faster to make changes in lib manually and use patch-package. Just need to re-develop Picker component.

[RivermintGlenn]

Running into the same issue too, which is preventing us from building a critical discount bundle app. Following the latest official guide to a tee does not help either.

Tried downgrading to V3, but that either fails with

[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.

or, when following the default export suggestion, does compile, but then clicks and other events stop working entirely.

@echocrow

I was having the same issue, whereby even after downgrading, the commonJs error was being throw.

It turns out the issue is with the new vite + remix integration.

I was able to fix the issue by following this guide, specifically by using the vite-plugin-cjs-interop plugin plugin.

// vite.config.js
cjsInterop({
      // List of CJS dependencies that require interop
      dependencies: ["@shopify/app-bridge-react"],
}),

[polymorphtech]

The CJS Interop plugin removes the vite error. But in the browser console, we now observe

Uncaught SyntaxError: The requested module '/node_modules/@shopify/polaris/build/esm/styles.css?t=1713557476064' does not provide an export named 'default' (at app.tsx:4:1)

[RivermintGlenn]

@polymorphtech

I believe this is an issue with vite remix.

You can import the polarisStyles directly into your base component and can remove the link export.

(Note: I am not the best to listen to here and would love someone to add more technical context. I'm 🤠ing it)

import "@shopify/polaris/build/esm/styles.css";

// export const links = () => [{ rel: "stylesheet", href: polarisStyles }];

[philkendallsimba]

@devisscher I see there is now a PR in for the fix. Any news on when that might get reviewed and merged please?

[BornAgainHooligan]

Hey team/ @devisscher!

Just checking in for an update on this as it has been three weeks without an update. Can we please get an outline of where we are at with this?

[Yamashou]

@devisscher @mathiusj
I hope this issue will be resolved and released soon. We are looking forward to the update of app-bridge as soon as possible.

[Cyclodex]

I just created a new app and wanted to add this discount-app-components, which of course fails

npm ERR! Found: @shopify/app-bridge-react@4.1.3
npm ERR! node_modules/@shopify/app-bridge-react
npm ERR!   @shopify/app-bridge-react@"^4.1.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @shopify/app-bridge-react@"^3.7.7" from @shopify/discount-app-components@2.1.2
npm ERR! node_modules/@shopify/discount-app-components
npm ERR!   dev @shopify/discount-app-components@"*" from the root project

Now I see that you might be close to merge the PR, looking forward to that.
Any est about when this would be available as a release, even if its just a beta or dev?
This would help in making decisions, about my own deadlines :)

Wondering if I could just workaround somehow for the moment, downgrade to v3 or something else.
Maybe it would be even possible to use npm aliases to install both packages at the moment?

[philkendallsimba]

I used @paulomenezes fork of the repo in our app, which is being used in production, instead of the default one, and am having good success with.
I am still hopeful we will get an official update soon though, as I don't like being dependent on the fork.

[Cyclodex]

Hi @devisscher ! I see this closed, but there is no release yet.
Is someone going to deal with the release PR? :) Or any plans when you are going to do that?
Thx!

[danharper83]

Spent half a day trying to get a discount app to work with V4 resource picker to land on this, any update on when it will be fixed?

[Michael-Gibbons]

@devisscher Why did you close this issue? Doesn't this completely break development? My Coworker and I just spent around an hour trying to generate a new app extension following this documentation:

https://shopify.dev/docs/apps/build/discounts/experience/build-discounts-function

On both Mac and Windows we were both getting a dependency tree error relating to app bridge v4, since the dependency lives within the shopify package code we can't downgrade, making the creation of new extension apps impossible.

[echocrow]

as far as I can tell, the interop bug that prevented bundling with App Bridge v4 was fixed in #203.

after that, we were able to build an embedded discount admin UI using this project in combination with App Bridge v4.

that said, IIRC the tutorial is outdated (e.g. Provider from "@shopify/app-bridge-react" is an artifact from v3 and need not be imported in v4), and app-bridge.js from the migration docs isn't always needed.

we started off using Shopify's Remix template for embedded apps, and loosely followed the discount tutorials from there, referencing the App Bridge v4 migration in the process. a little tedious, but worked in the end.