0

When working with the app directory in nextJS 13, all client components must have a "use client" directive. But most components from popular react libraries will not have this directive.

The solution I found was to create a file that imports that component and exports it with the "use client" directive, but we need to rename each component to make it accessible via vs code auto import extension.

But is there a better way of using a component library in nextjs without the need to do that?

Vitor Figueredo Marques
  • 159
  • 8
  • 1
    Checkout https://stackoverflow.com/questions/74965849/youre-importing-a-component-that-needs-usestate-it-only-works-in-a-client-comp/74965850#74965850. If you do an export as suggested by the answer, VS Code would normally find them without you having to export each component seperatly. – Youssouf Oumar Jun 05 '23 at 15:50
  • When I do this, vs code only suggests the path from the original lib instead of the new file. – Vitor Figueredo Marques Jun 05 '23 at 16:18
  • ok, I just need to use typescript.preferences.autoImportFileExcludePatterns in settings.json to ignore the paths from the wrapped modules. – Vitor Figueredo Marques Jun 05 '23 at 17:11

0 Answers0