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

Update: Changing: if(data.aliases?.[name2] !== void 0) to: if(data.aliases != null && data.aliases[name2] !== void 0) in the iconify .mjs file fixes the error, however this check occurs a lot of places, and is not viable. Any idea why I cant parse this type of null operator?

in ./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

My code:

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

Iconify version:

"@iconify/vue": "^3.2.0"

using standard vue cli babel:

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

I have tried: in babel.config.js

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

  return config;
}

same error

I tried to remove the .mjs file, forcing it to use regular .js file, this resulted in same error but with missing .js loader.

I have tried to use Iconify SVG framework but i get the same type of error where loader is missing for .js files.

Thanks for any feedback :)

Solution: Downgrading to this version of Iconify "@iconify/vue": "^3.1.1" fixed the problem. This resulted however in a error regarding type declaration. This was fixed by changing VS code's typescript version to: Use workspace version This is done by selecting a .ts file then pressing "shift+ctrl+p" and select the prompt of select typescript version.

vue.jsnpmwebpackbabel-loaderwebpack-loader


Solution 1:[1]

Solution: Downgrading to this version of Iconify "@iconify/vue": "^3.1.1" fixed the problem. This resulted however in a error regarding type declaration. This was fixed by changing VS code's typescript version to: Use workspace version This is done by selecting a .ts file then pressing "shift+ctrl+p" and select the prompt of select typescript version.

Solution 2:[2]

Having the same error cloning from the repository and install dependencies for Vue 2 https://github.com/iconify/iconify

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 GossipDolphin
Solution 2 Bruno Ferreira

Related Questions