升级Shopify Polaris至v12 Beta后，React应用仍显示v10版本求助

问题描述 #

我按照官方说明安装运行了Shopify官方Ruby应用模板（前端基于React和Polaris），模板默认搭载Polaris v10.50.1。之后我跟着官方指引尝试升级到v12 Beta版本，在项目根目录执行了npm install @shopify/polaris@beta，package.json里的依赖已正确更新为：

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

但启动npm run dev后，应用能正常运行，可浏览器里的Polaris还是v10版本——我通过Chrome开发者控制台确认了这一点。

我排查了导入路径和加载文件：

• 在模板的web/frontend/components/PolarisProvider.jsx里，导入语句为：

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

• 项目node_modules目录下的@shopify/polaris/build/esm/styles.css文件前两行明确显示版本为v12 Beta：

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

为何浏览器仍加载v10版本？

排查与解决方案 #

• 清理各级缓存

  1. 停止本地开发服务器，删除项目根目录下的构建缓存目录（如node_modules/.cache、public/build等编译输出文件夹）。
  2. 浏览器端强制刷新：按Ctrl+Shift+R，或打开开发者控制台，在「网络」面板勾选「Disable cache」后再刷新页面。

• 检查依赖树并强制统一版本
  执行npm ls @shopify/polaris，查看是否有其他依赖间接引入了v10版本的Polaris。如果存在重复依赖：

  • 先尝试执行npm dedupe合并依赖；
  • 若无效，在package.json中添加resolutions字段强制指定版本：

  "resolutions": {
    "@shopify/polaris": "^12.0.0-beta.0"
  }
  

  之后重新执行npm install。

• 检查构建工具配置
  确认项目的构建工具（Webpack/Vite等）没有缓存旧编译产物，或是否配置了别名指向旧版本的Polaris。比如Webpack的resolve.alias中若有@shopify/polaris的旧路径，需同步更新。

• 验证App Bridge兼容性
  Polaris v12 Beta可能需要对应版本的Shopify App Bridge支持，尝试升级@shopify/app-bridge-react到最新版本后重启项目。

• 完全重装依赖
  删除node_modules、package-lock.json（或yarn.lock）文件，重新执行npm install，确保无旧版本依赖残留。

内容的提问来源于stack exchange，提问作者Colin Brogan