如何在 vuejs 中解析 esm 模块答案

【问题标题】：How to parse esm module in vuejs如何在 vuejs 中解析 esm 模块
【发布时间】：2022-01-12 08:11:08
【问题描述】：

包更新后我的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 模块，以及如何加载和解析它们。

任何想法将不胜感激！

【问题讨论】：

我猜这就是当您尝试使用专为 Node 设计的包到前端应用程序时会发生的情况。如果您认为此包中的任何内容都不是特定于 Node 的，您可以尝试将所有 @polkadot 包添加到 Vue 的 transpileDependencies
不幸的是，这并没有帮助，可悲的是，来自@polkadot 的男孩已经在他们的上一个版本中更新了有问题的路径，但我不能使用没有这个问题的旧版本，因为与我们的后端不兼容，我想我会在他们的 github repo 上打开问题。谢谢你的建议！

标签： javascript vue.js webpack

【解决方案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'),
        }
      ]
    }
  }
}

【讨论】：

【解决方案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');
    }
}

【讨论】：