I’m currently building a Shopify app using the Shopify App Template (Node.js) and integrating Shopify Polaris components into my frontend (React). However, I’ve run into an issue — the design and layout don’t appear as expected, and the UI doesn’t match the official Polaris documentation or examples.
Here’s the interesting part: when I use the same Polaris components in a separate local Vite React project, everything works perfectly — the design, layout, and responsiveness look exactly like the latest Polaris version. But when I use the same components inside my Shopify Node app, the styles break — spacing looks off, the design seems outdated, and some props don’t behave as they should.
My Setup:
-
Framework: Node.js (Shopify App Template)
-
Frontend: React (inside
/web/frontendfolder) -
UI Library: Shopify Polaris (latest version)
-
Command Used:
npm run dev -
Environment: Local development
What I’ve Tried So Far:
Installed @shopify/polaris and verified imports
Wrapped the entire app with AppProvider from Polaris
Imported global CSS file:
import '@shopify/polaris/build/esm/styles.css';
Checked for dependency version conflicts
Tested components individually in a Vite React project — they rendered perfectly there
Despite all of this, in the Shopify Node.js app template, the design doesn’t match the latest Polaris look and doesn’t behave as shown in the documentation.
My Question:
-
Is there any specific configuration or setup required to make Polaris work properly within the Shopify Node.js template?
-
Are there any known compatibility issues or best practices for integrating Polaris in the current Shopify app template?
-
If anyone has a working example or repo, that would be a huge help!
I’d really appreciate any guidance or insight on how to fix this issue. I want to make sure I’m following the recommended setup and using the latest version of Polaris correctly within the Shopify app environment.
Thanks a lot in advance for your help! 
