[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
We are trying to import a client from react-hydrogen package into our NextJS 14 app, below import causes the above error:
import { createStorefrontClient } from '@shopify/hydrogen-react';
but when I change import to directly get the client like that:
import { createStorefrontClient } from '@shopify/hydrogen-react/storefront-client';
Everything works fine, does anyone have any idea why it tries to import a component that isn't imported anywhere in the app?
Not that old issue where Nextjs had problems that resulted in the tree shaking not working with Typescript barrel files
This PR in NextJS repo fixes the issue: https://github.com/vercel/next.js/issues/60246