Search code examples
reactjsnpmjwt

cant use jsonwebtoken with latest version of react


TL:DR: replace jsonwebtoken with jwt-decode

I have had some trouble with upgrading my existing react app to the latest version. Every time I do I get the following errors

Can't resolve 'buffer' in '/home/user/projects/trash/tokentest/test/node_modules/buffer-equal-constant-time'

Can't resolve 'stream' in '/home/user/projects/trash/tokentest/test/node_modules/buffer-equal-constant-time'

Can't resolve 'util' in '/home/user/projects/trash/tokentest/test/node_modules/buffer-equal-constant-time'

Can't resolve 'crypto' in '/home/user/projects/trash/tokentest/test/node_modules/buffer-equal-constant-time'

I can get rid of all these except crypto by installing the buffer stream and util packages.
I tried installing crypto, crypto-browserify and crypto-js.

I did figure out I could make it work by removing jsonwebtoken from the project. But its not fully functional anymore after that, since its needed for user authentication.

For testing I created a completely fresh create-react-app project. It works out of the box. But as soon as I install and import jsonwebtoken, I get the exact same errors again. Meaning even on a completely clean project, jsonwebtoken cannot be used.

Is there a way to fix this? Because I would like to upgrade my project and use jsonwebtoken.


Solution

  • jsonwebtoken is a Node.js module, your previous use of it in a react application relied upon a polyfill of the Node.js std modules. This most likely a) relied on slow js cryptography that isn't maintained anymore and lacks feature parity with Node's crypto and b) increased your js bundle size considerably. Updating react likely meant updating webpack which no longer defaults to using the questionable crypto polyfill.

    It is better to rely on modules made for either browsers or "universal", you can discover such modules amongst the ones listed on jwt.io under "JavaScript". Out of the ones listed there, jose uses purely available Web APIs.