Webpack error stating no appropriate loaders

[reemhamz]

Hey there! I currently use Phosphor Icons for my Nuxt.js website, however I've been receiving this error when trying to load my site:

 ERROR  in ./node_modules/phosphor-vue/dist/phosphor-vue.esm.js                                                                       friendly-errors 12:24:55

Module parse failed: Unexpected token (40:21)                                                                                         friendly-errors 12:24:55
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
|         contextWeight
|       } = this;
>       return weight ?? contextWeight;
|     },
| 

It's failing to compile. I've tried uninstalling and re-installing using npm install --save phosphor-vue. I've also tried looking for a solution online, and can't seem to find anything that could point me in the right direction. Curious if anyone else has experienced this, and knows how to solve it? It's quite cumbersome.

[ChrizzDF]

I have the same issue right now that I didn't have before!

[reemhamz]

@ChrizzDF I honestly couldn't figure it out for the life of me. I tried to delete the node_modules folder and ran npm install, npm update, etc thinking it just needed an update. I ended up having to remove phosphor-vue entirely from my codebase and just used an alternative icon library. Very disappointing, I really like their work, but sad that nobody from there has responded/seen this open issue :/

[acabreragnz]

@ChrizzDF @reemhamz

Version 1.4.0 is working :)

[LuizPelegrini]

@acabreragnz I am facing the same issue above on version 1.4.0 or 1.4.2. I'm running it in a Nuxt static app

[ChrizzDF]

@LuizPelegrini I'm using a fork and it's working fine for me :) "@dnlsndr/vue-phosphor-icons": "^1.16.2"

[dnlsndr]

Hi there, since I've started working on the mainline library again, we'll soon be deploying a major rework of it. You can install a preview by running npm install @phosphor-icons/vue@next which is based on my @dnlsndr/vue-phosphor-icons fork.

Note that it's still in alpha and is bound to change, feel free to open any issues you encounter using the alpha library.

This solution is for vue 3.

[edbond88]

What shall we do if we use Vue 2?

[acabreragnz]

@edbond88 we are using Vue 2, generated with vue-cli, as I mentioned before the version 1.4.0 works for us:

Here our package-lock.json

    "node_modules/phosphor-vue": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/phosphor-vue/-/phosphor-vue-1.4.0.tgz",
      "integrity": "sha512-5Oti/zfezP3LRfciZmzovd2+ih5VWEnLFI+3K0ZG4NVkAqwdkx4B3vJzCYGpHMNZG5+c+xW3eB4gf3H7hBiR1Q==",
      "engines": {
        "node": ">=10"
      },
      "peerDependencies": {
        "vue": "^2.6.11"
      }
    },

[dnlsndr]

@edbond88 You can just simply remain on version 1.4.x . Version 2.x.x only works with vue3. As long as you don't update the library from "phosphor-vue" to "@phosphor-icons/vue" you should be fine. We've delberately chosen to use a different package name, so that accidental updates won't break your app.