Adding TeamsFX.Provider in NextJS application causes error "Module not found: Can't resolve 'cldr'"

Question

I'm trying to add TeamsFX to my nextjs application, so I can use the built in teams authentication.

After adding TeamsFX packages ("@microsoft/teamsfx","@microsoft/teamsfx-react") and using the TeamsFXContext.Provider. I get the following error when trying to run locally:

error ./node_modules/globalize/dist/globalize.js
Module not found: Can't resolve 'cldr'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/globalize/dist/node-main.js
./node_modules/botbuilder-dialogs/lib/prompts/numberPrompt.js
./node_modules/botbuilder-dialogs/lib/prompts/index.js
./node_modules/botbuilder-dialogs/lib/index.js
./node_modules/@microsoft/teamsfx/dist/index.node.cjs.js
./node_modules/@microsoft/teamsfx-react/build/cjs/useTeamsFx.js
./node_modules/@microsoft/teamsfx-react/build/cjs/index.js
./src/app/app.tsx

Dependencies:

 "dependencies": {
        "@fluentui/react-charting": "^5.16.34",
        "@fluentui/react-components": "^9.20.2",
        "@fluentui/react-datepicker-compat": "^0.1.2",
        "@fluentui/react-icons": "^2.0.201",
        "@microsoft/teamsfx": "^2.2.1",
        "@microsoft/teamsfx-react": "^3.0.0",
        "@types/node": "18.16.3",
        "@types/react": "18.2.5",
        "eslint": "8.39.0",
        "eslint-config-next": "13.4.0",
        "next": "13.4.5",
        "react": "^18.2.0",
        "swr": "^2.1.5",
        "typescript": "5.0.4"
    },
    "devDependencies": {
        "env-cmd": "^10.1.0"
    },

TeamsFx Context:

import { TeamsUserCredential } from "@microsoft/teamsfx";
import { createContext } from "react";

export const TeamsFxContext = 
    createContext<{ teamsUserCredential?: TeamsUserCredential }>
    ({ teamsUserCredential: undefined });

App:

export default function App({ children }: { children: React.ReactNode }) {
    const { teamsUserCredential } = useTeamsUserCredential({
        initiateLoginEndpoint: *****,
        clientId: *****
    })

    const classes = useStyles();

    return (
        <TeamsFxContext.Provider value={{ teamsUserCredential }} >
            <FluentProvider
                id='app'
                theme={teamsLightTheme}>
                <div className={classes.app}>
                    <Header />
                    <NotificationBanner />
                    <Suspense fallback={<Loading />}>
                        <div className={classes.content}>
                            {children}
                        </div>
                    </Suspense>
                </div>
            </FluentProvider>
        </TeamsFxContext.Provider>
    );

}

I'm not great at dealing with npm package issues.

How do I troubleshoot this error?

running npm install cldr does not seem to fix the issue.

score 0 · Answer 1 · answered Jun 21 '23 at 05:12

It looks like to be caused by the reason that Globalize modules are wrapped by UMD offering AMD, CJS and global choices and webpack tries to use AMD (the one that appears first) and can't resolve paths correctly. This GitHub issue (https://github.com/globalizejs/globalize/issues/603) has several workarounds to resolve the issue by updating the webpack config file, which should be next.config.js in your case.

Adding TeamsFX.Provider in NextJS application causes error "Module not found: Can't resolve 'cldr'"

1 Answers1