Module parse failed: Unexpected character '#'

[david753951]

I have a VueJS application that I'm trying to use the node-openid-client to be authenticated through a third-party.

I get the error from the title when I try to build the application

That's my VueJS code, a simple new page

<template>
  <div class="newlogin"></div>
</template>

<script>
import axios from "axios";
import { Issuer } from 'openid-client';

export default {
  data() {
    return {

    };
  },
  async created() {
  },
  methods: {
  }
};
</script>

And that's the entire error that I'm receiving

 ERROR  Failed to compile with 2 errors                                                                                                                                                                                                                     11:34:32
 error  in ./node_modules/openid-client/lib/client.js

Module parse failed: Unexpected character '#' (169:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| class BaseClient {
>   #metadata;
|   #issuer;
|   #aadIssValidation;

 @ ./node_modules/openid-client/lib/passport_strategy.js 6:23-42
 @ ./node_modules/openid-client/lib/index.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/NewLogin.vue?vue&type=script&lang=js&
 @ ./src/views/NewLogin.vue?vue&type=script&lang=js&
 @ ./src/views/NewLogin.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://mywebserver.sbc.com:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

 error  in ./node_modules/openid-client/lib/issuer.js

Module parse failed: Unexpected character '#' (32:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| class Issuer {
>   #metadata;
|   constructor(meta = {}) {
|     const aadIssValidation = meta[AAD_MULTITENANT];

 @ ./node_modules/openid-client/lib/index.js 1:15-34
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/NewLogin.vue?vue&type=script&lang=js&
 @ ./src/views/NewLogin.vue?vue&type=script&lang=js&
 @ ./src/views/NewLogin.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://mywebserver.sbc.com:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

I tried many solutions that I found on the internet, and looks like it's something related to webpack, but I don't know how I can continue.

[panva]

This is a Node.js runtime-only library, as per the readme, it will not function in a browser.