@shopify/discount-app-components not compatible with latest version of @shopify/app-bridge-react

[Dev-WR]

I created a new app with the latest remix template that uses Vite. Afterwards I created an extension to handles the creation of custom discounts using the @Shopify_77 /discount-app-components library.

The problem is that this library expects @Shopify_77 /app-bridge-react version 3.7.7 which is an older version. I tried installing this older version but I ran into the following issue:

[vite] Named export 'Provider' not found. The requested module
'@shopify/app-bridge-react/components/Provider' is a CommonJS module, which may not support all module.exports as named exports.
21:54:31 │ remix      │ CommonJS modules can always be imported via the default export, for example using:
21:54:31 │ remix      │
21:54:31 │ remix      │ import pkg from '@shopify/app-bridge-react/components/Provider';
21:54:31 │ remix      │ const {Provider} = pkg;

I tried the suggested solution but it doesn’t work either.
I searched the internet for a solution and tried changing the vite config file with this:

optimizeDeps: {
    include: ['@shopify/app-bridge-react'],
  },
  build: {
    assetsInlineLimit: 0,
    commonjsOptions: {
      include: [/\/@shopify\/app-bridge-react\//, /\/node_modules\//],
    }
  }, 

But that didn’t work either.

I’d really appreciate if someone could provide a solution to this issue.

[Dev-WR]

Hello,

I’m still waiting for an answer here, Please.

[maenda]

I’m having the same issue, Implemented the tutorial step for step. I’ve tried changing the import, even tried importing the Provider from the components directory in node_modules.

[Dntro]

Just follow the error message, it’s that easy.

I tried downgrading to

"@shopify/app-bridge-react": "^3.2.5"

But I think it will work with latest, you should not do a named import, instead try something like this:

import appBridge from "@shopify/app-bridge-react";
const { Provider } = appBridge;

[maenda]

I’ve tried this. It suppresses the error but still does not allow the discount to save and throws an error in the log. Here is my code for app.jsx

import { useState } from "react";
import { json } from "@remix-run/node";
import { Link, Outlet, useLoaderData, useRouteError } from "@remix-run/react";
import appBridge from "@shopify/app-bridge-react";

// import { Provider as AppBridgeReactProvider } from "@shopify/app-bridge-react";
console.log('app bridge', appBridge);
const { Provider } = appBridge;

const AppBridgeReactProvider = Provider;
import "@shopify/polaris/build/esm/styles.css";
import { DiscountProvider } from "../components/providers/DiscountProvider";
import { boundary } from "@shopify/shopify-app-remix/server";
import { AppProvider } from "@shopify/shopify-app-remix/react";
import { authenticate } from "../shopify.server";
// export const links = () => [{ rel: "stylesheet", href: polarisStyles }];
export async function loader({ request }) {
  await authenticate.admin(request);

  const url = new URL(request.url);

  return json({
    apiKey: process.env.SHOPIFY_API_KEY,
    host: url.searchParams.get("host"),
  });
}
export default function App() {
  const { apiKey, host } = useLoaderData();
  const [config] = useState({ host, apiKey });

  return (
    
  );
}
// Shopify needs Remix to catch some thrown responses, so that their headers are included in the response.
export function ErrorBoundary() {
  return boundary.error(useRouteError());
}
export const headers = (headersArgs) => {
  return boundary.headers(headersArgs);
};

@Dntro you are able to stand up the app and create a discount with the code above? I’ve tried with both “latest” and “3.2.5” and I get the same result. Did you have to deviate elsewhere from the tutorial? I did update the styles code to import the stylesheet directly as well to get rid of another error but I get the same result either way.

app.jsx:8 Uncaught TypeError: Cannot destructure property 'Provider' of 'appBridge' as it is undefined.
    at app.jsx:8:1

[DavidDS_Diff]

Hi,

This seems to be an issue with the new vite + remix integration.

It was mentioned and is being tracked here: https://github.com/Shopify/discount-app-components/issues/196

I have not found any workaround yet. (Downgrading to 3.2.5 for app-bridge-react did not solve the issue.)

I assume downgrading the vite/remix package versions could solve it, but I’m not a fan of this direction.

[polymorphtech]

in the github issue you linked to, the suggestion in https://github.com/Shopify/discount-app-components/issues/196#issuecomment-2058179432 solves the issue with a CJS-ESM interoperability plugin

edit: now seeing issues in the console, so ignore this response for now

[polymorphtech]

https://github.com/Shopify/shopify-app-bridge/issues/307#issuecomment-2018651868

is more relevant

[charlotteskipper]

If anyone still has this issue, this is how I fixed it (Sep 2025):

Root Cause: @shopify/app-bridge-react v4.x.x.x is not compatible with @shopify/discount-app-components v2.x.x.x
Fix: We need to upgrade @shopify/app-bridge-react to v4 AND @shopify/discount-app-components to at least v3.0.0

First, include the app-bridge.js header tag as mentioned in the migration guide.
Then update as below:

My previous package.json:
"@shopify/app-bridge-react": "^3.7.10",
"@shopify/app-bridge-types": "^0.0.3",
"@shopify/discount-app-components": "^2.1.2",

My new package.json:
"@shopify/app-bridge-react": "^4.2.3",
"@shopify/discount-app-components": "^3.0.2",

Other Info for reference:
"react": "^18.2.0",
"react-dom": "^18.2.0",
"shopify/polaris": "^12.0.0",
”prisma”: “^6.2.1”,

Make sure to explicitly remove the other packages

Then go through and update any deprecated components, eg. NavMenu or breadcrumbs & remove Provider. The migration guide is helpful here:

Migrate your app to Shopify App Bridge React 4.x.x