Next.js Discord

Discord Forum

Import components from outside of Nextjs app.

Unanswered
Giant Angora posted this in #help-forum
Open in Discord
Giant AngoraOP
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.json and added 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?

Btw, the folders need to live that way, I CAN'T CHANGE IT, because it's a older React/Django proyect that i'm migrating to Next.js App Router.

0 Replies