@shopify_app-bridge-react does not provide an export

[leotran20]

Issue summary

Write a short description of the issue here ↓

I've been trying to run the app but getting these error in console logs:

Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/@shopify_app-bridge-react.js?v=df4089db' does not provide an export named 'Toast' (at ProductsCard.jsx:3:10)

Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/@shopify_app-bridge-react.js?v=df4089db' does not provide an export named 'Provider' (at AppBridgeProvider.jsx:3:10)

My package.json file:

"dependencies": {
    "@formatjs/intl-locale": "^3.4.5",
    "@formatjs/intl-localematcher": "^0.5.4",
    "@formatjs/intl-pluralrules": "^5.2.12",
    "@shopify/app-bridge": "^3.7.10",
    "@shopify/app-bridge-react": "^4.0.0",
    "@shopify/i18next-shopify": "^0.2.9",
    "@shopify/polaris": "^12.18.0",
    "@vitejs/plugin-react": "4.2.1",
    "i18next": "^23.10.0",
    "i18next-resources-to-backend": "^1.2.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-i18next": "^14.0.5",
    "react-query": "^3.39.3",
    "react-router-dom": "^6.22.1",
    "vite": "^5.1.4"
  },
  "devDependencies": {
    "@shopify/stylelint-polaris": "^15.2.2",
    "history": "^5.3.0",
    "jsdom": "^24.0.0",
    "prettier": "^3.2.5",
    "stylelint": "^16.2.1",
    "vi-fetch": "^0.8.0"
  }

Thanks!

Steps to reproduce the problem

1. run npm run dev
2. press preview

[pramod-praella]

Hey @leotran20 facing the same issue, have you found any solution?

[leotran20]

Hey @leotran20

facing the same issue, have you found any solution?

Yes I have, turned out the issue comes from new version of @shopify/app-bridge-react 4.0.0. You should have a look at migration guide to adapt with this version and to fix this issue: https://shopify.dev/docs/api/app-bridge/migration-guide

[leotran20]

@shopify-admins I can do this migration, please assign to me