fix: build error

package.json

@@ -25,6 +25,7 @@
     "prepublishOnly": "nr build",
     "build": "nuxt-module-build",
     "play": "nr build && nuxi dev playground",
+    "build:playground": "nuxi build playground",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "release": "bumpp --commit --push --tag && pnpm publish",

playground/nuxt.config.ts

@@ -1,5 +1,5 @@
 import { defineNuxtConfig } from 'nuxt'
-import Module from '..'
+import Module from '../src/module'
 
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({

src/module.ts

@@ -1,9 +1,8 @@
 import { fileURLToPath } from 'url'
-import { dirname, join } from 'pathe'
+import { join } from 'pathe'
 import { defu } from 'defu'
 
-import { addServerHandler, defineNuxtModule } from '@nuxt/kit'
-import fs from 'fs-extra'
+import { addServerHandler, addTemplate, defineNuxtModule } from '@nuxt/kit'
 
 export interface ModuleOptions {
   baseURL: string
@@ -21,10 +20,10 @@ export default defineNuxtModule<ModuleOptions>({
   },
   async setup(options, nuxt) {
     const runtimeDir = fileURLToPath(new URL('./runtime', import.meta.url))
-    nuxt.options.build.transpile.push(runtimeDir)
+    nuxt.options.build.transpile.push(runtimeDir, '#build/trpc-client', '#build/trpc-handler')
 
-    const clientPath = join(nuxt.options.buildDir, 'trpc-client.ts')
     const handlerPath = join(nuxt.options.buildDir, 'trpc-handler.ts')
+    nuxt.options.build.transpile.push(handlerPath)
 
     // Final resolved configuration
     const finalConfig = nuxt.options.runtimeConfig.public.trpc = defu(nuxt.options.runtimeConfig.public.trpc, {
@@ -32,43 +31,53 @@ export default defineNuxtModule<ModuleOptions>({
       trpcURL: options.trpcURL,
     })
 
+    nuxt.hook('autoImports:extend', (imports) => {
+      imports.push(
+        { name: 'useClient', from: '#build/trpc-client' },
+        { name: 'useAsyncQuery', from: join(runtimeDir, 'client') },
+      )
+    })
+
     addServerHandler({
       route: `${finalConfig.trpcURL}/*`,
       handler: handlerPath,
     })
 
-    nuxt.hook('autoImports:extend', (imports) => {
-      imports.push(
-        { name: 'useClient', from: clientPath },
-        { name: 'useAsyncQuery', from: join(runtimeDir, 'client') },
-      )
+    addTemplate({
+      filename: 'trpc-client.ts',
+      write: true,
+      getContents() {
+        return `
+          import * as trpc from '@trpc/client'
+          import type { router } from '~/server/trpc'
+    
+          const client = trpc.createTRPCClient<typeof router>({
+            url: '${finalConfig.baseURL}${finalConfig.trpcURL}',
+          })
+        
+          export const useClient = () => client
+        `
+      },
     })
 
-    await fs.ensureDir(dirname(clientPath))
-
-    await fs.writeFile(clientPath, `
-      import * as trpc from '@trpc/client'
-      import type { router } from '~/server/trpc'
-
-      const client = trpc.createTRPCClient<typeof router>({
-        url: '${finalConfig.baseURL}${finalConfig.trpcURL}',
-      })
+    addTemplate({
+      filename: 'trpc-handler.ts',
+      write: true,
+      getContents() {
+        return `
+          import { createTRPCHandler } from 'trpc-nuxt/api'
+          import { useRuntimeConfig } from '#imports'
+          import * as functions from '~/server/trpc'
     
-      export const useClient = () => client
-    `)
-
-    await fs.writeFile(handlerPath, `
-      import { createTRPCHandler } from 'trpc-nuxt/api'
-      import { useRuntimeConfig } from '#imports'
-      import * as functions from '~/server/trpc'
-
-      const { trpc: { trpcURL } } = useRuntimeConfig().public
-
-      export default createTRPCHandler({
-        ...functions,
-        trpcURL 
-      })
-    `)
+          const { trpc: { trpcURL } } = useRuntimeConfig().public
+    
+          export default createTRPCHandler({
+            ...functions,
+            trpcURL 
+          })
+        `
+      },
+    })
   },
 })
 

src/runtime/client.ts

@@ -9,7 +9,7 @@ import type { ProcedureRecord, inferHandlerInput, inferProcedureInput, inferProc
 import type { TRPCClientErrorLike } from '@trpc/client'
 import { objectHash } from 'ohash'
 // @ts-expect-error: Resolved by Nuxt
-import { useAsyncData, useState } from '#imports'
+import { useAsyncData, useState } from '#app'
 // @ts-expect-error: Resolved by Nuxt
 import { useClient } from '#build/trpc-client'
 // @ts-expect-error: Resolved by Nuxt