Facing issue with Shopify AppBridgeProvider on latest remix app template

[Sakib-Ashraf]

Describe the bug

On the latest Remix app template, either the latest app-bridge-react is not working else I'm doing something wrong. Also, the resource picker hook is not working without the app bridge provider. though the latest documentation is not clear. I've tried several workarounds to fix the app-bridge provider-related error but it's not resolving. maybe you guys could help me out. I have an existing app where after updating according to the latest app template I was facing some error related to deployment and it was indecating entry.server.jsx has some problem with readablestream. That's why I'm trying with a new template where I've moved my existing required route file, extensions, and functions. after moving those when I started the server I saw some error related to resource picker import. After that, I commented out the existing component code and took it from useAppBridge Hook. after that, it shows an error that the named export Provider is not found on the app.jsx. I've also added the app-bridge.js file on the root.jsx. still could not resolve it. Can you help me with that?

To Reproduce

Steps to reproduce the behaviour:

1. Launch the app from '...'
2. Click on '...'
3. See error

If applicable, add screenshots to help explain your problem.

Expected behaviour

I've expected it to work as earlier versions.

Contextual information

Packages and versions

This is my package.json
{
"name": "rubino-checkout",
"private": true,
"version": "1.0.0",
"scripts": {
"build": "vite build && vite build --ssr",
"dev": "shopify app dev",
"config:link": "shopify app config link",
"generate": "shopify app generate",
"deploy": "shopify app deploy",
"config:use": "shopify app config use",
"env": "shopify app env",
"start": "remix-serve ./build/server/index.js",
"docker-start": "npm run setup && npm run start",
"setup": "prisma generate && prisma migrate deploy",
"lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .",
"shopify": "shopify",
"prisma": "prisma",
"graphql-codegen": "graphql-codegen",
"vite": "vite"
},
"type": "module",
"dependencies": {
"@prisma/client": "^5.8.0",
"@remix-run/dev": "^2.7.1",
"@remix-run/node": "^2.7.1",
"@remix-run/react": "^2.7.1",
"@remix-run/serve": "^2.7.1",
"@shopify/app": "3.57.0",
"@shopify/app-bridge-react": "^3.7.10",
"@shopify/cli": "3.57.0",
"@shopify/discount-app-components": "^2.1.2",
"@shopify/polaris": "^12.0.0",
"@shopify/react-form": "^2.5.5",
"@shopify/shopify-api": "^9.2.0",
"@shopify/shopify-app-remix": "^2.5.0",
"@shopify/shopify-app-session-storage-prisma": "^4.0.1",
"cross-env": "^7.0.3",
"isbot": "^5.1.0",
"prisma": "^5.8.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"vite-tsconfig-paths": "^4.3.1"
},
"devDependencies": {
"@remix-run/eslint-config": "^2.7.1",
"@shopify/api-codegen-preset": "^0.0.3",
"@shopify/app-bridge-types": "^0.0.7",
"@types/eslint": "^8.40.0",
"@types/node": "^20.6.3",
"@types/react": "^18.2.31",
"@types/react-dom": "^18.2.14",
"eslint": "^8.42.0",
"eslint-config-prettier": "^9.1.0",
"prettier": "^3.2.4",
"typescript": "^5.2.2",
"vite": "^5.1.3"
},
"workspaces": [
"extensions/*"
],
"trustedDependencies": [
"@shopify/plugin-cloudflare"
],
"author": "sakib"
}

List the relevant packages you’re using, and their versions. For example:

• @shopify/app-bridge-react": "^3.7.10
• @shopify/polaris": "^12.0.0

Platform

• OS: [Windows]
• OS Version: [Windows 11 Pro]
• App: [Microsoft Edge]

Additional context

Add any other context about the problem here, such as your app’s configuration (Node, Next.js, Rails).
Latest Remix app template with vite
using node 20.11.0

[henrytao-me]

You should switch to App Bridge React v4.

[gcjbr]

You should switch to App Bridge React v4.

It's incompatible with any version of @shopify/discount-app-components

Have you guys figured out a way?

[Sakib-Ashraf]

You should switch to App Bridge React v4.

I did tried but didn’t worked that too. If you had it workable can you kindly share me the sample implementation of yours? I want to be sure about my implementation that I'm not doing anything wrong.

[Sakib-Ashraf]

You should switch to App Bridge React v4.

It's incompatible with any version of @shopify/discount-app-components

Have you guys figured out a way?

No. I'm now using older version to keep my app working.

[gcjbr]

No. I'm now using older version to keep my app working.

Can you sure your current package.json and how you are using Provider?

[Sakib-Ashraf]

No. I'm now using older version to keep my app working.

Can you sure your current package.json and how you are using Provider?

Here's the Package.json
{ "name": "rubino-checkout-manager", "private": true, "version": "2.0.4", "scripts": { "postinstall": "prisma generate", "build": "NODE_ENV=production remix build", "prebuild": "prisma generate && prisma migrate deploy", "predev": "prisma generate && prisma migrate deploy", "dev": "shopify app dev", "config:link": "shopify app config link", "config:push": "shopify app config push", "generate": "shopify app generate", "deploy": "shopify app deploy", "config:use": "shopify app config use", "env": "shopify app env", "start": "remix-serve build", "docker-start": "npm run setup && npm run start", "setup": "prisma generate && prisma migrate deploy", "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .", "shopify": "shopify", "prisma": "prisma", "graphql-codegen": "graphql-codegen" }, "dependencies": { "@prisma/client": "^5.10.2", "@remix-run/node": "^1.19.1", "@remix-run/react": "^1.19.1", "@remix-run/serve": "^1.19.1", "@shopify/app": "3.57.0", "@shopify/app-bridge-types": "^0.0.3", "@shopify/cli": "3.57.0", "@shopify/polaris": "^12.0.0", "@shopify/shopify-api": "^9.2.0", "@shopify/shopify-app-remix": "^2.5.0", "@shopify/shopify-app-session-storage-prisma": "^4.0.1", "@shopify/app-bridge-react": "^3.7.9", "@shopify/discount-app-components": "^2.1.2", "@shopify/react-form": "^2.5.5", "cross-env": "^7.0.3", "isbot": "^5.1.0", "prisma": "^5.10.2", "react": "^18.2.0", "react-dom": "^18.2.0" }, "devDependencies": { "@remix-run/dev": "npm:@vercel/remix-run-dev@1.19.3", "@remix-run/eslint-config": "^1.19.1", "@shopify/api-codegen-preset": "^0.0.3", "@types/eslint": "^8.40.0", "@types/node": "^20.6.3", "@types/react": "^18.2.31", "@types/react-dom": "^18.2.14", "eslint": "^8.42.0", "eslint-config-prettier": "^9.1.0", "prettier": "^3.2.4" }, "workspaces": [ "extensions/*" ], "engines": { "node": ">=18.17.0" }, "browserslist": [ "defaults" ], "trustedDependencies": [ "@shopify/plugin-cloudflare" ], "author": "" }
and here's the implementation of Provider:

And I'm using Resource Picker like this:
import { useAppBridge, ResourcePicker } from "@shopify/app-bridge-react";

[devisscher]

We are currently working on updating the discount-app-components library to support App Bridge React V4: Shopify/discount-app-components#196