React应用中jwt-decode无法正常使用问题求助

你遇到的问题是因为新版本的jwt-decode采用命名导出而非默认导出，你的导入方式和调用方式不符合当前包的导出规范，具体解决步骤如下：

1. 修正导入语句 #

将默认导入改为命名导入：

import { jwtDecode, InvalidTokenError } from 'jwt-decode'

2. 调整调用代码 #

把原代码中的jwt_decode(token)替换为命名导出的jwtDecode(token)，同时建议添加错误处理避免无效token导致崩溃：

useEffect(() => {
    const token = localStorage.getItem("token")
    if(token){
        try {
            const user = jwtDecode(token)
            // 这里可以处理解析后的用户信息，比如存入组件state
            console.log(user)
        } catch (error) {
            if (error instanceof InvalidTokenError) {
                console.error('无效的JWT Token:', error)
                // 可在此清除无效token或提示用户重新登录
                localStorage.removeItem("token")
            }
        }
    }
}, [])

原因说明 #

从错误提示possible exports: InvalidTokenError, jwtDecode可以明确看出，该包仅提供这两个命名导出项，不存在默认导出，因此原代码的默认导入方式会触发报错。

内容的提问来源于stack exchange，提问作者Dominic Sham