Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
dcolley opened this issue Apr 27, 2022 · 6 comments
Closed

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

dcolley opened this issue Apr 27, 2022 · 6 comments
Labels
stale Support Tracks issues or requests related to troubleshooting, answering questions, and user assistance.

Comments

@dcolley
Copy link

dcolley commented Apr 27, 2022

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

> [email protected] 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
Copy link
Member

jacogr commented Apr 27, 2022

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
Copy link
Author

dcolley commented Apr 27, 2022

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
Copy link
Author

dcolley commented Apr 27, 2022

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',
              ]
            }
          }
        },


      ]
    }
  },
  
}

@jacogr jacogr added the Support Tracks issues or requests related to troubleshooting, answering questions, and user assistance. label Apr 27, 2022
@DanHenton
Copy link

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

@polkadot-js-bot
Copy link

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
Copy link

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.

@polkadot-js polkadot-js locked as resolved and limited conversation to collaborators Jun 14, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
stale Support Tracks issues or requests related to troubleshooting, answering questions, and user assistance.
Projects
None yet
Development

No branches or pull requests

4 participants