[DEP0166] DeprecationWarning

[ojvribeiro]

I started receiving this warning when I updated to latest Vue and Nuxt versions:

(node:21672) [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:\Users\[...]\Documents\Projects\[...]\node_modules\@iconify\vue\package.json imported from C:\Users\[...]\Documents\Projects\[...]\node_modules\nitropack\node_modules.

I'm not sure if it is a @iconify/vue thing.

[cyberalien]

Yes, I've seen similar issues related to import ending in / in Nuxt after updating dependencies.

In my case it was fixed by removing / from import, so replaced import { stuff } from 'package/src/' with import { stuff } from 'package/src'.

Maybe you have an import that ends with /?

[cyberalien]

Also, for Nuxt I recommend using iconify-icon package, not @iconify/vue. See https://iconify.design/docs/iconify-icon/#ssr

[ojvribeiro]

Also, for Nuxt I recommend using iconify-icon package, not @iconify/vue. See https://iconify.design/docs/iconify-icon/#ssr

Oh, I didn't know about this one. Thank you very much.

[KarelVendla]

When running e2e tests I always got this error.
I moved away from iconify/vue (the nuxt-icon package) to iconify-icon.

I import it via the min.js in the nuxt.config.ts

  vue: {
    compilerOptions: {
      isCustomElement: (tag) => tag === "iconify-icon",
    },
  },
  app: {
    head: {
      script: [
        {
          src: "https://code.iconify.design/iconify-icon/2.0.0/iconify-icon.min.js",
          key: "iconify-icon",
        },
      ],
    },
  },

The errors are gone. thank you @cyberalien for the recommendation.

[ojvribeiro]

@KarelVendla yeah, it seems the iconify-icon package is throwing the same warning on build. It seems I'll have to stick to the CDN for now.

[cyberalien]

l

Are you using it as part of nuxt icon package or separately?

[ojvribeiro]

@cyberalien basically, I created a custom component which uses iconify-icon behind the scenes. I just tried to import it in the component like this:

<script setup lang="ts">
  import 'iconify-icon' // this causes build warnings
</script>

<template>
  <iconify-icon icon="..." />
</template>

This snippet is a simplified version of the actual code.

[cyberalien]

Very strange. I'm importing it like that in Vue project too, no issues.

Can you post versions of vite, node and whatever package manager are you using?

[ojvribeiro]

Yeah, of course! This is the info generated by nuxt info:

------------------------------
- Operating System: Windows_NT
- Node Version:     v18.19.0
- Nuxt Version:     3.9.3
- CLI Version:      3.8.4
- Nitro Version:    2.8.1
- Package Manager:  [email protected]
- Builder:          -
- User Config:      extends, modules, imports, routeRules, app, googleFonts, tailwindcss, devtools
- Runtime Modules:  [email protected], @vee-validate/[email protected], @nuxtjs/[email protected], [email protected]
- Build Modules:    -
------------------------------

It is important to note that the warning only shows on build, not dev. It happens to @vueuse/core as well.

[cyberalien]

I've seen reports that removing shamefully-hoist=true from .npmrc fixes that.