nuxt / icon

The <Icon> component, supporting Iconify, Emojis and custom components.
https://stackblitz.com/edit/nuxt-icon-playground?file=app.vue
MIT License
864 stars 37 forks source link

[BUG] Deprecation Warning on Nuxt.js build due to package.json export #140

Open danperks opened 4 months ago

danperks commented 4 months ago

When building my Nuxt.js project which uses this package, I get a bunch of deprecation warnings, following this format:

(node:2848) [DEP0166] DeprecationWarning: Use of deprecated double slash resolving ".//index.json" for module request ".//index.json" matched to "./*" in the "exports" field module resolution of the package at [PROJECT PATH]\node_modules\@iconify\vue\package.json imported from [PROJECT PATH]\node_modules\nitropack\node_modules\_index.js.
(node:2848) [DEP0166] DeprecationWarning: Use of deprecated double slash resolving ".//index.mjs" for module request ".//index.mjs" matched to "./*" in the "exports" field module resolution of the package at [PROJECT PATH]\node_modules\@iconify\vue\package.json imported from [PROJECT PATH]\node_modules\nitropack\node_modules.
(node:2848) [DEP0166] DeprecationWarning: Use of deprecated double slash resolving ".//index.cjs" for module request ".//index.cjs" matched to "./*" in the "exports" field module resolution of the package at [PROJECT PATH]\node_modules\@iconify\vue\package.json imported from [PROJECT PATH]\node_modules\nitropack\node_modules.
(node:2848) [DEP0166] DeprecationWarning: Use of deprecated double slash resolving ".//index.js" for module request ".//index.js" matched to "./*" in the "exports" field module resolution of the package at [PROJECT PATH]\node_modules\@iconify\vue\package.json imported from [PROJECT PATH]\node_modules\nitropack\node_modules.
(node:2848) [DEP0166] DeprecationWarning: Use of deprecated double slash resolving ".//index.json" for module request ".//index.json" matched to "./*" in the "exports" field module resolution of the package at [PROJECT PATH]\node_modules\@iconify\vue\package.json imported from [PROJECT PATH]\node_modules\nitropack\node_modules.
(node:2848) [DEP0166] DeprecationWarning: Use of deprecated double slash resolving ".//index.mjs" for module request ".//index.mjs" matched to "./*" in the "exports" field module resolution of the package at [PROJECT PATH]\node_modules\@iconify\vue\package.json imported from [PROJECT PATH]\node_modules.
(node:2848) [DEP0166] DeprecationWarning: Use of deprecated double slash resolving ".//index.cjs" for module request ".//index.cjs" matched to "./*" in the "exports" field module resolution of the package at [PROJECT PATH]\node_modules\@iconify\vue\package.json imported from [PROJECT PATH]\node_modules.
(node:2848) [DEP0166] DeprecationWarning: Use of deprecated double slash resolving ".//index.js" for module request ".//index.js" matched to "./*" in the "exports" field module resolution of the package at [PROJECT PATH]\node_modules\@iconify\vue\package.json imported from [PROJECT PATH]\node_modules.
(node:2848) [DEP0166] DeprecationWarning: Use of deprecated double slash resolving ".//index.json" for module request ".//index.json" matched to "./*" in the "exports" field module resolution of the package at [PROJECT PATH]\node_modules\@iconify\vue\package.json imported from [PROJECT PATH]\node_modules.
(node:2848) [DEP0166] DeprecationWarning: Use of deprecated double slash resolving ".//index.mjs" for module request ".//index.mjs" matched to "./*" in the "exports" field module resolution of the package at [PROJECT PATH]\node_modules\@iconify\vue\package.json imported from [PROJECT PATH]\node_modules\nuxt\node_modules.

This looks to be referring to this line in the Iconify package.json:

https://github.com/iconify/iconify/blob/a8e3b45ecd56e194fd8ef2c3b4eeb6f8c4e68bb1/components/vue/package.json#L27

Have I got a configuration issue, or is this a bug in this library or the Iconify one? Haven't found any previous reports of this, so this could just be an issue with my project.

I'm on Node v18.17.0, Nuxt v3.8.0 and NuxtIcon v0.6.1 Thanks :)

hmingv commented 4 months ago

I have the same problem

Node v20.1 Nuxt V3.10.2 Nuxt-Icon v0.6.8

image

This looks to be referring to this line in the Iconify package.json:

https://github.com/iconify/iconify/blob/a8e3b45ecd56e194fd8ef2c3b4eeb6f8c4e68bb1/components/vue/package.json#L27

I tried removing the line specified in the above link and the error disappeared.

I'm executing pnpm build

cyberalien commented 4 months ago

I've seen this issue in another project after recent update when import path ends with /

Maybe there is import somewhere in code that ends with /, like tries to import from @iconify/vue/? I can't find such code.

hmingv commented 4 months ago

Since I couldn't determine the source of the problem, I used the stupidest way to test (deleting files one by one, you need to delete node_modules at the same time and repackage)

When I encountered the .npmrc file, I removed the shamefully-hoist=true line and the problem was solved.

I'm not sure if there's any connection, but it does solve my problem for now

KarelVendla commented 4 months ago

I also have this in my project

Running node 20.11.0 nuxt 3.8.2 nuxt-icon 0.6.8

ausir0726 commented 3 months ago

After my investigation, nuxt starter will write a .npmrc file before September 2023 that includes shamefull-hoist=true. This will cause an issue when running pnpm build. However, this file has been removed as of September 2023. Therefore, if the project was created before, it may still have this file.

No longer see this warning after manually removing the file.

Reference https://github.com/nuxt/starter/commit/9afba5de755de04965938027a3321a4980b31404

@hmingv Thank you for your helpful response, it saved me from being stuck here like you.

lx-elephantxiang commented 2 months ago

@hmingv I removed the shamefully-hoist=true line and the problem still exists;

Kram-V commented 2 months ago

Are you encountering guys right after you push ur updates in production, the nuxt application will be delayed for a bit of seconds in every page that I navigate? when I already went there on every page, it will become normal navigation again, there's no delay. Is there any connections about this warning or issue of @iconify/vue/ ? btw I deployed my nuxt app using npm run build for ssr in vercel. TIA

kleinpetr commented 2 months ago

same here, after upgrading Nuxt from 3.9.3 to 3.11.2

image

Kram-V commented 2 months ago

@kleinpetr can we downgrade the nuxt app?

kleinpetr commented 2 months ago

@Kram-V yes, when I downgrade to 3.9.3 the build has no issue

Kram-V commented 2 months ago

@kleinpetr ok tnx

kleinpetr commented 2 months ago

@Kram-V oh sorry, it seems that I am getting these warning also with locked 3.9.3 :thinking: so in my case it's because I removed pnpm.lock after a while, so some deps was cached probably, so cannot specifically...

cyberalien commented 2 months ago

@Kram-V oh sorry, it seems that I am getting these warning also with locked 3.9.3 🤔 so in my case it's because I removed pnpm.lock after a while, so some deps was cached probably, so cannot specifically...

Try running pnpm dedupe

Kram-V commented 2 months ago

btw @kleinpetr how can you downgrade ur nuxt app with specific version?

Kram-V commented 2 months ago

@kleinpetr I removed the node_modules and package-lock.json and change the version of my nuxt app into ^3.9.3 but when I npm run dev the pop up in the terminal still Nuxt 3.11.2 why is that?

cyberalien commented 2 months ago

Remove ^ from version number

Kram-V commented 2 months ago

@cyberalien ok sir I will try

Kram-V commented 2 months ago

@cyberalien it worked, thank you so much sir!

onurusluca commented 2 months ago

Same here. Don't know when this started as I don't watch the whole build process.

These didn't work:


Sharing my info just in case it helps with the debugging.

node: v20.11.1 pnpm: 8.15.4

Errors(getting like 500 errors like this on pnpm build, not just for iconify but for almost all the packages):

(node:20280) [DEP0166] DeprecationWarning: Use of deprecated double slash resolving ".//index.json" for module request ".//index.json" matched to "./*" in the "exports" field module resolution of the package at C:\CODING STUFF\PROJECTS\bulut-search\frontend\node_modules\@iconify\vue\package.json imported from C:\CODING STUFF\PROJECTS\bul-search\frontend\node_modules\.pnpm\nitropack@2.9.6\node_modules\_index.js.
(node:20280) [DEP0166] DeprecationWarning: Use of deprecated double slash resolving ".//index.mjs" for module request ".//index.mjs" matched to "./*" in the "exports" field module resolution of the package at C:\CODING STUFF\PROJECTS\bulut-search\frontend\node_modules\@iconify\vue\package.json imported from C:\CODING STUFF\PROJECTS\bul-search\frontend\node_modules\.pnpm\nitropack@2.9.6\node_modules.
(node:20280) [DEP0166] DeprecationWarning: Use of deprecated double slash resolving ".//index.cjs" for module request ".//index.cjs" matched to "./*" in the "exports" field module resolution of the package at C:\CODING STUFF\PROJECTS\bulut-search\frontend\node_modules\@iconify\vue\package.json imported from C:\CODING STUFF\PROJECTS\bul-search\frontend\node_modules\.pnpm\nitropack@2.9.6\node_modules.

package.json:

  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  },
  "dependencies": {
    "@nuxt/eslint": "^0.3.10",
    "@nuxt/image": "^1.6.0",
    "@pinia/nuxt": "^0.5.1",
    "@radix-icons/vue": "^1.0.0",
    "@unovis/ts": "^1.4.0",
    "@unovis/vue": "^1.4.0",
    "@vee-validate/zod": "^4.12.6",
    "@vueuse/core": "^10.9.0",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "embla-carousel": "^8.0.2",
    "embla-carousel-vue": "^8.0.2",
    "nuxt": "^3.11.2",
    "radix-vue": "^1.7.3",
    "tailwind-merge": "^2.3.0",
    "tailwindcss-animate": "^1.0.7",
    "v-calendar": "^3.1.2",
    "vaul-vue": "^0.1.0",
    "vee-validate": "^4.12.6",
    "vue": "^3.4.26",
    "vue-router": "^4.3.2",
    "vue-sonner": "^1.1.2",
    "vue-virtual-scroller": "2.0.0-beta.8",
    "zod": "^3.23.5"
  },
  "devDependencies": {
    "@nuxtjs/color-mode": "^3.4.1",
    "@nuxtjs/google-fonts": "^3.2.0",
    "@nuxtjs/i18n": "^8.3.1",
    "@nuxtjs/supabase": "^1.2.1",
    "@nuxtjs/tailwindcss": "^6.12.0",
    "nuxt-icon": "^0.6.10",
    "shadcn-nuxt": "^0.10.4",
    "typescript": "^5.4.5"
  }