nuxt / icon

The <Icon> component, supporting Iconify, Emojis and custom components.

Home Page:https://stackblitz.com/edit/nuxt-icon-playground?file=app.vue

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

danperks opened this issue · comments

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 :)

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

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.

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

I also have this in my project

Running
node 20.11.0
nuxt 3.8.2
nuxt-icon 0.6.8

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
nuxt/starter@9afba5d

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

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

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

same here, after upgrading Nuxt from 3.9.3 to 3.11.2

image

@kleinpetr can we downgrade the nuxt app?

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

@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...

@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

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

@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?

Remove ^ from version number

@cyberalien ok sir I will try

@cyberalien it worked, thank you so much sir!

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

These didn't work:

  • Deleting node_modules and lock file and .nuxt
  • Downgrading to nuxt 3.9.3
  • Removing shamefully-hoist=true
  • Using npm or yarn

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"
  }