Vue.js + vuex: Module parse failed: Unexpected character '#'

[dcolley]

I am developing a Brave / Chrome extension using Vue.js. I used this article to get started.

Now I'm trying to use Vuex to connect the @polkadot/api

@vue/cli 4.5.15
npm 8.5.5

store/modules/polkadot.js

const api = require('@polkadot/api')
//import {api} from '@polkadot/api'
module.exports = {
    namespaced: true,
    state: {
    },
    getters: {
        initialised(state) { return !state.intial },
        existentialDeposit() { 
            return api.consts.balances.existentialDeposit 
        },
    },
    mutations: {},
    actions: {
    },
}

I can't get the project to build
It seems webpack cant handle the # hash character

Is there a loader I should add to handle this?
I tried various options in vue.config.js

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        // {
        //   test: /node_modules[/\\]@polkadot/i,
        //   loader: 'shebang-loader',
        //   // include: ['./node_modules/@polkadot/api/rx/Api.js']
        // },
        {
          test: /node_modules[/\\]@polkadot*\.js$/,
          loader: require.resolve('@open-wc/webpack-import-meta-loader'),
        }
      ]
    }
  },

  transpileDependencies: [
    'vuetify'
  ],
}

npm run build

> brave-extension@0.1.0 build
> vue-cli-service build


⠋  Building for production... WARN  No `key.pem` file detected. This is problematic only if you are publishing an existing extension
⠸  Building for production...

 ERROR  Failed to compile with 27 errors                                                                                         11:50:47

 error  in ./node_modules/@polkadot/api/rx/Api.js

Module parse failed: Unexpected character '#' (108: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
| 
| export class ApiRx extends ApiBase {
>   #isReadyRx;
|   /**
|    * @description Create an instance of the ApiRx class

 @ ./node_modules/@polkadot/api/rx/index.js 3:0-33 3:0-33
 @ ./node_modules/@polkadot/api/bundle.js
 @ ./node_modules/@polkadot/api/index.js
 @ ./src/store/modules/polkadot.js
 @ ./src/store/index.js
 @ ./src/popup/main.js
 @ multi ./src/popup/main.js

 error  in ./node_modules/@polkadot/api-contract/base/Code.js

Module parse failed: Unexpected character '#' (19: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
| }
| export class Code extends Base {
>   #tx = {};
| 
|   constructor(api, abi, wasm, decorateMethod) {

 @ ./node_modules/@polkadot/api-contract/base/index.js 4:0-68 4:0-68 4:0-68 4:0-68
 @ ./node_modules/@polkadot/api-contract/rx/index.js
 @ ./node_modules/@polkadot/api-contract/bundle.js
 @ ./node_modules/@polkadot/api-contract/index.js
 @ ./src/store/modules/polkadot.js
 @ ./src/store/index.js
 @ ./src/popup/main.js
 @ multi ./src/popup/main.js

 error  in ./node_modules/@polkadot/api-contract/base/Blueprint.js

Module parse failed: Unexpected character '#' (20: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
|    * @description The on-chain code hash for this blueprint
|    */
>   #tx = {};
| 
|   constructor(api, abi, codeHash, decorateMethod) {

 @ ./node_modules/@polkadot/api-contract/base/index.js 3:0-88 3:0-88 3:0-88 3:0-88
 @ ./node_modules/@polkadot/api-contract/rx/index.js
 @ ./node_modules/@polkadot/api-contract/bundle.js
 @ ./node_modules/@polkadot/api-contract/index.js
 @ ./src/store/modules/polkadot.js
 @ ./src/store/index.js
 @ ./src/popup/main.js
 @ multi ./src/popup/main.js

 error  in ./node_modules/@polkadot/rpc-provider/coder/index.js

Module parse failed: Unexpected character '#' (31: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
| 
| export class RpcCoder {
>   #id = 0;
| 
|   decodeResponse(response) {

 @ ./node_modules/@polkadot/rpc-provider/ws/index.js 11:0-45 389:60-68
 @ ./node_modules/@polkadot/rpc-provider/bundle.js
 @ ./node_modules/@polkadot/rpc-provider/index.js
 @ ./node_modules/@polkadot/api/bundle.js
 @ ./node_modules/@polkadot/api/index.js
 @ ./src/store/modules/polkadot.js
 @ ./src/store/index.js
 @ ./src/popup/main.js
 @ multi ./src/popup/main.js

 error  in ./node_modules/@polkadot/api-contract/base/Contract.js

Module parse failed: Unexpected character '#' (33: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
|    * @description The on-chain address for this contract
|    */
>   #query = {};
|   #tx = {};
| 

 @ ./node_modules/@polkadot/api-contract/base/index.js 5:0-57 5:0-57 5:0-57
 @ ./node_modules/@polkadot/api-contract/rx/index.js
 @ ./node_modules/@polkadot/api-contract/bundle.js
 @ ./node_modules/@polkadot/api-contract/index.js
 @ ./src/store/modules/polkadot.js
 @ ./src/store/index.js
 @ ./src/popup/main.js
 @ multi ./src/popup/main.js

 error  in ./node_modules/@polkadot/keyring/keyring.js

Module parse failed: Unexpected character '#' (39: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
| 
| export class Keyring {
>   #pairs;
|   #type;
|   #ss58;

 @ ./node_modules/@polkadot/keyring/bundle.js 3:0-39 10:0-19
 @ ./node_modules/@polkadot/keyring/index.js
 @ ./node_modules/@polkadot/api/bundle.js
 @ ./node_modules/@polkadot/api/index.js
 @ ./src/store/modules/polkadot.js
 @ ./src/store/index.js
 @ ./src/popup/main.js
 @ multi ./src/popup/main.js

 error  in ./node_modules/@polkadot/api-contract/Abi/index.js

Module parse failed: Unexpected character '#' (53:82)
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
|   constructor(abiJson, chainProperties) {
|     [this.json, this.registry, this.metadata, this.info] = parseJson(isString(abiJson) ? JSON.parse(abiJson) : abiJson, chainProperties);
>     this.constructors = this.metadata.spec.constructors.map((spec, index) => this.#createMessage(spec, index, {
|       isConstructor: true,
|       isPayable: spec.payable.isTrue

 @ ./node_modules/@polkadot/api-contract/bundle.js 3:0-37 3:0-37
 @ ./node_modules/@polkadot/api-contract/index.js
 @ ./src/store/modules/polkadot.js
 @ ./src/store/index.js
 @ ./src/popup/main.js
 @ multi ./src/popup/main.js

 error  in ./node_modules/@polkadot/api/submittable/createClass.js

Module parse failed: Unexpected character '#' (79:4)
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 Submittable extends ExtrinsicBase {
>     #ignoreStatusCb;
|     #transformResult = identity;
| 

 @ ./node_modules/@polkadot/api/submittable/createSubmittable.js 3:0-47 5:22-33
 @ ./node_modules/@polkadot/api/submittable/index.js
 @ ./node_modules/@polkadot/api/bundle.js
 @ ./node_modules/@polkadot/api/index.js
 @ ./src/store/modules/polkadot.js
 @ ./src/store/index.js
 @ ./src/popup/main.js
 @ multi ./src/popup/main.js

 error  in ./node_modules/@polkadot/api/promise/Api.js

Module parse failed: Unexpected character '#' (93: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
| 
| export class ApiPromise extends ApiBase {
>   #isReadyPromise;
|   #isReadyOrErrorPromise;
|   /**

 @ ./node_modules/@polkadot/api/promise/index.js 3:0-38 3:0-38
 @ ./node_modules/@polkadot/api/bundle.js
 @ ./node_modules/@polkadot/api/index.js
 @ ./src/store/modules/polkadot.js
 @ ./src/store/index.js
 @ ./src/popup/main.js
 @ multi ./src/popup/main.js

 error  in ./node_modules/@polkadot/util-crypto/key/DeriveJunction.js

Module parse failed: Unexpected character '#' (9: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
| const JUNCTION_ID_LEN = 32;
| export class DeriveJunction {
>   #chainCode = new Uint8Array(32);
|   #isHard = false;
| 

 @ ./node_modules/@polkadot/util-crypto/key/extractPath.js 4:0-53 19:16-30
 @ ./node_modules/@polkadot/util-crypto/key/index.js
 @ ./node_modules/@polkadot/util-crypto/bundle.js
 @ ./node_modules/@polkadot/util-crypto/index.js
 @ ./node_modules/@polkadot/keyring/bundle.js
 @ ./node_modules/@polkadot/keyring/index.js
 @ ./node_modules/@polkadot/api/bundle.js
 @ ./node_modules/@polkadot/api/index.js
 @ ./src/store/modules/polkadot.js
 @ ./src/store/index.js
 @ ./src/popup/main.js
 @ multi ./src/popup/main.js

 error  in ./node_modules/@polkadot/api/packageInfo.js

Module parse failed: Unexpected token (6:15)
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
| export const packageInfo = {
|   name: '@polkadot/api',
>   path: (import.meta && import.meta.url) ? new URL(import.meta.url).pathname.substring(0, new URL(import.meta.url).pathname.lastIndexOf('/') + 1) : 'auto',
|   type: 'esm',
|   version: '8.2.1'

 @ ./node_modules/@polkadot/api/detectPackage.js 6:0-47 7:14-25
 @ ./node_modules/@polkadot/api/index.js
 @ ./src/store/modules/polkadot.js
 @ ./src/store/index.js
 @ ./src/popup/main.js
 @ multi ./src/popup/main.js

 error  in ./node_modules/@polkadot/api-contract/packageInfo.js

Module parse failed: Unexpected token (6:15)
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
| export const packageInfo = {
|   name: '@polkadot/api-contract',
>   path: (import.meta && import.meta.url) ? new URL(import.meta.url).pathname.substring(0, new URL(import.meta.url).pathname.lastIndexOf('/') + 1) : 'auto',
|   type: 'esm',
|   version: '8.2.1'

 @ ./node_modules/@polkadot/api-contract/detectPackage.js 6:0-47 7:14-25
 @ ./node_modules/@polkadot/api-contract/index.js
 @ ./src/store/modules/polkadot.js
 @ ./src/store/index.js
 @ ./src/popup/main.js
 @ multi ./src/popup/main.js

 error  in ./node_modules/@polkadot/api-derive/packageInfo.js

Module parse failed: Unexpected token (6:15)
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
| export const packageInfo = {
|   name: '@polkadot/api-derive',
>   path: (import.meta && import.meta.url) ? new URL(import.meta.url).pathname.substring(0, new URL(import.meta.url).pathname.lastIndexOf('/') + 1) : 'auto',
|   type: 'esm',
|   version: '8.2.1'

 @ ./node_modules/@polkadot/api/detectOther.js 3:0-77 8:16-26
 @ ./node_modules/@polkadot/api/detectPackage.js
 @ ./node_modules/@polkadot/api/index.js
 @ ./src/store/modules/polkadot.js
 @ ./src/store/index.js
 @ ./src/popup/main.js
 @ multi ./src/popup/main.js

 error  in ./node_modules/@polkadot/keyring/packageInfo.js

Module parse failed: Unexpected token (6:15)
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
| export const packageInfo = {
|   name: '@polkadot/keyring',
>   path: (import.meta && import.meta.url) ? new URL(import.meta.url).pathname.substring(0, new URL(import.meta.url).pathname.lastIndexOf('/') + 1) : 'auto',
|   type: 'esm',
|   version: '9.0.1'

 @ ./node_modules/@polkadot/keyring/bundle.js 7:0-47 7:0-47
 @ ./node_modules/@polkadot/keyring/index.js
 @ ./node_modules/@polkadot/api/bundle.js
 @ ./node_modules/@polkadot/api/index.js
 @ ./src/store/modules/polkadot.js
 @ ./src/store/index.js
 @ ./src/popup/main.js
 @ multi ./src/popup/main.js

 error  in ./node_modules/@polkadot/networks/packageInfo.js

Module parse failed: Unexpected token (6:15)
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
| export const packageInfo = {
|   name: '@polkadot/networks',
>   path: (import.meta && import.meta.url) ? new URL(import.meta.url).pathname.substring(0, new URL(import.meta.url).pathname.lastIndexOf('/') + 1) : 'auto',
|   type: 'esm',
|   version: '9.0.1'

 @ ./node_modules/@polkadot/util-crypto/detectOther.js 3:0-72 6:16-23
 @ ./node_modules/@polkadot/util-crypto/detectPackage.js
 @ ./node_modules/@polkadot/util-crypto/index.js
 @ ./node_modules/@polkadot/keyring/bundle.js
 @ ./node_modules/@polkadot/keyring/index.js
 @ ./node_modules/@polkadot/api/bundle.js
 @ ./node_modules/@polkadot/api/index.js
 @ ./src/store/modules/polkadot.js
 @ ./src/store/index.js
 @ ./src/popup/main.js
 @ multi ./src/popup/main.js

 error  in ./node_modules/@polkadot/rpc-augment/packageInfo.js

Module parse failed: Unexpected token (6:15)
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
| export const packageInfo = {
|   name: '@polkadot/rpc-augment',
>   path: (import.meta && import.meta.url) ? new URL(import.meta.url).pathname.substring(0, new URL(import.meta.url).pathname.lastIndexOf('/') + 1) : 'auto',
|   type: 'esm',
|   version: '8.2.1'

 @ ./node_modules/@polkadot/rpc-augment/detectPackage.js 6:0-47 7:14-25
 @ ./node_modules/@polkadot/rpc-augment/index.js
 @ ./node_modules/@polkadot/api/bundle.js
 @ ./node_modules/@polkadot/api/index.js
 @ ./src/store/modules/polkadot.js
 @ ./src/store/index.js
 @ ./src/popup/main.js
 @ multi ./src/popup/main.js

 error  in ./node_modules/@polkadot/rpc-core/packageInfo.js

Module parse failed: Unexpected token (6:15)
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
| export const packageInfo = {
|   name: '@polkadot/rpc-core',
>   path: (import.meta && import.meta.url) ? new URL(import.meta.url).pathname.substring(0, new URL(import.meta.url).pathname.lastIndexOf('/') + 1) : 'auto',
|   type: 'esm',
|   version: '8.2.1'

 @ ./node_modules/@polkadot/api/detectOther.js 4:0-73 8:28-36
 @ ./node_modules/@polkadot/api/detectPackage.js
 @ ./node_modules/@polkadot/api/index.js
 @ ./src/store/modules/polkadot.js
 @ ./src/store/index.js
 @ ./src/popup/main.js
 @ multi ./src/popup/main.js

 error  in ./node_modules/@polkadot/rpc-provider/packageInfo.js

Module parse failed: Unexpected token (6:15)
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
| export const packageInfo = {
|   name: '@polkadot/rpc-provider',
>   path: (import.meta && import.meta.url) ? new URL(import.meta.url).pathname.substring(0, new URL(import.meta.url).pathname.lastIndexOf('/') + 1) : 'auto',
|   type: 'esm',
|   version: '8.2.1'

 @ ./node_modules/@polkadot/api/detectOther.js 5:0-81 8:38-50
 @ ./node_modules/@polkadot/api/detectPackage.js
 @ ./node_modules/@polkadot/api/index.js
 @ ./src/store/modules/polkadot.js
 @ ./src/store/index.js
 @ ./src/popup/main.js
 @ multi ./src/popup/main.js

 error  in ./node_modules/@polkadot/types/packageInfo.js

Module parse failed: Unexpected token (6:15)
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
| export const packageInfo = {
|   name: '@polkadot/types',
>   path: (import.meta && import.meta.url) ? new URL(import.meta.url).pathname.substring(0, new URL(import.meta.url).pathname.lastIndexOf('/') + 1) : 'auto',
|   type: 'esm',
|   version: '8.2.1'

 @ ./node_modules/@polkadot/api-contract/detectOther.js 4:0-71 5:25-34
 @ ./node_modules/@polkadot/api-contract/detectPackage.js
 @ ./node_modules/@polkadot/api-contract/index.js
 @ ./src/store/modules/polkadot.js
 @ ./src/store/index.js
 @ ./src/popup/main.js
 @ multi ./src/popup/main.js

 error  in ./node_modules/@polkadot/types-known/packageInfo.js

Module parse failed: Unexpected token (6:15)
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
| export const packageInfo = {
|   name: '@polkadot/types-known',
>   path: (import.meta && import.meta.url) ? new URL(import.meta.url).pathname.substring(0, new URL(import.meta.url).pathname.lastIndexOf('/') + 1) : 'auto',
|   type: 'esm',
|   version: '8.2.1'

 @ ./node_modules/@polkadot/api/detectOther.js 7:0-77 8:63-72
 @ ./node_modules/@polkadot/api/detectPackage.js
 @ ./node_modules/@polkadot/api/index.js
 @ ./src/store/modules/polkadot.js
 @ ./src/store/index.js
 @ ./src/popup/main.js
 @ multi ./src/popup/main.js

 error  in ./node_modules/@polkadot/util/packageInfo.js

Module parse failed: Unexpected token (6:15)
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
| export const packageInfo = {
|   name: '@polkadot/util',
>   path: (import.meta && import.meta.url) ? new URL(import.meta.url).pathname.substring(0, new URL(import.meta.url).pathname.lastIndexOf('/') + 1) : 'auto',
|   type: 'esm',
|   version: '9.0.1'

 @ ./node_modules/@polkadot/util/detectPackage.js 4:0-47 6:14-25
 @ ./node_modules/@polkadot/util/index.js
 @ ./node_modules/@polkadot/api-contract/detectPackage.js
 @ ./node_modules/@polkadot/api-contract/index.js
 @ ./src/store/modules/polkadot.js
 @ ./src/store/index.js
 @ ./src/popup/main.js
 @ multi ./src/popup/main.js

 error  in ./node_modules/@polkadot/util-crypto/packageInfo.js

Module parse failed: Unexpected token (6:15)
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
| export const packageInfo = {
|   name: '@polkadot/util-crypto',
>   path: (import.meta && import.meta.url) ? new URL(import.meta.url).pathname.substring(0, new URL(import.meta.url).pathname.lastIndexOf('/') + 1) : 'auto',
|   type: 'esm',
|   version: '9.0.1'

 @ ./node_modules/@polkadot/keyring/detectOther.js 4:0-78 5:26-36
 @ ./node_modules/@polkadot/keyring/detectPackage.js
 @ ./node_modules/@polkadot/keyring/index.js
 @ ./node_modules/@polkadot/api/bundle.js
 @ ./node_modules/@polkadot/api/index.js
 @ ./src/store/modules/polkadot.js
 @ ./src/store/index.js
 @ ./src/popup/main.js
 @ multi ./src/popup/main.js

 error  in ./node_modules/@polkadot/wasm-crypto/packageInfo.js

Module parse failed: Unexpected token (6:15)
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
| export const packageInfo = {
|   name: '@polkadot/wasm-crypto',
>   path: (import.meta && import.meta.url) ? new URL(import.meta.url).pathname.substring(0, new URL(import.meta.url).pathname.lastIndexOf('/') + 1) : 'auto',
|   type: 'esm',
|   version: '6.0.1'

 @ ./node_modules/@polkadot/wasm-crypto/detectPackage.js 6:0-47 7:14-25
 @ ./node_modules/@polkadot/wasm-crypto/index.js
 @ ./node_modules/@polkadot/util-crypto/crypto.js
 @ ./node_modules/@polkadot/util-crypto/bundle.js
 @ ./node_modules/@polkadot/util-crypto/index.js
 @ ./node_modules/@polkadot/keyring/bundle.js
 @ ./node_modules/@polkadot/keyring/index.js
 @ ./node_modules/@polkadot/api/bundle.js
 @ ./node_modules/@polkadot/api/index.js
 @ ./src/store/modules/polkadot.js
 @ ./src/store/index.js
 @ ./src/popup/main.js
 @ multi ./src/popup/main.js

 error  in ./node_modules/@polkadot/wasm-crypto-asmjs/packageInfo.js

Module parse failed: Unexpected token (6:15)
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
| export const packageInfo = {
|   name: '@polkadot/wasm-crypto-asmjs',
>   path: (import.meta && import.meta.url) ? new URL(import.meta.url).pathname.substring(0, new URL(import.meta.url).pathname.lastIndexOf('/') + 1) : 'auto',
|   type: 'esm',
|   version: '6.0.1'

 @ ./node_modules/@polkadot/wasm-crypto/detectOther.js 3:0-81 5:16-23
 @ ./node_modules/@polkadot/wasm-crypto/detectPackage.js
 @ ./node_modules/@polkadot/wasm-crypto/index.js
 @ ./node_modules/@polkadot/util-crypto/crypto.js
 @ ./node_modules/@polkadot/util-crypto/bundle.js
 @ ./node_modules/@polkadot/util-crypto/index.js
 @ ./node_modules/@polkadot/keyring/bundle.js
 @ ./node_modules/@polkadot/keyring/index.js
 @ ./node_modules/@polkadot/api/bundle.js
 @ ./node_modules/@polkadot/api/index.js
 @ ./src/store/modules/polkadot.js
 @ ./src/store/index.js
 @ ./src/popup/main.js
 @ multi ./src/popup/main.js

 error  in ./node_modules/@polkadot/wasm-crypto-wasm/packageInfo.js

Module parse failed: Unexpected token (6:15)
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
| export const packageInfo = {
|   name: '@polkadot/wasm-crypto-wasm',
>   path: (import.meta && import.meta.url) ? new URL(import.meta.url).pathname.substring(0, new URL(import.meta.url).pathname.lastIndexOf('/') + 1) : 'auto',
|   type: 'esm',
|   version: '6.0.1'

 @ ./node_modules/@polkadot/wasm-crypto/detectOther.js 4:0-81 5:25-33
 @ ./node_modules/@polkadot/wasm-crypto/detectPackage.js
 @ ./node_modules/@polkadot/wasm-crypto/index.js
 @ ./node_modules/@polkadot/util-crypto/crypto.js
 @ ./node_modules/@polkadot/util-crypto/bundle.js
 @ ./node_modules/@polkadot/util-crypto/index.js
 @ ./node_modules/@polkadot/keyring/bundle.js
 @ ./node_modules/@polkadot/keyring/index.js
 @ ./node_modules/@polkadot/api/bundle.js
 @ ./node_modules/@polkadot/api/index.js
 @ ./src/store/modules/polkadot.js
 @ ./src/store/index.js
 @ ./src/popup/main.js
 @ multi ./src/popup/main.js

 error  in ./node_modules/@polkadot/x-bigint/packageInfo.js

Module parse failed: Unexpected token (6:15)
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
| export const packageInfo = {
|   name: '@polkadot/x-bigint',
>   path: (import.meta && import.meta.url) ? new URL(import.meta.url).pathname.substring(0, new URL(import.meta.url).pathname.lastIndexOf('/') + 1) : 'auto',
|   type: 'esm',
|   version: '9.0.1'

 @ ./node_modules/@polkadot/x-bigint/index.js 4:0-47 4:0-47
 @ ./node_modules/@polkadot/util/has.js
 @ ./node_modules/@polkadot/util/bundle.js
 @ ./node_modules/@polkadot/util/index.js
 @ ./node_modules/@polkadot/api-contract/detectPackage.js
 @ ./node_modules/@polkadot/api-contract/index.js
 @ ./src/store/modules/polkadot.js
 @ ./src/store/index.js
 @ ./src/popup/main.js
 @ multi ./src/popup/main.js

 error  in ./node_modules/@polkadot/x-global/packageInfo.js

Module parse failed: Unexpected token (6:15)
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
| export const packageInfo = {
|   name: '@polkadot/x-global',
>   path: (import.meta && import.meta.url) ? new URL(import.meta.url).pathname.substring(0, new URL(import.meta.url).pathname.lastIndexOf('/') + 1) : 'auto',
|   type: 'esm',
|   version: '9.0.1'

 @ ./node_modules/@polkadot/x-global/index.js 3:0-47 3:0-47
 @ ./node_modules/@polkadot/util/versionDetect.js
 @ ./node_modules/@polkadot/util/detectPackage.js
 @ ./node_modules/@polkadot/util/index.js
 @ ./node_modules/@polkadot/api-contract/detectPackage.js
 @ ./node_modules/@polkadot/api-contract/index.js
 @ ./src/store/modules/polkadot.js
 @ ./src/store/index.js
 @ ./src/popup/main.js
 @ multi ./src/popup/main.js

 ERROR  Build failed with errors.

[jacogr]

Your bundler does not support private fields, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_class_fields

additionally it also doesn’t seem to support import.meta while including the ESM version - a solution may be https://polkadot.js.org/docs/usage/FAQ#on-webpack-4-i-have-a-parse-error-on-importmetaurl

none of this is API related, rather the bundler not supporting ESM constructs.

[dcolley]

Thanks @jacogr - I agree the issue is not with the api per se.
Integrating the api in vue (other frameworks) is not documented anywhere I can find. I'll post my solution if/when I can get it working.

[dcolley]

With help from @jacogr's comment I was able to track down a solution.
I had to patch @open-wc/webpack-import-meta-loader as follows open-wc/legacy#6

This vue.config.js seems to work for my setup:

module.exports = {

  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.js$/,
          // test: /node_modules[/\\]@polkadot*.js$/,
          loader: require.resolve('@open-wc/webpack-import-meta-loader'),
          // loader: '@open-wc/webpack-import-meta-loader',
          exclude: /\.vue$/,
        },

        {
          test: /\.m?js$/,
          include: /node_modules[/\\|]@polkadot/i,
          // exclude: /(node_modules|bower_components)/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: [
                '@babel/preset-env',
                '@vue/cli-plugin-babel/preset',
              ],
              plugins: [
                "@babel/plugin-proposal-private-methods",
                "@babel/plugin-proposal-class-properties",
                '@babel/plugin-proposal-object-rest-spread',
              ]
            }
          }
        },


      ]
    }
  },
  
}

[DanHenton]

I had the exact same issue! Thanks heaps for documenting the fix! 💚

[polkadot-js-bot]

This issue has been open for 21 days with no activity and is not labelled as an enhancement. It will be closed in 7 days.

[polkadot-js-bot]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue if you think you have a related problem or query.