I created a React app and I try to make a separate file for functions. I required 'jwt-decode' library like that:

const jwt_decode = require("jwt-decode");

After that I used it like that:

const verifyToken = (token) => { console.log(jwt_decode(token)); };

And exported like that:

module.exports = { verifyToken };

When I tried to use it in my react page, I saw this error in the console:

Uncaught TypeError: jwt_decode is not a function

What I did wrong?

I created a React app and I try to make a separate file for functions. I required 'jwt-decode' library like that:

const jwt_decode = require("jwt-decode");

After that I used it like that:

const verifyToken = (token) => { console.log(jwt_decode(token)); };

And exported like that:

module.exports = { verifyToken };

When I tried to use it in my react page, I saw this error in the console:

Uncaught TypeError: jwt_decode is not a function

What I did wrong?

• javascript
• reactjs
• jwt

• I'm calling the function like that: import { verifyToken } from '../utils/checkJwt'; – SnNaCk Commented Feb 5, 2023 at 14:49

5 Answers 5

import { jwtDecode } from "jwt-decode";

const token = "eyJ0eXAiO.../// jwt token";
const decoded = jwtDecode(token);

it would help if you imported like these in the react-app for more info go through this official doc https://www.npmjs./package/jwt-decode#documentation

You need to require the default export:

const { default: jwt_decode } = require("jwt-decode");

const token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c";
console.log(jwt_decode(token));

Expected output:

{ sub: '1234567890', name: 'John Doe', iat: 1516239022 }

Alternatively use import when type in package.json is set to module.

import jwt_decode from "jwt-decode";

It looks like you are trying to use CommonJS require syntax in a React app that is likely using ES6 import syntax.

Try changing your code to the following:

import jwt_decode from "jwt-decode";

const verifyToken = (token) => { console.log(jwt_decode(token)); };

export default { verifyToken };

And then in your React page, use:

import verifyToken from './path/to/your/file';

It works to me!

The correct import statement for jwt-decode in JavaScript should be:

import jwtDecode from 'jwt-decode';

Then, you can use it to decode your JWT token like this:

const decoded = jwtDecode(token);

The thing that worked for me, I was getting cache error

npm ERR! Remove the existing file and try again, or run npm npm ERR! with --force to overwrite files recklessly.

To solve this : Run npm cache clean --force Then run

 sudo chown -R 502:20 "/Users/<username>/.npm"
//The mand will be mentioned in the errors

Now finally run

npm i jwt-decode