Error Upgrading @Shopify/Polaris And React In Shopify App Development

[ayushmukho]

Issue summary

New to Shopify App Development. I was trying SHOPIFY APP CLI with Node. It's Polaris version is 10.49.1. I wanted to upgrade it to the latest (12.1.1) but couldn't. I need to upgrade react as well. Upgrading React to the latest causes new set of problems

• @shopify/shopify-app-express version: "^2.1.3"
• Node version: "v20.8.0"
• Operating system: "macos"

Expected behavior

Updated to the latest polaris version and also the latest react version

Actual behaviour

If we update it breaks everything

[lizkenyon]

Hi there 👋

Thanks for flagging. The team will review this and look into updating some of the dependencies.

If you are new to Shopify development, I would recommend looking into the Remix template. There is a lot more documentationavailable for that template.

[keburius]

Hello @ayushmukho👋,

I encountered the same issue and resolved it as follows:

1. Update Polaris to the latest version:
   "@shopify/polaris": "^12.19.2"
2. Update React and ReactDOM to version 18 or later:
   "react": "^18.2.0", "react-dom": "^18.2.0"

After these updates, I encountered an issue with ReactDOM.render, as it is no longer supported in React 18. To address this, I switched to using createRoot instead:

`import { createRoot } from "react-dom/client";
import App from "./App";
import { initI18n } from "./utils/i18nUtils";

initI18n().then(() => {
const root = createRoot(document.getElementById("app"));
root.render();
});`

I hope this helps you! 😊