How to fix Nuxt 3 Module: Could not resolve "#app"

Question

I've been attempting to create a module to separate my components and composables, ready to use in a different project, but am having difficulty with some of the composables.

The module was built following the Module Author Guide from the nuxt site. I have the following within the module.ts file:

nuxt.hook('imports:dirs', (dirs) => {
  dirs.push(resolve('./runtime/composables'))
})

and one of the composables causing the problem:

import { useNuxtApp } from '#app'

export type FadeDoneFunction = () => void

/**
 * Fade an element.
 *
 * @param {HTMLElement} el
 * @param {FadeDoneFunction} done
 * @param {number} start
 * @param {number} end
 * @param {number} duration
 * @param {number} delay
 * @return {void}
 */
export function fade (el: HTMLElement, done: FadeDoneFunction, start = 0, end = 1, duration = 500, delay = 0) {
    const { $velocity } = useNuxtApp()

    $velocity(el, {
        opacity: [end, start]
    }, {
        delay,
        duration,
        complete: () => { done() }
    })
}

If I remove the import at the top it doesn't work at all (although the site will at least load); but including it causes the following server console error (and the site doesn't load at all):

✘ [ERROR] Could not resolve "#app"

    node_modules/@archwardens/chimera/dist/runtime/composables/transitions/fade.mjs:1:27:
      1 │ import { useNuxtApp } from "#app";
        ╵                            ~~~~~~

  You can mark the path "#app" as external to exclude it from the bundle, which will remove this
  error.

 ERROR  5:32:15 PM [vite] error while updating dependencies:                                                                        17:32:15
Error: Build failed with 2 errors:
node_modules/@archwardens/chimera/dist/runtime/composables/transitions/fade.mjs:1:27: ERROR: Could not resolve "#app"
    at failureErrorWithLog (/home/vagrant/archwardens/game/node_modules/esbuild/lib/main.js:1566:15)
    at /home/vagrant/archwardens/game/node_modules/esbuild/lib/main.js:1024:28
    at runOnEndCallbacks (/home/vagrant/archwardens/game/node_modules/esbuild/lib/main.js:1438:61)
    at buildResponseToResult (/home/vagrant/archwardens/game/node_modules/esbuild/lib/main.js:1022:7)
    at /home/vagrant/archwardens/game/node_modules/esbuild/lib/main.js:1134:14
    at responseCallbacks.<computed> (/home/vagrant/archwardens/game/node_modules/esbuild/lib/main.js:671:9)
    at handleIncomingPacket (/home/vagrant/archwardens/game/node_modules/esbuild/lib/main.js:726:9)
    at Socket.readFromStdout (/home/vagrant/archwardens/game/node_modules/esbuild/lib/main.js:647:7)
    at Socket.emit (node:events:527:28)
    at Socket.emit (node:domain:475:12)

Things I've tried:

• Including the import statement.
• Removing the import statement.
• Adding the following: nuxt.options.build.transpile.push(resolve("./runtime"));
• Import velocity in the composables gives window is not defined.

The most frustrating thing is this works locally. But as soon as I install from npm it breaks. Does anyone know how to fix this?

The full module repo is here: https://github.com/lumite-studios/archwardens-chimera

Answer 1

In case you still have the issue or someone encountering it comes here:

import { useNuxtApp } from '#imports'

should resolve the problem, hopefully.