Nuxt module issue when running prepack(nuxt-module-build) when exposing a composable that calls useFetch

[trc-mathieu]

Discussed in nuxt/nuxt#22328

^{Originally posted by trc-mathieu July 25, 2023}
I get a typescript error after running pnpm prepack. Here is a reproduction repo

Simply run pnpm i and then pnpm prepack.

Context

• I have one endpoint at /api/applications that returns a list of string.

• I have one composable useApplication the simply does this for now:

import {useFetch} from "#imports"

export default () =>{
   return useFetch('/api/applications')
}
// The type is properly inferred by intellisense and is
// default: () => AsyncData<string[] | null, FetchError<any> | null>

When running pnpm prepack, I get this error:

src/runtime/composables/use-application.ts(8,1): error TS2742: The inferred type of 'default' cannot be named without a reference to '.pnpm/[email protected]/node_modules/ofetch/dist/error-d5becc6e'. This is likely not portable. A type annotation is necessary.

Do I have to explicitly set the return type of the function that is using useFetch ? I feel that this is not convenient and I wonder if I am not doing something wrong or if it's missing something on nuxt side or an issue with nuxt-module-build.
I also saw that ofetch is no transpiled by default so I tried transpiling it but no success.

Any help would be appreciated!

ps. I also noticed that if I run pnpm dev:build and then pnpm prepack, the error is not present anymore but the useApplication return type is typed as any

[danielroe]

The issue here is that you have different versions of ofetch installed in your app, and is emitted as part of the build process. Check your lockfile and try deduping it.

[trc-mathieu]

Hey @danielroe, I only have one version of ofetch.
I also tried installing it as an explicit dependency as well but no success.

pnpm why ofetch 
devDependencies:
@nuxt/test-utils 3.6.5
└── ofetch 1.1.1
changelogen 0.5.3
└── ofetch 1.1.1
nuxt 3.6.5
├─┬ @nuxt/telemetry 2.3.2
│ └── ofetch 1.1.1
├─┬ nitropack 2.5.2
│ ├── ofetch 1.1.1
│ └─┬ unstorage 1.8.0
│   └── ofetch 1.1.1
└── ofetch 1.1.1

[danielroe]

Hm. This might be about the difficulty with emitting declarations that depend on complex inferred types of the kind we have for useFetch.

[martinrisseeuw]

We're currently running into the same issue, when building a wrapper composable around useFetch. When we import this into another composable we receive te same error. If someone has a workaround for the time being that would be great. Or maybe point us in the right direction how to solve the issue, so we can contribute.

[markglattback]

Our workaround was to add ofetch to compilerOptions.types:

tsconfig.json

{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "types": ["ofetch"]
  }
}

[MaxWeisen]

I am running into this issue when upgrading from Nuxt 3.5.1 to 3.10.1. I am able to successfully execute nuxt-module-build in 3.5.1.

When I add a return type of unknown to my function that wraps useFetch(), the build command succeeds but that is not ideal.

I tried @markglattback suggestion with no success. Any other ideas to get past this error?

[trc-mathieu]

@MaxWeisen
To fix this, be explicit in your return type, that's the only way I could make this work.
i.e.

import { useFetch } from 'nuxt/app'
import type { AsyncData } from 'nuxt/app'
import type { FetchError } from 'ofetch'
import type { YourType } from '../types'

function useFetchWrapper(): AsyncData<YourType[] | null, FetchError<any> | null> {
 return useFetch(...)
}
...

[MaxWeisen]

Hey @trc-mathieu I tried the method you used and it does not work.

The return type of useFetch() is AsyncData<PickFrom<T, KeysOf<T>> | null, FetchError<any> | null>
When I try to explicitly set the return type to AsyncData<YourType[] | null, FetchError<any> | null> I receive a type error.

This continues to make to wonder why this worked on Nuxt 3.5.1 but failed in the upgrade to 3.10.1

[trc-mathieu]

hum, that's odd. I'm also using nuxt 3.10.1. I could try if you have a small reproduction with your types.

[MaxWeisen]

@trc-mathieu I will work on a reproduction.

In the meantime, here is the error:

Type 'AsyncData<PickFrom<T, KeysOf<T>> | null, FetchError<any> | null>' is not assignable to type 'AsyncData<T | null, FetchError<any> | null>'.
  Type 'AsyncData<PickFrom<T, KeysOf<T>> | null, FetchError<any> | null>' is not assignable to type '_AsyncData<T | null, FetchError<any> | null>'.

[dvdmlln]

Ran into this issue after upgrading from nuxt 3.9.3 to 3.10.3.
Here is a reproduction, the error only occurs if the composable is added as an auto-import.

[trc-mathieu]

@dvdmlln I'm not too sure why but I can't seem to be able to run prepack on your repo. I always get this error

rc/module.ts(1,76): error TS2792: Cannot find module '@nuxt/kit'. Did you mean to set the 'moduleResolution' option to 'nodenext', or to add aliases to the 'paths' option?
src/module.ts(14,37): error TS1343: The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'es2022', 'esnext', 'system', 'node16', or 'nodenext'

[dvdmlln]

@dvdmlln I'm not too sure why but I can't seem to be able to run prepack on your repo. I always get this error

rc/module.ts(1,76): error TS2792: Cannot find module '@nuxt/kit'. Did you mean to set the 'moduleResolution' option to 'nodenext', or to add aliases to the 'paths' option?
src/module.ts(14,37): error TS1343: The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'es2022', 'esnext', 'system', 'node16', or 'nodenext'

Did you run npm run dev:prepare first?

[trc-mathieu]

@dvdmlln I'm not too sure why but I can't seem to be able to run prepack on your repo. I always get this error

rc/module.ts(1,76): error TS2792: Cannot find module '@nuxt/kit'. Did you mean to set the 'moduleResolution' option to 'nodenext', or to add aliases to the 'paths' option?
src/module.ts(14,37): error TS1343: The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'es2022', 'esnext', 'system', 'node16', or 'nodenext'

Did you run npm run dev:prepare first?

My bad. To make it work you need to type the return of get. Here's the revised version that works:

import { type FetchOptions } from "ofetch";
import { type NitroFetchRequest, type TypedInternalResponse } from "nitropack";

export function useUtil() {
  async function get<T = unknown>(
    request: NitroFetchRequest,
    options?: FetchOptions
  ): Promise<TypedInternalResponse<NitroFetchRequest, T, "get">> {
    return await $fetch<T>(request, {
      ...options,
      method: "GET",
    });
  }

  return { get };
}

[sandros94]

Also having this issue on nuxt-directus#242.

[danielroe]

Let's track in #141