无法从 Iconify 解析 .mjs 模块。使用组合 api 和打字稿的 Vue 3 cli

Question

更新：变化：if(data.aliases?.[name2] !== void 0) 至：if(data.aliases != null && data.aliases[name2] !== void 0) 在 iconify .mjs 文件中修复了错误，但是这种检查发生在很多地方，并且不可行。知道为什么我不能解析这种类型的 null 运算符吗？

在./node_modules/@iconify/vue/dist/iconify.mjs

Module parse failed: Unexpected token (99:21)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

我的代码：

<template>
  <div>
    <Icon icon="mdi-light:home" />
  </div>
</template>
<script setup lang="ts">
import { Icon } from "@iconify/vue";
</script>

图标化版本：

"@iconify/vue": "^3.2.0"

使用标准的 vue cli babel：

presets: ["@vue/cli-plugin-babel/preset"]

我试过：在babel.config.js

module.exports = function override(config) {
  config.module.rules.push({
    test: /\.mjs$/,
    include: /node_modules/,
    type: "javascript/auto"
  });

  return config;
}

同样的错误

我试图删除 .mjs 文件，强制它使用常规 .js 文件，这导致了同样的错误，但缺少 .js 加载程序。

我曾尝试使用 Iconify SVG 框架，但我遇到了相同类型的错误，即 .js 文件缺少加载程序。

感谢任何反馈:)

解决方法：降级到这个版本的 Iconify "@iconify/vue": "^3.1.1" 解决了这个问题。然而，这导致了有关类型声明的错误。这是通过将 VS 代码的打字稿版本更改为：Use workspace version 来解决的这是通过 selecting .ts 文件然后按“shift+ctrl+p”和 select select typescript version.

的提示来完成的

Answer 1

从存储库克隆并为 Vue 2 安装依赖项时出现相同的错误https://github.com/iconify/iconify

Answer 2

解决方法：降级到这个版本的 Iconify "@iconify/vue": "^3.1.1" 解决了这个问题。然而，这导致了有关类型声明的错误。这是通过将 VS 代码的打字稿版本更改为：Use workspace version 来解决的这是通过 selecting .ts 文件然后按“shift+ctrl+p”和 select select typescript version.

的提示来完成的

无法从 Iconify 解析 .mjs 模块。使用组合 api 和打字稿的 Vue 3 cli

Can't parse .mjs module from Iconify. Vue 3 cli using composition api and typescript

npm

webpack

vue.js

babel-loader

webpack-loader