reactjsnext.jsimportjwtimporterror

Receiving attempted import error for JWT in Next.js

I added a check for users, when they come to the / route, if they have a token that token is checked, and if it's valid and not expired, they will be redirected to the proper route depending on the role value in the token. If the token is invalid or expired it will be deleted from local storage and the user won't be redirected and will stay on / route.

But it looks like there is a problem with importing JWT, when I start the following code I get the following message in the VSCode terminal:

./src/app/page.js
Attempted import error: 'jwt-decode' does not contain a default export (imported as 'jwt_decode').

And the same message in the Brave browser console:

./src/app/page.js
Attempted import error: 'jwt-decode' does not contain a default export (imported as 'jwt_decode').

When I test this feature login, get redirected to the for example /home-sportista route, try to get back to the / route, my token gets deleted, and got this console logs in Brave browser:

Stored token: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJzZWRpbiIsInJvbGUiOiJzcG9ydGlzdGEiLCJleHAiOjE3MTYyMTk4MzV9.2cWkBIKGxhEevyt_uInxeipHZPlIDk6dVvEtLJOkhck
VM10226 page.js:55 Token exists, validating...
VM10226 page.js:46 Error decoding token: TypeError: (0 , jwt_decode__WEBPACK_IMPORTED_MODULE_6__.default) is not a function
    at validateToken (VM10226 page.js:35:83)
    at eval (VM10226 page.js:56:17)
    at commitHookEffectListMount (react-dom.development.js:21102:23)
    at commitHookPassiveMountEffects (react-dom.development.js:23154:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23259:11)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23256:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23370:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23370:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23256:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23370:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23256:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23370:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23256:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23256:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23256:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23370:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23256:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23256:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23370:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23370:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23256:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23370:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23370:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23370:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23370:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23256:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23370:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
window.console.error @ app-index.js:33
console.error @ hydration-error-info.js:63
validateToken @ VM10226 page.js:46
eval @ VM10226 page.js:56
commitHookEffectListMount @ react-dom.development.js:21102
commitHookPassiveMountEffects @ react-dom.development.js:23154
commitPassiveMountOnFiber @ react-dom.development.js:23259
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23256
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23370
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23370
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23256
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23370
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23256
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23370
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23256
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23256
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23256
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23370
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23256
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23256
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23370
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23370
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23256
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23370
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23370
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23370
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23370
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23256
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23370
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23370
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23256
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23256
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23370
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23256
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23370
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23370
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23370
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23370
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23370
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23370
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23256
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23370
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23256
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23256
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23256
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23256
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23370
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23370
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23370
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23267
commitPassiveMountEffects @ react-dom.development.js:23225
flushPassiveEffectsImpl @ react-dom.development.js:26497
flushPassiveEffects @ react-dom.development.js:26438
eval @ react-dom.development.js:26172
workLoop @ scheduler.development.js:256
flushWork @ scheduler.development.js:225
performWorkUntilDeadline @ scheduler.development.js:534
Show 98 more frames
Show less
VM10226 page.js:68 Token is invalid, removing...
VM10226 page.js:53 Stored token: null
VM10226 page.js:72 No token found

This is the content of page.js file responsible for / route:

"use client"
import React, { useState, useEffect } from 'react';
import { authMiddleware } from './middleware';
import { useRouter } from "next/navigation";
import LoginForma from "./components/LoginForma/LoginForma";
import Register from './components/Register/Register';
import jwt_decode from "jwt-decode";
import "./globals.css"

const Login = () => {
  const [showRegistration, setShowRegistration] = useState(false);
  const [showLogin, setShowLogin] = useState(false);
  const router = useRouter();

  const handleRegisterClick = () => {
    setShowRegistration(true);
    setShowLogin(false);
  };

  const handleLoginClick = () => {
    setShowLogin(true);
    setShowRegistration(false);
  };

  const validateToken = (token) => {
    try {
      const decoded = jwt_decode(token);
      console.log("Decoded token:", decoded);
      const currentTime = Date.now() / 1000;
      console.log("Current time:", currentTime);
      console.log("Token expiration time:", decoded.exp);
      if (decoded.exp < currentTime) {
        return false;
      }
      console.log("Token is valid");
      return true;
    } catch (error) {
      console.error("Error decoding token:", error);
      return false;
    }
  };

  useEffect(() => {
    document.body.classList.add('with-background');
    const token = localStorage.getItem('token');
    console.log("Stored token:", token);

    if (token) {
      console.log("Token exists, validating...");
      if (validateToken(token)) {
        console.log("Token is valid, checking user role...");
        authMiddleware(router, token, ['sportista', 'vlasnik', 'admin'])
          .then((response) => {
            router.push(`http://localhost:8081/home-${response}`);
          })
          .catch((error) => {
            console.error('Unauthorized access:', error);
          });
      } else {
        console.log("Token is invalid, removing...");
        localStorage.removeItem('token');
      }
    } else {
      console.log("No token found");
    }

    return () => {
      document.body.classList.remove('with-background');
    };
  }, [router]);

  return (
    <div>
      {!showRegistration && !showLogin && <LoginForma onRegisterClick={handleRegisterClick} />}
      {showRegistration && <Register onLoginClick={handleLoginClick} />}
      {showLogin && <LoginForma onRegisterClick={handleRegisterClick} />}
    </div>
  )
}

export default Login;

I tried using ChatGPT to fix this problem and tried these import versions:

import jwt_decode from "jwt-decode";

import { default as jwt_decode } from "jwt-decode";

import { decode as jwt_decode } from "jwt-decode";

Also tried deleting and installing JWT again.

The JWT version is:

"jwt-decode": "^4.0.0"

Solution

  • Just import it as this:

    import { jwtDecode } from 'jwt-decode';

    This will work perfectly!!