Cannot add new package

[bwcr]

Describe the bug

"Hello there! I have been using this template for a while now and I like it. Recently, I tried to add a new package called 'react-hook-form' but I encountered an error that says 'webpack_imported_module is not a function'. I'm not sure what went wrong so I hope someone can help me with this. Thank you in advance for your assistance!"

Reproduction

https://effective-space-parakeet-7pjg9rvp7j4fpvw.github.dev/

System Info

System:
    OS: Windows 11 10.0.22621
    CPU: (8) x64 AMD Ryzen 5 3500U with Radeon Vega Mobile Gfx
    Memory: 1.34 GB / 9.89 GB
  Binaries:
    Node: 20.11.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.15.4 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Edge: Chromium (121.0.2277.128)
    Internet Explorer: 11.0.22621.1

Used Package Manager

pnpm

Validations

• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• [X] The provided reproduction is a minimal reproducible of the bug.

[sozonome]

Hi @bwcr , I cannot access the reproduction link, can you provide more information or provide a complete reproduction repo?

Error like this doesn't mainly come from just installing the package, but also how we use or implement it in the project. I might help you to pinpoint the problem if there's any complete reproduction to look at.

[bwcr]

Hi @bwcr , I cannot access the reproduction link, can you provide more information or provide a complete reproduction repo?

Error like this doesn't mainly come from just installing the package, but also how we use or implement it in the project. I might help you to pinpoint the problem if there's any complete reproduction to look at.

You're right. It turns out that the error occurred because I needed to add 'use client' at the top of the file. I have fixed the issue now. However, I am now curious as to why I need to add this line every time I insert a new package, when Chaka UI seems to work without it.

[sozonome]

Hi @bwcr , glad to know the issue is fixed.

1. This is a new concept / paradigm being opt-in when we pick App Router - RSC. nextarter-chakra has Pages router version here: https://github.com/sozonome/nextarter-chakra-pages-router

   I am now curious as to why I need to add this line every time I insert a new package, when Chaka UI seems to work without it.

2. Chakra UI have added 'use client' on each of their component exports
   • https://chakra-ui.com/changelog/v2.5.0
   • https://github.com/search?q=repo%3Achakra-ui%2Fchakra-ui+%22use+client%22&type=code
3. We might not need to always insert "use client" every time adding a new package, we only need to insert it on:
   • client components which are interactive
     • usually needs some hooks like useState, useMemo, useContext, useEffect, RHF's useForm, etc),
     • and has interaction functionality (handlers when click or select etc)
   • some references that might help:
     • https://nextjs.org/docs/app/building-your-application/rendering
     • https://nextjs.org/docs/app/building-your-application/rendering/client-components
     • https://react.dev/reference/react/use-client
     • https://www.youtube.com/watch?v=6jM_0wDOw4g

This new paradigm / concept of [RSC - server components & client components] might look confusing at first, I also felt so confused with it at first, but I hope this issue being encountered and some references attached above helps you to understand better on RSC and the reasonings. 🙇

Will set this issue as closed 🙇 Feel free to ask or discuss more in this thread if you have any further questions or ideas