javascript - Γιατί το Next.js εμφανίζει σφάλμα: WEBPACK_IMPORTED_MODULE δεν είναι συνάρτηση;

Δεν μπορώ να καταλάβω το πρόβλημα. Εξάγω μια συνάρτηση που επιστρέφει το αντικείμενο του τρέχοντος πιστοποιημένου χρήστη (εάν υπάρχει). Στη συνέχεια, χρησιμοποιώ αυτό το αντικείμενο χρήστη για να αποφασίσω την προσθήκη ενός συνδέσμου πλοήγησης. Αυτό το σφάλμα δεν εξαφανίζεται όσο κι αν έχω τροποποιήσει την αναφορά.

Αυτό είναι ο ορισμός της συνάρτησης @/app/hooks/use-auth-user.ts

'use client';
import {
    fetchAuthSession,
    fetchUserAttributes,
    getCurrentUser,
} from 'aws-amplify/auth';
import { useEffect, useState } from 'react';

export default function UseAuthUser() {
    const [user, setUser] = useState<Record<string, any>>();

useEffect(() => {
    async function getUser() {
        const session = await fetchAuthSession();
        if (!session.tokens) {
            return;
        }

        const user = {
            ...(await getCurrentUser()),
            ...(await fetchUserAttributes()),
            isAdmin: false,
        };

        const groups = session.tokens.accessToken.payload['cognito:groups'];
        // @ts-ignore
        user.isAdmin = Boolean(groups && groups.includes('administrators'));
        setUser(user);
    }

    getUser();
}, []);

return user;
}

Και εδώ είναι η συνάρτηση από την οποία αναφέρομαι στο @/app/lib/menus.ts

import UseAuthUser from '@/app/hooks/use-auth-user';

export function getResourceMenu(): Menu {
const user = UseAuthUser();
let links: Menu = [
    { name: 'Privacy Policy', href: '/privacy' },
    { name: 'Terms & Conditions', href: '/terms-and-conditions' },
    { name: 'Member Portal', href: '/auth/login' },
];

if (user) {
    links.push({ name: 'Dashboard', href: '/dashboard' });
}

return links;
}

Συνημμένο εδώ ένα στιγμιότυπο οθόνης του σφάλματος:

Error: (0 , _app_hooks_use_auth_user__WEBPACK_IMPORTED_MODULE_0__.default) is not a function

Θα ήθελα κάποιες απόψεις για το πού κάνω λάθος εδώ, γιατί προφανώς - κάνω.

Απάντηση #1

Προσπάθησα να αναπαράγω το πρόβλημά σας και έπεσα σε ένα διαφορετικό. Επιλύοντας αυτό, μπόρεσα να τρέξω τον κώδικα χωρίς προβλήματα, κάτι που ίσως θα λύσει και το πρόβλημά σας επίσης.

Το πρόβλημα εδώ είναι ότι το hook use-auth-user σημειώνεται ως module μόνο για τον πελάτη χρησιμοποιώντας use client. Αυτό σημαίνει ότι μπορεί να χρησιμοποιηθεί μόνο μέσα σε στοιχεία πελάτη.

Ωστόσο, η συνάρτηση getResourceMenu() στο menus.ts καλεί απευθείας τη UseAuthUser(), η οποία αντιμετωπίζεται ως κώδικας διακομιστή, προκαλώντας μια ασυμφωνία.

Προχώρησα και αναδόμησα τον κώδικα ώστε να τρέχει επιτυχώς για να επιλύσω αυτό το συγκεκριμένο ζήτημα και φαίνεται ότι επιλύει και το δικό σας.

Μεταφορά της λογικής σε ένα στοιχείο πελάτη

Εδώ, το UseAuthUser καλείται σε ένα component πελάτη και το αποτέλεσμα παραδίδεται στο getResourceMenu αντί για μια άμεση κλήση hook μέσα στη συνάρτηση getResourceMenu.

// src/components/MenuComponent.tsx
'use client';  // Mark this as a client component
import React from 'react';
import UseAuthUser from '@/hooks/use-auth-user';
import { getResourceMenu } from '@/lib/menus';

const MenuComponent = () => {
    const user = UseAuthUser();  // Fetch user on the client side
    const links = getResourceMenu(user);  // Pass user data to getResourceMenu

    return (
        <nav>
            {links.map((link, index) => (
                <a key={index} href={link.href}>
                    {link.name}
                </a>
            ))}
        </nav>
    );
};

export default MenuComponent;

Αλλαγές στο getResourceMenu

Απλώς αποδέχοντας τον χρήστη ως είσοδο και εφαρμόζοντας συνθηματική απόδοση

export function getResourceMenu(user: any) {
    let links = [
        { name: 'Privacy Policy', href: '/privacy' },
        { name: 'Terms & Conditions', href: '/terms-and-conditions' },
    ];

    if (user) {
        links.push({ name: 'Dashboard', href: '/dashboard' });
    }

    return links;
}