为什么 Next.js 会抛出错误：WEBPACK_IMPORTED_MODULE 不是函数？

Question

我无法找出问题所在。我正在导出一个为当前经过身份验证的用户对象（如果存在）提供服务的函数。然后，我使用此用户对象来确定导航链接的添加。无论我如何修改参考资料，这个错误都不会消失。

这是函数定义@/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

我希望就我在这里出错的地方提供一些意见，因为显然 - 我是。

Answer 1

我尝试重现您的问题并偶然发现了另一个问题。通过解决这个问题，我可以毫无问题地运行代码，这也许也可以解决您的问题。

这里的问题是

use-auth-user

钩子使用

use client

标记为仅限客户端的模块。这意味着它只能在客户端组件中使用。

但是，

getResourceMenu()

中的

menus.ts

函数直接调用

UseAuthUser()

，被视为服务器代码，导致不匹配。

我继续并重构了代码，使其成功运行以解决这个特定问题，它似乎也解决了您的问题。

将逻辑移至客户端组件

这里，在客户端组件中调用

UseAuthUser

，并将结果交给

getResourceMenu

，而不是在

getResourceMen

函数内部直接进行钩子调用。

// 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;
}