vuejs中如何解析esm模块

Question

更新包后，我的 vue 项目遇到以下错误：

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'

老实说，我已经尝试了很多在互联网上找到的建议，但似乎没有任何解决办法。

我的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"
  }
}

我的 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"
  ]
}

我的vue.config.js

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

我的babel.config.js

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

有人知道如何解决这个问题吗？据我从错误中了解到，我的 webpack 无法解析模块中的 js 文件。但是webpack默认不支持js文件吗？

我的理解是，我需要以某种方式在 vue.config.js 中指定我正在使用 esm 模块，以及如何加载和解析它们。

任何想法将不胜感激！

Answer 1

这似乎是 webpack 4 和旧版本的已知问题（我认为它已在版本 5 中修复）。

基本上为了 webpack 能够解析有问题的文件，它需要额外的包： https://www.npmjs.com/package/@open-wc/webpack-import-meta-loader

安装包后，我通过 vue.config.js 文件将其包含在我的 vue webpack 配置中，如下所示：

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

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

Answer 2

在我的案例中，@themartto 提出的解决方案无效。
我必须设置 vue.config.js

{
    transpileDependencies: [
        'affected-dependency'
    ],
    chainWebpack (config)
    {
        config.module
            .rule('js')
            .test(/\.js$/)
            .use('@open-wc/webpack-import-meta-loader')
            .loader('@open-wc/webpack-import-meta-loader');
    }
}

vuejs中如何解析esm模块

How to parse esm module in vuejs

javascript

webpack

vue.js