0

I have used official instructions to install and run Shopify's official ruby template for apps with a reactjs and polaris front-end: https://github.com/Shopify/shopify-app-template-ruby

This shipped polaris v10.50.1, and I tried upgrading it to v12 beta following these official instructions:

https://polaris.shopify.com/new-design-language

As described, I ran this in the root directory:

npm install @shopify/polaris@beta

package.json dependencies was updated correctly:

  "dependencies": {
    "@shopify/app": "3.47.5",
    "@shopify/cli": "3.47.5",
    "@shopify/polaris": "^12.0.0-beta.0"
  },

Now, when I launch the app with npm run dev, the app launches, but polaris is still v10. I confirmed this by checking chrome developer console:

enter image description here

In an attempt to debug, I tried to trace where polaris was being imported, and what literal files it was pulling. I found the import statement in this template in web/frontend/components/PolarisProvider.jsx, with the following statements:

import { AppProvider } from "@shopify/polaris";
import { useNavigate } from "@shopify/app-bridge-react";
import "@shopify/polaris/build/esm/styles.css";

Now, if I go into the projects' node_modules folder, I can find the file referenced above at node_modules/@shopify/polaris/build/esm/styles.css. The first two lines of the file show that it is the version it is supposed to be:

@charset "UTF-8";
:root { --polaris-version-number: '12.0.0-beta.0'; }

Now, why on earth does it continue to load v10 in the browser?

Colin Brogan
  • 728
  • 10
  • 26

1 Answers1

0

Aha, turns out I was confused by the folder structure. The root package.json and node_modules folder is for Shopify CLI only. It turns out that the local install used by the web frontend is housed here:

web/frontend/package.json
web/frontend/node_modules/

I simply had to run the npm install commands within web/frontend folder. Polaris is upgraded now and displays in the browser.

Colin Brogan
  • 728
  • 10
  • 26