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.

[pharazon]

# is not javascript syntax. If it would be a comment, the line should be starting with //. To me this looks like a bug.

[panva]

It is not a bug. It is an ecmascript feature supported on all target runtimes (Node.js & Node embedders only) of this library.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_class_fields

[pharazon]

Ok, you are right, sorry. I'm running the code on node10, but this link suggests I should use node12 or newer instead: https://stackoverflow.com/questions/57708412/how-to-use-private-class-fields-in-nodejs-12

[panva]

https://github.com/panva/node-openid-client/blob/v5.1.3/package.json#L73-L75
https://github.com/panva/node-openid-client#install

Node.js LTS releases Codename Erbium (starting with ^12.19.0) and newer LTS releases are supported. This means ^12.19.0 (Erbium), ^14.15.0 (Fermium), and ^16.13.0 (Gallium). Future LTS releases will be added to this list as they're released.

[janvarsa]

I've tried this with Node 14.15.0 and 16.13.0 and it still fails to build on Netlify.

./node_modules/openid-client/lib/client.js
Module parse failed: Unexpected character '#' (168:2)

Can I fix this with Webpack or Babel config?