Expose explicit imports for nuxt-auth

[lmiller1990]

Environment

------------------------------
- Operating System: Darwin
- Node Version:     v18.17.1
- Nuxt Version:     3.7.0
- CLI Version:      3.7.3
- Nitro Version:    2.6.2
- Package Manager:  npm@9.6.7
- Builder:          -
- User Config:      modules, auth, dayjs, i18n, headlessui, tailwindcss, nitro, app, devServer, runtimeConfig, imports
- Runtime Modules:  @pinia/nuxt@0.4.11, @nuxtjs/tailwindcss@6.8.0, @nuxt/image-edge@1.0.0-rc.1-28224985.8423773, @nuxtjs/google-fonts@3.0.2, @nathanchase/nuxt-dayjs-module@1.0.15, nuxt-icon@0.5.0, nuxt-headlessui@1.1.4, nuxt-lodash@2.5.0, @nuxtjs/i18n@8.0.0-rc.4, @sidebase/nuxt-auth@0.6.0-beta.5
- Build Modules:    -
------------------------------

Reproduction

I just tried a basic Nuxt project and added the latest version of Sidebase, the 0.6 beta.

Describe the bug

I am getting

[plugin:vite:import-analysis] Missing "./dist/runtime/composables/authjs/useAuth" specifier in "@sidebase/nuxt-auth" package

When I try to import

import { useAuth } from "@sidebase/nuxt-auth/dist/runtime/composables/authjs/useAuth"

I have tried with type: module and using .mjs, too. I have turned off auto imports in my Nuxt config.

Additional context

I think the issue is we don't expose the exports in package.json. I tried fixing it:

"exports": {
    ".": {
      "import": "./dist/module.mjs",
      "require": "./dist/module.cjs"
    },
    "./useAuth": {
      "import": "./dist/runtime/composables/authjs/useAuth.mjs",
      "require": "./dist/runtime/composables/authjs/useAuth.mjs"
    }

But now I get

✘ [ERROR] Could not resolve "#app"

    node_modules/@sidebase/nuxt-auth/dist/runtime/composables/authjs/useAuth.mjs:4:29:
      4 │ import { callWithNuxt } from "#app";
        ╵                              ~~~~~~

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

✘ [ERROR] Could not resolve "#imports"

    node_modules/@sidebase/nuxt-auth/dist/runtime/composables/authjs/useAuth.mjs:10:91:
      10 │ ...eRuntimeConfig, useRequestHeaders, useAuthState } from "#imports";
         ╵                                                           ~~~~~~~~~~

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

✘ [ERROR] Could not resolve "#app"

    node_modules/@sidebase/nuxt-auth/dist/runtime/utils/callWithNuxt.mjs:1:29:
      1 │ import { callWithNuxt } from "#app";
        ╵                              ~~~~~~

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

✘ [ERROR] Could not resolve "#app"

    node_modules/@sidebase/nuxt-auth/dist/runtime/utils/fetch.mjs:1:29:
      1 │ import { callWithNuxt } from "#app";
        ╵                              ~~~~~~

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

✘ [ERROR] Could not resolve "#app"

    node_modules/@sidebase/nuxt-auth/dist/runtime/utils/url.mjs:4:44:
      4 │ import { useRequestEvent, useNuxtApp } from "#app";
        ╵                                             ~~~~~~

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

✘ [ERROR] Could not resolve "#imports"

    node_modules/@sidebase/nuxt-auth/dist/runtime/utils/url.mjs:5:29:
      5 │ import { useAuthState } from "#imports";
        ╵                              ~~~~~~~~~~

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

 ERROR  error while updating dependencies:                          8:45:17 am
Error: Build failed with 6 errors:
node_modules/@sidebase/nuxt-auth/dist/runtime/composables/authjs/useAuth.mjs:4:29: ERROR: Could not resolve "#app"
node_modules/@sidebase/nuxt-auth/dist/runtime/composables/authjs/useAuth.mjs:10:91: ERROR: Could not resolve "#imports"
node_modules/@sidebase/nuxt-auth/dist/runtime/utils/callWithNuxt.mjs:1:29: ERROR: Could not resolve "#app"
node_modules/@sidebase/nuxt-auth/dist/runtime/utils/fetch.mjs:1:29: ERROR: Could not resolve "#app"
node_modules/@sidebase/nuxt-auth/dist/runtime/utils/url.mjs:4:44: ERROR: Could not resolve "#app"
...

Since, of course, the module resolution does not know about #imports.

Any interest in making this work without the Nuxt magic imports?

Logs

No response

[marijani101]

Getting the same issue. @lmiller1990 have u found any workaround ?

[lmiller1990]

There is no work around, a patch will need to be submitted to directly expose the exports. The module uses Nuxt things like #imports, though, so the code would need to be updated to not use any of those if this library is to work in projects with autoImports: false.

@BracketJohn @zoey-kaiser is this a PR that would be accepted? Basically:

1. do not use #imports or any Nuxt specific module resolution in the source code
2. expose some top level exports via package.json > exports.

[zoey-kaiser]

@lmiller1990, may I ask in which use-case you disable the autoimports? This is primarily, so I can estimate the priority of restructuring the exports/imports!

[lmiller1990]

I onboard a lot of developers coming from React/Next, and having explicit imports makes it much easier. With all the auto injection magic Nuxt encourages, it's incredibly difficult to know where things are coming from, especially for developers new to Nuxt.

The IDE doesn't work as well (I can't just use "Go to definition" on globals, it doesn't know where to look). I also find it hard to remember how/where/what is automatically injected.

These are my main pain points with global injection. Most of the other modules I'm using can be imported manually, but not Sidebase/Nuxt Auth.

[zoey-kaiser]

Hi @lmiller1990,

I totally understand this. I will put this on the roadmap, however I don't think, I will include this for the 0.6.0 release just yet, as exposing these functions may change how the automatic imports work. I think including this in the 0.7.0 release is definitely possible!

As to your code editor: We have a few nice setup guides here: https://sidebase.io/sidebase/resources/coding-setup that show you how you can configure VSCode to work nicely with all the automatic imports from Nuxt 3, as I know the pain myself. Some code editors like Webstorm, sadly have pretty bad support for Nuxt 3, so I would not recommend using them for now! I hope this may be able to help you!

[lmiller1990]

Thanks for the link. I tried following that - I'm not using TS, just JS - still no luck, even with VS Code.

Anyway, that's an unrelated problem to the issue, I'll look into this on my own. Thanks!