NextJS14引入@shopify/hydrogen-react出现useEffect组件导入异常

核心原因 #

• @shopify/hydrogen-react的根入口采用桶式导出设计，会将包内所有模块（包括AddToCartButton这类带客户端API的UI组件）聚合到根导出中。当你从根路径导入createStorefrontClient时，打包工具会扫描整个根导出的依赖树，哪怕你没直接引用AddToCartButton，它也会被纳入依赖分析范围。
• NextJS 14默认组件为服务端组件，而AddToCartButton内部使用了useEffect这类客户端专属API，服务端组件环境不支持这类API，因此触发了错误提示。
• @shopify/hydrogen-react/storefront-client是官方提供的专用子路径入口，仅包含createStorefrontClient相关的通用/服务端代码，完全不涉及客户端UI组件，所以导入后不会出现依赖冲突。

实操建议 #

使用第三方包时，优先遵循官方文档指定的导入路径，避免从根入口导入不必要的模块，既能减少打包体积，也能规避这类环境不兼容问题。

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