phosphor-icons / vue Goto Github PK

📚 What are you trying to do?

import { PhCircle,PhTextAa,PhEyeSlash } from "@phosphor-icons/vue";

this line makes me below error. Does not understand what is issue. I have other appas well and all working fine.

Module not found: Error: Default condition should be last one

ERROR in ./src/Student/components/CustomElements/PIcons.vue?vue&type=script&setup=true&lang=js (./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/Student/components/CustomElements/PIcons.vue?vue&type=script&setup=true&lang=js) 3:0-2137
Module not found: Error: Default condition should be last one
 @ ./src/Student/components/CustomElements/PIcons.vue?vue&type=script&setup=true&lang=js 1:0-221 1:0-221 1:222-432 1:222-432
 @ ./src/Student/components/CustomElements/PIcons.vue 2:0-68 3:0-63 3:0-63 6:49-55
 @ ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/Student/StudentData.vue?vue&type=script&setup=true&lang=js 8:0-60 106:14-20
 @ ./src/Student/StudentData.vue?vue&type=script&setup=true&lang=js 1:0-214 1:0-214 1:215-418 1:215-418
 @ ./src/Student/StudentData.vue 2:0-73 3:0-68 3:0-68 6:49-55
 @ ./src/router/routes.js 265:15-51
 @ ./src/main.js 12:0-40 113:8-14

🔍 What have you tried?

Tryed reeinstall phosphor with npm , other versions start again and so on. I came from vue 2 to vue 3 and this problem comes.

ℹ️ Additional context

No response

i am only loading the following

import {
  PhLockKeyOpen,
  PhUser,
  PhSun,
  PhMoon,
  PhPlayCircle,
  PhImage,
} from 'phosphor-vue'

import Vue from 'vue'

Vue.component('PhLockKeyOpen', PhLockKeyOpen)
Vue.component('PhUser', PhUser)
Vue.component('PhSun', PhSun)
Vue.component('PhMoon', PhMoon)
Vue.component('PhPlay', PhPlayCircle)
Vue.component('PhImage', PhImage)

the build result creates big javascript file

DESCRIPTION

Hi, I just wanted to use phosphor vue for my quasar vue application.
But when I run npm install --save phosphor-vue@next, it gets an error like below.
Does anyone know why? Is it because it doesn't support quasar vue or what? Thankyou.

ERROR LOG

$ npm install phosphor-vue@next
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/vue
npm ERR! peer vue@"^3.2.29" from @quasar/[email protected]
npm ERR! node_modules/@quasar/app
npm ERR! dev @quasar/app@"^3.0.0" from the root project
npm ERR! peer vue@"3.2.37" from @vue/[email protected]
npm ERR! node_modules/@vue/server-renderer
npm ERR! @vue/server-renderer@"3.2.37" from [email protected]
npm ERR! 9 more (emoji-mart-vue-fast, v-money3, vue-gtag, vue-i18n, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! phosphor-vue@"4.4.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/vue
npm ERR! peer vue@"^3.0.0 <3.0.3" from [email protected]
npm ERR! node_modules/phosphor-vue
npm ERR! phosphor-vue@"4.4.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\ASUS\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\ASUS\AppData\Local\npm-cache_logs\2022-07-15T02_44_38_791Z-debug-0.log

The src/lib folder not cloning when I run npm install. So I could not build project

Hello,

we've got some type errors while importing single icons in vue/nuxt with typescript.
The import looks like this:

<script lang="ts">
import { PhXCircle, PhCalendarBlank, PhClock } from 'phosphor-vue'

And the error in VS Code is:

Module '"phosphor-vue"' has no exported member 'PhXCircle'. Did you mean to use 'import PhXCircle from "phosphor-vue"' instead?ts(2614)

But the result works, with this error?

I found this import statement which i never saw like this before.
https://github.com/phosphor-icons/phosphor-vue/blob/4f28cd2e29ca8350b7a0283e241dac5546a8c631/phosphor-vue.d.ts#L3
I guess what i should do, is to pass the exported components from index.ts through the phoshor.d.ts, but this seems not to be valid in TypeScript.

I am trying to use phosphor-vue in a project that is set up with vitejs.

I tried to

//vite.config.js
optimizeDeps: {
    exclude: ['dayjs', 'phosphor-vue']
  }

But I am still getting this.

Uncaught SyntaxError: The requested module '/@modules/vue.js' does not provide an export named 'default'

procedure I followed.

npm init vite-app myapp

npm install phosphor-vue

In my template

//app.vue
<template>
  <div>
    <PhHorse />
    <PhHeart :size="32" color="hotpink" weight="fill" />
    <PhCube />
  </div>
</template>

<script>
  import { PhHorse, PhHeart, PhCube } from "phosphor-vue";
  export default {
    name: "App",
    components: {
      PhHorse,
      PhHeart,
      PhCube
    }
  };
</script>

🐛 The bug

With the previous version phosphor-vue, global import was possible using

import { createApp } from 'vue'
import PhosphorVue from 'phosphor-vue'

const app = createApp(App)
app
  .use(PhosphorVue)

app.mount('#app')

With the new version, this is not possible anymore.

🛠️ To reproduce

https://stackblitz.com/edit/vue-dniokx?file=src/main.js

🌈 Expected behaviour

that switching to the new package works straightforward (just like written in the README.md)

ℹ️ Additional context

No response

🐛 The bug

When I deploy my Nuxt 3 app which uses the @phosphor-icons/vue package to Netlify, the deployment is successful but when I visit the site, initially, I get an error:

After some time, when I revisit the site, I get this error:

It works okay in development and I've also tried building the app locally, Nuxt uses the "node-server" option and that works fine.

🛠️ To reproduce

https://stackblitz.com/edit/nuxt-starter-tfqdxc?file=app.vue

🌈 Expected behaviour

The Icons should be displayed in production when deployed to Netlify and not crash the entire app.

ℹ️ Additional context

No response

Hi, I'd like to ensure a PhosphorIcon is being passed as a prop, but unfortunately this type isn't exported by phosphor-vue.

What I'd like to do is this:

const props = defineProps<{
  label: string;
  icon: PhosphorIcon;
}>();

And then render with something like this:

    <component
      :is="icon"
      :size="20"
      :width="20"
      :weight="isActive ? 'fill' : 'regular'"
    />

Would exporting the PhosphorIcon type make sense?

Hello! Thank you for the nice icons.

I have switched to npm 7 and it installs peer dependencies by default. So when I updated Vue to 3.0.11 I got a conflict with phosphor-vue's peer dependencies:

  "peerDependencies": {
    "vue": "^3.0.0 <3.0.3"
  },

Could you, please, change it to ^3.0.0 and make a new patch release?
Right now I can run npm install only with --legacy-peer-deps (when there is no package-lock.json).

Don't know where the other issue went, so I'll create a new one to keep track of this.

It seems that with the current configuration of Rollup, it's not possible to tree shake unused icons when using this library with other bundlers such as Webpack.

We want to save the icon names as strings in our db, then use them via a name option, this is not currently possible via importing each icon seperatly.

E.g.

Is this something that could be implemented?

When I try to use phosphor-vue with @vue/cli-service I get the error Cannot find module @/lib/types. To avoid that error, I had to copy the file phosphor-vue/src/lib/types.ts locally. Because in @vue/cli-service the alias @ only points to the local directory src

I'm using a custom component to render all my icons:

<template>
  <component :is="name" :weight="weight" />
</template>

<script lang="ts">
import { defineComponent } from 'vue'

import {
  PhCaretUp as Up,
} from 'phosphor-vue'

export default defineComponent({
  name: 'Icon',
  props: {
    name: { type: String, required: true },
    weight: { default: 'regular' },
  },
  components: {
    Up,
  },
})
</script>

It's all fine in development, but the production bundle ignores all icons. I've just switched from another icon pack that does not cause this (but the bundle size is huge) and right now this problem is pretty annoying.

I've also tried registering the global component in main.ts, to no avail.

Any suggestions are welcome.

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.

🐛 The bug

Compact bundle significantly increases the build time. That being said, the import cost for the bundle is 3.8M:

As mentioned in v2.1.4 changelog compact scope bundles all files in a single file aiming to fix the EMFILE error.

Is there any other way of avoiding Error: EMFILE: too many open files... error as in #35 besides using compact scope?

🛠️ To reproduce

🌈 Expected behaviour

A proposed solution would be exporting per-file icons as in:

import PhHouse from "@phosphor-icons/vue/icons/PhHouse.vue"

ℹ️ Additional context

No response