BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default (React JS, TypeScript & JWT)

Question

When I want to verify the jwt token in React with TypeScript, it gives this error, how to solve it?

`

const [decodedToken, setDecodedToken] = useState<null | JwtPayload | string>(null);

  const verifyToken = (token: string) => {
    try {
      // Decode the token
      const decoded = jwt.verify(token, `${process.env.REACT_APP_JWT_SECRET}`);

      // Check if the token is valid
      if (decoded) {
        return decoded;
      }
    } catch (err) {
      // Return null if the token is invalid
      return null;
    }
  };

  useEffect(() => {
    const localToken = localStorage.getItem(
      `${process.env.REACT_APP_APPLICATION_NAME}-auth`
    );

    if (localToken) {
      const token = JSON.parse(localToken);
      const decoded = verifyToken(token.token);

      if (decoded) {
        // The token is valid, set the decoded token in state
        setDecodedToken(decoded);
      } else {
        // The token is invalid, redirect the user to the login page
      }
    }
  }, []);

`

Compiled with problems:X

ERROR in ./node_modules/buffer-equal-constant-time/index.js 4:13-37

Module not found: Error: Can't resolve 'buffer' in '/home/hossain/Documents/projects/travel-hunter/client/node_modules/buffer-equal-constant-time'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to: add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }' install 'buffer' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "buffer": false }

ERROR in ./node_modules/jsonwebtoken/sign.js 18:4-21

Module not found: Error: Can't resolve 'crypto' in '/home/hossain/Documents/projects/travel-hunter/client/node_modules/jsonwebtoken'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to: add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }' install 'crypto-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "crypto": false }

I have tried many solutions in github, stackoverflow, but can't solve it!

score 2 · Answer 1 · answered Jan 01 '23 at 22:20

Unfortunately, I do not think you are able to solve this problem with the 'jsonwebtoken' package. However, you can verify your token using a package called jwt_decode. You can begin by decoding your token, then logging it into the console.

import jwt_decode from "jwt-decode";
const decoded = jwt_decode(token)
console.log(decoded)

You will then know the type of data being received when the token is verified. You can then use this to create a helper function to serialize the data to the desired format.

export function deleteProps (obj: unserializedData, props: string[]) {
  for (var i = 0; i < props.length; i++) {
     if (obj.hasOwnProperty(props[i])) {
      // @ts-ignore
      delete obj[props[i]];
     }
  }    

  return obj 
}

The object return will now be of the required data type and you will be able to update your react state.

const serializedUser = deleteProps(decoded, ['_v','exp','iat'])
setDecodedToken(serializedUser)

For more information on the topic you can check this question here

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default (React JS, TypeScript & JWT)

1 Answers1