如何在Shopify Polaris中导入Beta组件？Text组件导入报错求助

问题根源 #

Polaris v12+ 调整了组件导出结构，核心UI组件不再直接从根路径@shopify/polaris导出，而是迁移到@shopify/polaris/react子路径；另外Vite缓存、依赖安装残留也可能导致模块解析异常。

解决步骤 #

• 修正导入语句
  替换错误的导入方式：

  // 错误写法
  import { Text } from '@shopify/polaris';
  
  // 正确写法
  import { Text } from '@shopify/polaris/react';
  

• 清理依赖并重新安装
  执行命令清除旧依赖及锁文件：

  # 删除node_modules文件夹
  rm -rf node_modules
  # 删除对应包管理器的锁文件（二选一）
  rm package-lock.json # npm用户
  # rm yarn.lock # yarn用户
  # 重新安装依赖
  npm install
  

• 清除Vite缓存
  Vite缓存可能保留旧模块映射，执行命令清除：

  npx vite --clear-cache
  

  也可以手动删除项目根目录下的.vite文件夹。

• 确认并更新到最新Polaris版本
  检查当前安装版本：

  npm list @shopify/polaris
  

  安装最新版本：

  npm install @shopify/polaris@latest
  

若以上步骤无效，检查项目打包配置（如Vite、Babel）是否存在自定义模块解析规则，避免干扰Polaris的导出结构。

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