Import components from outside of Nextjs app.
Hi everyone, i have a Nextjs app, but i need to import components from outside of the Nextjs folder. In the picture i show you a nextjs folder and a webpack folder where lives the components i wanna import.
Right know i configure my nextjs tsconfig and add this
in the 'paths'
"@/webpack/*": ["../webpack/assets/js/components/*"],
and this in the
'include'
"../webpack/assets/js/components/*"
Then i tried to make an import like this
import { SearchBar } from '@/webpack/search_bar';
or like this
const SearchBar = dynamic(
() => import('@/webpack/search_bar').then((component) => component.SearchBar),
{ ssr: false },
);
Nothing is working, at least with my tsconfig Typescript it stop yelling me, but it give me this error at runtime.
Module not found: Can't resolve '@/webpack/search_bar'
Anyone know how to fix this?4 Replies
your webpack folder is outside of the scope of the tsconfig.json of you nextjs project
so you might have to move up by 1 folder and point to it
I can't, that's the point.
Any particular reason why are these components in a seperate folder