Nuxt•2mo ago

How to use nitro types

I setuped a basic nuxt app witht the default folder structure, so the server folder contains a tsconfig.json with

{
  "extends": "../.nuxt/tsconfig.server.json"
}

{
  "extends": "../.nuxt/tsconfig.server.json"
}

I am using websockets for communication but there is a typescript error

// Cannot find name 'Peer'.ts(2304)
// Cannot find name 'Message'.ts(2304)
export default function onCreateGame(peer: Peer, message: Message) {
}

// Cannot find name 'Peer'.ts(2304)
// Cannot find name 'Message'.ts(2304)
export default function onCreateGame(peer: Peer, message: Message) {
}

Where should I import them from?

7 Replies

kapa.ai•2mo ago

Hi @UnRunDead. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To resolve the TypeScript errors you're encountering with Peer and Message types in your Nuxt application using Nitro's WebSocket functionality, you need to import these types from the correct location. Based on the information provided in the knowledge sources, here's how you can address this issue: 1. First, ensure that you have the latest version of Nuxt installed, as the WebSocket feature is relatively new. 2. The types for WebSocket handlers are auto-generated by Nitro. To use these types, you should import them from the #imports virtual module. Here's how you can modify your code:

import { WebSocketHandler, WebSocket } from '#imports'

export default defineWebSocketHandler({
  message(peer: WebSocket, message: string | ArrayBuffer) {
    // Your handler logic here
  }
})

import { WebSocketHandler, WebSocket } from '#imports'

export default defineWebSocketHandler({
  message(peer: WebSocket, message: string | ArrayBuffer) {
    // Your handler logic here
  }
})

The defineWebSocketHandler function is also available from the #imports module, which provides type safety for your WebSocket handlers Nitro utils (https://nitro.unjs.io/guide/utils#nitro-utils). 3. Make sure your tsconfig.json in the server folder is set up correctly, which you've already done:

{
  "extends": "../.nuxt/tsconfig.server.json"
}

{
  "extends": "../.nuxt/tsconfig.server.json"
}

This configuration ensures that your server-side code has access to the correct types Server Types (https://nuxt.com/docs/guide/directory-structure/server#server-types). 4. If you're still experiencing issues, you might need to run the Nuxt type generation command:

npx nuxi typecheck

npx nuxi typecheck

This command will check your types and potentially generate any missing type definitions Type-checking (https://nuxt.com/docs/guide/concepts/typescript#type-checking). 5. If the problem persists, make sure you're using the latest Nitro version. You can opt-in to the nightly release channel for the latest changes by updating your package.json as described in the Nightly Channel (https://nitro.unjs.io/guide/nightly) documentation. Remember that the exact type names might vary depending on the version of Nitro and Nuxt you're using. Always refer to the auto-generated types in your project for the most up-to-date type information. If you're still facing issues after trying these steps, it might be worth checking if there are any specific type definitions provided for WebSocket handlers in your Nuxt version's documentation or considering opening an issue on the Nuxt GitHub repository. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@288216321123024907> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

UnRunDeadOP•2mo ago

If i do it like that then there is the following Module '"#imports"' has no exported member 'WebSocket'.ts(2305) @kapa.ai If i do it like that then there is the following Module '"#imports"' has no exported member 'WebSocket'.ts(2305)

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I apologize for the confusion in my previous answer. You're right that the WebSocket type is not directly exported from #imports. Let's correct this based on the actual Nitro WebSocket API. According to the Nitro WebSocket documentation (https://nitro.unjs.io/guide/websocket#usage), the correct way to define a WebSocket handler is as follows:

import { defineWebSocketHandler } from '#imports'

export default defineWebSocketHandler({
  open(peer) {
    // Handle connection opened
  },
  message(peer, message) {
    // Handle incoming message
  },
  close(peer) {
    // Handle connection closed
  }
})

import { defineWebSocketHandler } from '#imports'

export default defineWebSocketHandler({
  open(peer) {
    // Handle connection opened
  },
  message(peer, message) {
    // Handle incoming message
  },
  close(peer) {
    // Handle connection closed
  }
})

In this case, the peer and message parameters are automatically typed by the defineWebSocketHandler function. You don't need to explicitly import or define the Peer or Message types. If you need to use these types elsewhere in your code, you can define them based on the handler function parameters:

import { defineWebSocketHandler } from '#imports'

type Peer = Parameters<Parameters<typeof defineWebSocketHandler>[0]['message']>[0]
type Message = Parameters<Parameters<typeof defineWebSocketHandler>[0]['message']>[1]

// Now you can use these types in your functions
function onCreateGame(peer: Peer, message: Message) {
  // Your game creation logic here
}

export default defineWebSocketHandler({
  message(peer, message) {
    onCreateGame(peer, message)
  }
})

import { defineWebSocketHandler } from '#imports'

type Peer = Parameters<Parameters<typeof defineWebSocketHandler>[0]['message']>[0]
type Message = Parameters<Parameters<typeof defineWebSocketHandler>[0]['message']>[1]

// Now you can use these types in your functions
function onCreateGame(peer: Peer, message: Message) {
  // Your game creation logic here
}

export default defineWebSocketHandler({
  message(peer, message) {
    onCreateGame(peer, message)
  }
})

This approach extracts the types from the defineWebSocketHandler function itself, ensuring that you're using the correct types as defined by Nitro. Remember that the WebSocket support in Nitro is still experimental, as mentioned in the WebSocket documentation (https://nitro.unjs.io/guide/websocket#opt-in-to-the-experimental-feature). Make sure you have enabled the experimental feature in your Nitro configuration:

export default defineNitroConfig({
  experimental: {
    websocket: true
  }
})

export default defineNitroConfig({
  experimental: {
    websocket: true
  }
})

If you're still encountering issues, it might be worth checking your Nuxt and Nitro versions, or considering using the nightly release channel (https://nitro.unjs.io/guide/nightly) to access the latest features and fixes. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@288216321123024907> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

UnRunDeadOP•2mo ago

Ok I found it with crossws

import type { Message, Peer } from 'crossws';

import type { Message, Peer } from 'crossws';

manniL•2mo ago

GitHub

Re-export websocket types · Issue #716 · unjs/h3

Describe the feature As a developer using websockets, I want to come up with generic helper functions working with websocket peers (such as for #715). However, h3 doesn't re-export the type of ...

Gaming

Programming

How to use nitro types