Importing package without "use client"
Answered
Sun bear posted this in #help-forum
Sun bearOP
I have an older app based on the pages directory and I am slowly migrating the whole thing over to use the app directory (completely new install). At the moment, I have react-dropzone added as a dependency (in both projects) and I have imported it into a component with "use client" at the top of my component. I thought this would work, but it seems that next is yelling at me that
"useRef only works in Client Components. Add the "use client" directive at the top of the file to use it. "
I know I should open an issue on github with react-dropzone, but I didnt know if there was a way to squash this error since I am importing it into a client component.
I did try adding "use client" in the module itself, but that just created undefined errors.
"useRef only works in Client Components. Add the "use client" directive at the top of the file to use it. "
I know I should open an issue on github with react-dropzone, but I didnt know if there was a way to squash this error since I am importing it into a client component.
I did try adding "use client" in the module itself, but that just created undefined errors.
Answered by Sun bear
Whelp, now I feel like an idiot.. I meant to rename my own component to from "Dropzone" to "ImageDropzone" to avoid confusion, but I completely forgot and vscode autocompleted the package for import and not my actual component. This is what I get for not slowing down and taking my time. Once I imported my actual component (renamed) everything seems to work.
3 Replies
Somebody
is the component exported in an index file?
it could be that you have to import all your code directly, e.g. import from "dependency/src/component" instead of just "dependency"
Sun bearOP
Whelp, now I feel like an idiot.. I meant to rename my own component to from "Dropzone" to "ImageDropzone" to avoid confusion, but I completely forgot and vscode autocompleted the package for import and not my actual component. This is what I get for not slowing down and taking my time. Once I imported my actual component (renamed) everything seems to work.
Answer