Shopify Hydrogen 和 React 服务器组件

Question

[dev] You're importing a component that needs useEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
[dev] Learn more: https://nextjs.org/docs/getting-started/react-essentials
[dev]
[dev]    ,-[[***]frontend\node_modules\@shopify\hydrogen-react\dist\node-dev\AddToCartButton.mjs:1:1]
[dev]  1 | import { jsxs, Fragment, jsx } from "react/jsx-runtime";
[dev]  2 | import { useState, useEffect, useCallback } from "react";
[dev]    :                    ^^^^^^^^^
[dev]  3 | import { useCart } from "./CartProvider.mjs";
[dev]  4 | import { useProduct } from "./ProductProvider.mjs";
[dev]  5 | import { BaseButton } from "./BaseButton.mjs";
[dev]    `----
[dev]
[dev] Maybe one of these should be marked as a client entry with "use client":
[dev]   ./node_modules\@shopify\hydrogen-react\dist\node-dev\AddToCartButton.mjs
[dev]   ./node_modules\@shopify\hydrogen-react\dist\node-dev\index.mjs
[dev]   ./src\clients\storefront\client.ts
[dev]   ./src\clients\storefront\requests\getProduct.ts
[dev]   ./src\app\[locale]\[...slug]\page.tsx

我们正在尝试将客户端从react-Hydrogen包导入到我们的NextJS 14应用程序中，下面的导入会导致上述错误：

import { createStorefrontClient } from '@shopify/hydrogen-react';

但是当我更改导入以直接获取客户端时：

import { createStorefrontClient } from '@shopify/hydrogen-react/storefront-client';

一切正常，有谁知道为什么它尝试导入一个未在应用程序中任何地方导入的组件？

Answer 1

这不是 Nextjs 的旧问题，导致 tree shake 无法与 Typescript 桶文件一起工作

NextJS 存储库中的此 PR 修复了该问题：https://github.com/vercel/next.js/issues/60246

• 解决方案，更新NextJS到最新版本