1

I'm trying to use 'jsonwebtoken' for and Angular 12 app and getting these errors

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 }


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


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

I haven't changed any configurations in any of the files

R. Richards
  • 24,603
  • 10
  • 64
  • 64
Jesse Reyes Cortes
  • 11
  • 5

1 Answers1

1

Here is a solution that I used & tested with Angular 13.0.4 & jsonwebtoken 8.5.1:

1.Install dependencies shown in the error (as it also can be seen in this answer):

npm i crypto-browserify util stream-browserify

2.Add paths to tsconfig.json inside the compilerOptions object:

   "paths": {
     "crypto": ["node_modules/crypto-browserify"],
     "stream": ["node_modules/stream-browserify"],
     "util": ["node_modules/util"]
   }

After this you might need to stop and rerun ng serve if it was running.

This just got rid of the initial errors, but raised another one. You will now see a blank page if you visit the project in your browser, and find this error in its console: Uncaught ReferenceError: global is not defined. To read more about why is this happening, read this answer.

3.The workaround for this (as it's stated here):

Firstly, execute

npm i process

Then add these lines to polyfill.ts (or the ones in the referred answer, the only difference is that I used ES Modules instead of CommonJS):

import * as buffer from 'buffer';
import * as process from 'process';
(window as any).global = window;
global.Buffer = global.Buffer || buffer.Buffer;
global.process = process;

If you get an error of TS7016: Could not find a declaration file for module 'process'., you can safely suppress that by putting //@ts-ignore above the line that imports process. Should you also get an error TS2304: Cannot find name 'global'., you've got to create (or modify if it already exists) src/typings.d.ts with this line: declare var global: any, as I found out here.

You can now import and use jwt without any issues as one would normally do.

Important to note that while this method works, it has one "side effect", namely you can't use environment variables using the well-known .env file -> process.env.VARIABLE_NAME approach. If you need to use environment variables, you can for example read the .env file line by line and store the results in some variable, or better yet create a .env.js file and store your variables there as object key-value pairs and import them as needed. Or you can of course find a third option, whatever suits your needs best. I didn't dig deeper regarding other possible side effects (there were no more for me) and alternative environment variable usages as this project where I came across this issue was just a small school assignment, also I'm not using the Angular framework generally.

Szezs
  • 66
  • 1
  • 6