Next.js Discord

Discord Forum

[App Router] Using third party node_modules with Next.Js 13.4 have resolve issues all over

Unanswered
Estrela Mountain Dog posted this in #help-forum
Open in Discord
Estrela Mountain DogOP
I am new in NextJs space.
Please help understanding how this issues can be addressed or what is the right way to use other libraries and I specifically mean npm installed which ever node_modules, not third party scripts specified in the docs

My particular case. I am building microsoft teams app (tab), essentially it is just a web app with React Context API. Then besides using the Context API I want to use team.js library for sso along with fluentui/react-components for design stuff. Also @microsoft/teamsfx and @microsoft/teamsfx-react - these two provide essential stuff to make things easier so not to reinvent the wheel.

To make all things work below is the wrap I need to have for my components. Even though example is for using microsoft libraries, it is the same problem with using other npm modules as well. Always getting module not found because cannot resolve it.
What I see is, that next.js is trying to resolve npm modules' dependencies from within the npm modules' folder but not from root node_modules - problem with cldr, problem with utf8 something module, problem with encoding module, even though they are present under node_modules folder, nextjs cannot resolve them... aliasing those modules in weback.config under resolve.alias helps for certain scenarios... just dunno... do you really have to jump all these hoops to work with next.js? Why? I am just frustrated already, very less information on the web for app router - just basic stuff, as well as basic documentiton in next.js app router... Can someone give a good explainer on what is the correct way of using npm installed modules from third parties? How to work with them when Server Side Rendering is concerned and how to work around them with using Client Side Rendering? How to work with other libraries which are not yet in use by the project?

Feels so painful. Fullstack they said... I have been sitting with this for a week already and I just cannot wrap my head around it nor find some decent content which is not talking about Page Router.

Here It is possible to find another one facing the issue:
https://stackoverflow.com/questions/76485361/adding-teamsfx-provider-in-nextjs-application-causes-error-module-not-found-ca

Workarounds posted here for cldr issue
https://github.com/globalizejs/globalize/issues/603

Please help, I just want to brake my screen already.
Vanilla React syntax, creating everything yourself from scratch works just perfect in next.js... I have moved passed that in my learning stage already, but stuck on this one.

export default function App({ children }) {
//useTeamsUserCredential comes from @microsoft/teamsfx-react
    const { teamsUserCredential } = useTeamsUserCredential({
        initiateLoginEndpoint: *****,
        clientId: *****
    })

    const classes = useStyles();

    return (
        //TeamsFxContext is just createContext from react 
        <TeamsFxContext.Provider value={{ teamsUserCredential }} >
            //FluentProvider comes from @fluentui/react-components
            <FluentProvider 
                id='app'
                theme={teamsLightTheme}>
                <div className={classes.app}>
                    <Header />
                    <NotificationBanner />
                    <Suspense fallback={<Loading />}>
                        <div className={classes.content}>
                            //Everything for the teams app goes in here
                            {children}
                        </div>
                    </Suspense>
                </div>
            </FluentProvider>
        </TeamsFxContext.Provider>
    );

}


App component imported to app/layout file
export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body className={inter.className}>
                <App>
                    {children}
                </App>
            </body>
        </html>
    );
}

0 Replies