'Why whenever I try to authorize user using jwt on Dashboard.js, it throws an error

I have got many Errors like the below

Following are the errors i got (screenshot of error ):

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 'D:\Softwarica\Semester5\Final_Assignment\Clarify\frontend\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/jwa/index.js 5:13-30

Module not found: Error: Can't resolve 'crypto' in 'D:\Softwarica\Semester5\Final_Assignment\Clarify\frontend\node_modules\jwa'

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 }

// Dashboard.js -- I am facing error whenever i try to add code from below use effect code

import React,{useEffect} from "react";
import jwt from 'jsonwebtoken'
    
    const Dashboard = () => {
    useEffect(() =>{
      const token=localStorage.getItem('token')
      if(token){
        const user =jwt.decode(token)
        console.log(user)
      }
    })
    
      return <h1>Hello World</h1>;
    };
    export default Dashboard;




// This is my App.js Code
// App.js

    import { BrowserRouter, Routes, Route } from "react-router-dom";
    import "bootstrap/dist/css/bootstrap.min.css";
    import Register from "./RegisterPage/Register";
    import Login from "./RegisterPage/Login";
    import Dashboard from './RegisterPage/Dashboard'
    
    function App() {
      return (
        <div>
          <BrowserRouter>
            <Routes>
              <Route path="/register" element={<Register/>} />
              <Route path="/login" element={<Login/>} />
              <Route path="/dashboard" element={<Dashboard/>} />
    
            </Routes>
          </BrowserRouter>
      
        </div>
      );
    }

    export default App;


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source