useResponsive giving error

[narasimhajupally]

not able to use useResponsive in next js the error in the console

./hooks/use-device-type.ts:1:0
Module not found: Can't resolve 'ahooks/es/configResponsive'
> 1 | import { configResponsive, useResponsive } from "ahooks";
  2 | // import { useMediaQuery } from "react-responsive";
  3 | configResponsive({
  4 |     isMobile: 0,

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./components/devices.tsx
./components/nav.tsx
./layouts/authenticated-layout.tsx
./pages/_app.tsx

other hooks are running fine.

[liuyib]

similar: https://github.com/alibaba/hooks/issues/2254

---

hi @narasimhajupally, you can solve this by:

// ❌ error
import { configResponsive, useResponsive } from "ahooks";

// ✅ work
import { configResponsive, useResponsive } from "ahooks/es";
// ✅ work
import { configResponsive, useResponsive } from "ahooks/es/useResponsive";
// ✅ work
import { configResponsive, useResponsive } from "ahooks/lib";
// or
// ✅ work
import { configResponsive, useResponsive } from "ahooks/lib/useResponsive";

so, why can't we import hook from ahooks in next.js, I will keep track of this problem. thx for your feedback.

[narasimhajupally]

@liuyib seems to be working on this. shouldn't this issue be open?

[liuyib]

related:

• https://github.com/vercel/next.js/issues/52703
• https://github.com/vercel/next.js/issues/52307#issuecomment-1627372291

---

refer: https://github.com/vercel/next.js/issues/52307#issuecomment-1627372291, this issue seems to be SWC' problem.

[meteorlxy]

Related: https://github.com/vercel/next.js/pull/53051

Maybe need another special transform for useResponsive? Just like createUpdateEffect in that PR

[liuyib]

Maybe need another special transform for useResponsive? Just like createUpdateEffect in that PR

Nice catch! I'll try to find out what happened and let you known.

[liuyib]

The root cause is that Next.js included ahooks in the transform rules (modularizeImports), but some methods were not given special treatment.

Thanks @meteorlxy for the helpful suggestion.

[liuyib]

mark: https://github.com/mui/material-ui/pull/35457/files

[PrinOrange]

Now is 2024 this problem still lingered and not solved yet.

[liuyib]

Now is 2024 this problem still lingered and not solved yet.

It's the problem for Next.js, we can do nothing. Can you try this: https://github.com/alibaba/hooks/issues/2395#issuecomment-1869472895, and verify whether this problem has been solved? @PrinOrange Thank you.

[liuyib]

This issue has been solved in Next.js >=14.0.4: https://github.com/vercel/next.js/pull/59294/files