How to parse esm module in vuejs-CodePudding

I'm encountering the following error in my vue project after packages update:

Failed to compile.

./node_modules/@polkadot/networks/packageInfo.js 6:27
Module parse failed: Unexpected token (6:27)
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: new URL('.', import.meta.url).pathname,
|   type: 'esm',
|   version: '8.3.1'

Honestly I've tried lot of suggestions found across the internet and nothing appears to solve it.

My package.json:

{
  "name": "polkadot-frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@polkadot/extension-dapp": "0.42.2",
    "@polkadot/keyring": "^8.1.2",
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^9.1.2",
    "vue-router": "^3.2.0",
    "vuetify": "^2.4.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "^4.5.15",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "^4.5.15",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-standard": "^5.1.2",
    "@vue/eslint-config-typescript": "^7.0.0",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^6.2.2",
    "sass": "~1.32.0",
    "sass-loader": "^10.0.0",
    "typescript": "~4.1.5",
    "vue-cli-plugin-vuetify": "~2.4.5",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.7.0"
  }
}

My tsconfig:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

My vue.config.js

module.exports = {
  transpileDependencies: [
    'vuetify'
  ]
}

My babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

Does anyone have idea how to fix this? As far as I understand from the error my webpack can't parse the js file from the module. But aren't the js files supported by default in webpack?

My understanding is that somehow I need to specify in vue.config.js that I'm using esm modules, and how they can be loaded and parsed.

Any ideas will be greatly appreciated!

CodePudding user response：

It appears that this is known issue with webpack 4 and older versions (I think it is fixed in version 5).

Basically in order webpack to be able to parse the problematic files it needs additional package: https://www.npmjs.com/package/@open-wc/webpack-import-meta-loader

Once I've installed the package I've included it in my vue webpack config via the vue.config.js file as follows:

const {VueLoaderPlugin} = require("vue-loader");

module.exports = {
  transpileDependencies: [
    'vuetify'
  ],
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.js$/,
          loader: require.resolve('@open-wc/webpack-import-meta-loader'),
        }
      ]
    }
  }
}